在开发JavaScript应用的过程中,经常会遇到在循环中移除指定元素的需求。

按照常规的思路,就是对数组进行一个for循环,然后在循环里面进行if判断,在判断中删除掉指定元素即可。

但是实际情况往往不会像预想的那样顺利运行。

出现的问题场景还原

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

从最终的结果可以看到,这段代码实际上只删除掉了匹配的其中一个元素,而另一个匹配条件的元素还存在,并不符合程序设计的初衷。

而从打印出来的运行过程不难发现,产生这个结果的原因是因为,当删除掉了一个元素后,数组中元素的索引(下标)发生了实时变化,造成了程序的异常。

解决问题的方法

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

方法1:实时调整数组中元素的下标对应关系。

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

出现问题的原因,是因为移除掉中间的一个元素之后,该元素后面的元素的索引(下标)都往前加1了,那么我们可以在删除元素后手动将循环中的下标重置为现在对应的下标即可(i--)。

方法2:从后往前遍历数组元素。

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

出现问题的原因,是因为移除掉中间的一个元素之后,该元素后面的元素的索引(下标)都往前加1了,那么只要是从后往前循环,就可以不用管后面元素的索引(下标)了。

方法3:使用while循环代替for循环(还是从后往前循环)。

(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);
})();

同上面从后往前循环的原理一致,只是将for循环使用了while循环代替。

"明天的今天是昨天,昨天又是新的一天。"

javascript在数组的循环中删除元素的更多相关文章

  1. Java中list在循环中删除元素的坑

    JAVA中循环遍历list有三种方式for循环.增强for循环(也就是常说的foreach循环).iterator遍历. 1.for循环遍历list for(int i=0;i<list.siz ...

  2. list for循环中删除元素

    Iterator.remove() is safe, you can use it like this: List<String> list = new ArrayList<> ...

  3. java 在循环中删除数组元素

    在写代码中经常会遇到需要在数组循环中删除数组元素的情况,但删除会导致数组长度变化. package com.fortunedr.thirdReport; import java.util.ArrayL ...

  4. Java循环中删除一个列表元素

    本文主要想讲述一下我对之前看到一篇文章的说法.假设跟你的想法有出入,欢迎留言.一起讨论. #3. 在循环中删除一个列表元素 考虑以下的代码.迭代过程中删除元素: ArrayList<String ...

  5. PHP从数组中删除元素的方法

    PHP从数组中删除元素的方法 本篇文章主要介绍了PHP从数组中删除元素的四种方法实例 删除一个元素,且保持原有索引不变 使用 unset 函数,示例如下: 1 2 3 4 5 <?php   $ ...

  6. PHP从数组中删除元素的四种方法实例

    PHP从数组中删除元素的四种方法实例 一.总结 一句话总结:unset(),array_splice(),array_diff(),array_diff_key() 二.PHP从数组中删除元素的四种方 ...

  7. MongoDB 学习笔记之 从数组中删除元素和指定数组位置

    从数组中删除元素: 从数组中删除单个元素: db.ArrayTest.updateOne({ "name" : "Bill"},{$pop: {"ad ...

  8. Java ArrayList正确循环添加删除元素方法及分析

    在阿里巴巴Java开发手册中,有这样一条规定: 但是手册中并没有给出具体原因,本文就来深入分析一下该规定背后的思考. 一.foreach循环 foreach循环(Foreach loop)是计算机编程 ...

  9. Jquery中删除元素方法

    empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除 语法: empty() remove(expr); empty用来删除指定元素的子元素,remove用来删除元素 ...

随机推荐

  1. 关于ajax请求不到后台页面提示400 bad request的问题

    解决方法一: 在contrller控制器中对应方法的 @RequestMapping注解中添加 method="RequestMethod.POST"属性

  2. Python Django 支付宝 扫码支付

    安装python-alipay-sdk pip install python-alipay-sdk --upgradepip install crypto 如果是python 2.7安装0.6.4这个 ...

  3. 【STM32-V7】STM32H743XIH6开发板,丰富软件资源,强劲硬件配置,大量软件解决方案持续更新中(2019-12-12)

    说明: 争取做更多的实战性应用,分享更多的嵌入式技术,希望能在实际项目中帮到大家. (1)V7将大力加强对初学者的支持力度,已经更新至63章,下载链接,后37章和一批视频教程将加紧制作. (2)事隔五 ...

  4. java大数习题

    大数加法,题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1002 import java.math.BigInteger; import java.ut ...

  5. [错误]Caused by: org.apache.spark.memory.SparkOutOfMemoryError: Unable to acquire 65536 bytes of memory, got 0

    今天,在运行Spark SQL代码的时候,遇到了以下错误: Caused by: org.apache.spark.SparkException: Job aborted due to stage f ...

  6. PostgreSQL学习之路一

    PostgreSQL的扩展PostGIS是最著名的开源GIS数据库. 安装PostgreSQL是第一步. 1.下载PostgreSQL的二进制安装文件 PostgreSQL官网–>Downloa ...

  7. FCC---Create a Gradual CSS Linear Gradient

    Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...

  8. Dynamics CRM命令栏定制基础知识及手动编辑customization.xml实例

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复166或者20151028可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 前面的博文:Dynamics C ...

  9. 【转载】Android内存泄漏的8种可能

    Java是垃圾回收语言的一种,其优点是开发者无需特意管理内存分配,降低了应用由于局部故障(segmentation fault)导致崩溃,同时防止未释放的内存把堆栈(heap)挤爆的可能,所以写出来的 ...

  10. iOS 为何使用runtime方法交换多次后却能按照交换顺序依次执行代码逻辑?

    题目: 假设我们有一个ViewController, Category A(ViewController), Category B(ViewController), Category C(ViewCo ...