详解js删除数组中的指定元素


Posted in Javascript onOctober 31, 2018

本篇文章将会给大家介绍两种删除数组中的指定元素的方式,分别为:

1、单独定义一个的函数,通过函数来删除指定数组元素。

2、为Array对象定义了一个removeByValue的方法,在调用方法来删除指定数组元素,调用非常简单的。

下面我们通过简单的代码示例来简单介绍这两种删除数组指定元素的方式。

1、定义单独的函数removeByValue来进行元素删除

代码示例:删除数组somearray里的"tue"元素

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
 </head>
 
 <body>
  <div class="demo">
   <p>数组:mon, tue, wed, thur</p>
   <p class="p"></p>
 
  </div>
 
 </body>
 
 <script type="text/javascript">
  function removeByValue(arr, val) {
   for(var i = 0; i < arr.length; i++) {
    if(arr[i] == val) {
     arr.splice(i, 1);
     break;
    }
   }
  }
  var somearray = ["mon", "tue", "wed", "thur"]
  removeByValue(somearray, "tue");
  //somearray will now have "mon", "wed", "thur"
 
  document.write("<p>新数组:" + somearray + "</p>");
 </script>
 
</html>

效果图:

详解js删除数组中的指定元素

2、定义并调用数组的removeByValue方法来删除指定元素

代码示例:删除数组somearray里的"wed"元素

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div class="demo">
      <p>数组:mon, tue, wed, thur</p>
      <p>删除指定元素"tue"后:</p>
    </div>
  </body>
  <script type="text/javascript">
    Array.prototype.removeByValue = function(val) {
      for(var i = 0; i < this.length; i++) {
        if(this[i] == val) {
          this.splice(i, 1);
          break;
        }
      }
    }
    var somearray = ["mon", "tue", "wed", "thur"]
    somearray.removeByValue("wed");
    //somearray will now have "mon", "wed", "thur"
 
    document.write("<p>新数组:" + somearray + "</p>");
  </script>
 
</html>

效果图:

详解js删除数组中的指定元素

总结:以上就是本篇文章所介绍的js删除数组指定元素的两种方式,大家可以自己动手试试,加深理解,希望能对大家的学习有所帮助。

Javascript 相关文章推荐
Javascript里使用Dom操作Xml
Sep 20 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 #Javascript
Vue项目History模式404问题解决方法
Oct 31 #Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 #Javascript
vue组件中的样式属性scoped实例详解
Oct 30 #Javascript
node上的redis调用优化示例详解
Oct 30 #Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 #Javascript
Vue.js 父子组件通信的十种方式
Oct 30 #Javascript
You might like
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
Python简易版停车管理系统
2019/08/12 Python
python实现udp聊天窗口
2020/03/31 Python
pycharm全局搜索的具体步骤
2020/07/28 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
专营店会计助理岗位职责
2013/11/29 职场文书
单位消防安全制度
2014/01/12 职场文书
国贸专业求职信
2014/06/28 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
ant design charts 获取后端接口数据展示
2022/05/25 Javascript