Javascript循环删除数组中元素的几种方法示例


Posted in Javascript onMay 18, 2017

本文主要跟大家分享了关于Javascript循环删除数组中元素的几种方法,分享出来供大家参考学习,下面来看看详细的介绍:

发现问题

大家在码代码的过程中,经常会遇到在循环中移除指定元素的需求。按照常规的思路,直接一个for循环,然后在循环里面来个if判断,在判断中删除掉指定元素即可。但是实际情况往往不会像预想的那样顺利运行。

下面以一段Javascript代码为例演示这一过程。

(function () {
 var arr = [1,2,2,3,4,5];
 var len = arr.length;
 for(var i=0;i<len;i++){
 //打印数组中的情况,便于跟踪数组中数据的变化
 console.log(i+"="+arr[i]);
 //删除掉所有为2的元素
 if(arr[i]==2){
  arr.splice(i,1);
 }
 }
 console.log(arr);
})();

运行结果如下:

Javascript循环删除数组中元素的几种方法示例

从最终的结果可以看到实际上只删除掉了匹配的其中一个元素,而另外一个元素还存在。

从打印出的运行过程不难发现,原因为当删除掉了一个元素后,数组的索引发生的变化,造成了程序的异常。

解决方法

找到了问题的原因,就不难解决问题了。

方法一

(function () {
 var arr = [1,2,2,3,4,5];
 var len = arr.length;
 for(var i=0;i<len;i++){
 //打印数组中的情况,便于跟踪数组中数据的变化
 console.log(i+"="+arr[i]);
 //删除掉所有为2的元素
 if(arr[i]==2){
  //注意对比这行代码:删除元素后调整i的值
  arr.splice(i--,1);
 }
 }
 console.log(arr);
})();

上面的代码看起来不大好理解,有没有看起来更易于理解的代码呢?请看下面

方法二

(function () {
 var arr = [1,2,2,3,4,5];
 var len = arr.length-1;
 //start from the top
 for(var i=len;i>=0;i--){
 console.log(i+"="+arr[i]);
 if(arr[i]==2){
  arr.splice(i,1);
 }
 }
 console.log(arr);
})();

从后往前遍历可以有效解决问题,也容易理解,那么还有没有跟简洁的实现呢?接着看下面代码

方法三

(function () {
 var arr = [1,2,2,3,4,5];
 var i = arr.length;
 while(i--){
 console.log(i+"="+arr[i]);
 if(arr[i]==2){
  arr.splice(i,1);
 }
 }
 console.log(arr);
})();

使用while(i--) ,i为数组下标,个人觉得这是最简洁、高效的代码实现了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
一页面多XMLHttpRequest对象
Jan 22 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 Javascript
原生js实现自定义滚动条组件
Jan 20 Javascript
Javascript实现信息滚动效果
May 18 #Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 #Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 #Javascript
BootStrap 导航条实例代码
May 18 #Javascript
AngularJS全局警告框实现方法示例
May 18 #Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 #Javascript
原生js轮播特效
May 18 #Javascript
You might like
中国收音机工业发展史
2021/03/02 无线电
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
在javascript中对于DOM的加强
2013/04/11 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
SVG实现时钟效果
2018/07/17 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
开源Web应用框架Django图文教程
2017/03/09 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
python调用百度语音识别api
2018/08/30 Python
Django之模型层多表操作的实现
2019/01/08 Python
Python之列表实现栈的工作功能
2019/01/28 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
python 伯努利分布详解
2020/02/25 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
python3中编码获取网页的实例方法
2020/11/16 Python
方正Java笔试题
2014/07/03 面试题
酒店拾金不昧表扬信
2014/01/18 职场文书
淘宝好评语大全
2014/05/05 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
公开承诺书格式
2014/05/21 职场文书
庆祝儿童节标语
2014/10/09 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL