splice()方法在for循环中的bug

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目，该方法会改变原始数组。所以在删除数组某项中，通常是我的优先选择，例如：

var arr=[1,2,3,3,4,5,6,3];
arr.splice(2,1);
console.log(arr);

输出结果：

然而，如果将其放在for循环中，如何呢？请看下面代码

var arr=[1,2,3,3,4,5,6,3];
for(var i=0;i<arr.length;i++){
if(arr[i]===3){
arr.splice(i,1);
}
}
console.log(arr);

输出结果：

嗯？！出现了意料之外的结果了，中间还有一个3存在呢。why？

我们打印一下当if语句成立时i的值，看看结果如何？

var arr=[1,2,3,3,4,5,6,3];
for(var i=0;i<arr.length;i++){
if(arr[i]===3){
console.log(i);
arr.splice(i,1);
}
}
console.log(arr);

输出结果：

从原数组我们可以看出3分别位于下标2，3，7处，我们都知道当splice()方法删除数组时，会改变原始数组。当i=2时，符合arr[i]等于3，于是删掉下标2的3，此时，原始数组改变。新数组arrNew=[1,2,3,4,5,6,3],下标2的值是原数组下标3的值，下标3的值是原数组下标4的值，for循环(i=3)继续执行，最终得出结果[1,2,3,4,5,6]。可是我们想把arr[i]为3的数都删掉怎么办呢？

看下面，看下面啊。

var arr=[1,2,3,3,3,3,3,3,4,5,3,3,6,3,3];
for(var i=0;i<arr.length;i++){
if(arr[i]===3){
console.log(i);
arr.splice(i,1);
i=i-1;
}
}
console.log(arr);

输出结果：

 

这是第一种解决方法，在for循环时既然会漏掉之前符合条件的项，那我们直接手动的向前一位，不就解决问题了嘛。但是，这个方法不是足够的好，为什么？猜猜看啊。

还有一种方法就是：

var arr=[1,2,3,3,3,3,3,3,4,5,3,3,6,3,3];
for(var i=arr.length-1;i>-1;i--){
if(arr[i]===3){
arr.splice(i,1);
}
}
console.log(arr);

输出结果：

 

没错，就是for循环逆向遍历，这样轻松简单的就得到了正确的结果。
————————————————
版权声明：本文为CSDN博主「明长歌」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012761510/article/details/82585172