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 相关文章推荐
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
vue-cli3 热更新配置操作
Sep 18 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实现xml与json之间的相互转换功能实例
2016/07/07 PHP
PHP编写简单的App接口
2016/08/28 PHP
cakephp常见知识点汇总
2017/02/24 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
jquery的Theme和Theme Switcher使用小结
2010/09/08 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
py2exe 编译ico图标的代码
2013/03/08 Python
Python、Javascript中的闭包比较
2015/02/04 Python
python使用super()出现错误解决办法
2017/08/14 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
对Python3 序列解包详解
2019/02/16 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
python能做哪些生活有趣的事情
2020/09/09 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
硕士生找工作求职信
2014/07/05 职场文书
群众路线专项整治方案
2014/10/27 职场文书
自我检讨书怎么写
2015/05/07 职场文书