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 相关文章推荐
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
js的新生代垃圾回收知识点总结
Aug 22 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
一个PHP数组应该有多大的分析
2009/07/30 PHP
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
用js写了一个类似php的print_r输出换行功能
2013/02/18 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
Python sorted排序方法如何实现
2020/03/31 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
怎么处理XML的中文问题
2015/03/26 面试题
竞选演讲稿范文
2013/12/28 职场文书
《乌塔》教学反思
2014/02/17 职场文书
外国人聘用意向书
2014/04/01 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
党员评议思想汇报
2014/10/08 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
大连导游词
2015/02/12 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
Nginx跨域问题解析与解决
2022/08/05 Servers