详解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 相关文章推荐
jQuery学习5 jQuery事件模型
Feb 07 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
使用node.js搭建服务器
May 20 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Python字符串逐字符或逐词反转方法
2015/05/21 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
若干个Java基础面试题
2015/05/19 面试题
学生安全教育材料
2014/02/14 职场文书
社区党务公开实施方案
2014/03/18 职场文书
法学院毕业生求职信
2014/06/25 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
环卫工作汇报材料
2014/10/28 职场文书
组织生活会发言材料
2014/12/15 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
合同补充协议书
2016/03/24 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
Python OpenCV超详细讲解基本功能
2022/04/02 Python
vue使用element-ui按需引入
2022/05/20 Vue.js