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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
Vue头像处理方案小结
Jul 26 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 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中GET变量的使用
2006/10/09 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
node.js基础知识汇总
2020/08/25 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
Python 探针的实现原理
2016/04/23 Python
深入浅析python定时杀进程
2016/06/06 Python
Python 私有函数的实例详解
2017/09/11 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
init进程的作用
2012/04/12 面试题
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
Python实现视频自动打码的示例代码
2022/04/08 Python