详解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 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
学习ExtJS(一) 之基础前提
Oct 07 Javascript
jQuery hover 延时器实现代码
Mar 12 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
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
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
PHP下对字符串的递增运算代码
2010/08/21 PHP
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
python 全局变量的import机制介绍
2017/09/07 Python
python三引号输出方法
2019/02/27 Python
python对常见数据类型的遍历解析
2019/08/27 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
python实现批处理文件
2020/07/28 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
办理护照介绍信
2014/01/16 职场文书
物理力学求职信
2014/02/18 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
代理人委托书
2014/09/16 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
2014年妇联工作总结
2014/11/21 职场文书
综合素质评价自我评价
2015/03/06 职场文书
活动经费申请报告
2015/05/15 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书