使用splice无法移除数组中所有匹配元素的问题排查与解决

你想要移除数组中所有的1，预期结果为：

[4, 0, 5, 2, 6, 7, 3, 5, 11, 9, 9]

但实际得到的结果是：

[4, 0, 5, 2, 6, 1, 7, 3, 5, 11, 9, 9]

使用的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let myNumber =[1,4,0,5,1,2,6,1,1,7,3,5,11,9,1,9];
    for(i=0;i<myNumber.length;i++){
        if(myNumber[i]===1){
        myNumber.splice(i,1);
        }
    }
    console.log(myNumber);

  </script>
</body>
</html>

为什么代码无法正常工作？ #

当你用splice(i,1)删除数组元素时，数组长度会立刻缩短，被删除元素后面的所有元素都会向前移动一位。但循环变量i仍在持续递增，这就导致跳过了被删除元素的下一个元素。

比如原数组中索引7和8的位置是连续的1：删除索引7的1后，原来索引8的1会移动到索引7的位置，但此时i已经递增到8，直接跳过了这个新的索引7的元素，所以这个1没被删除。

修复方案 #

方案1：删除元素后回退索引 #

调用splice后将i减1，确保下一次循环时重新检查当前位置的元素：

let myNumber =[1,4,0,5,1,2,6,1,1,7,3,5,11,9,1,9];
for(let i=0;i<myNumber.length;i++){
    if(myNumber[i]===1){
        myNumber.splice(i,1);
        i--; // 回退索引，避免跳过元素
    }
}
console.log(myNumber);

方案2：从后往前遍历 #

从数组末尾开始遍历，删除元素不会影响前面未遍历元素的索引：

let myNumber =[1,4,0,5,1,2,6,1,1,7,3,5,11,9,1,9];
for(let i=myNumber.length-1;i>=0;i--){
    if(myNumber[i]===1){
        myNumber.splice(i,1);
    }
}
console.log(myNumber);

方案3：使用filter方法（更简洁） #

filter方法会返回一个新数组，直接排除值为1的元素，不会修改原数组，是更推荐的写法：

let myNumber =[1,4,0,5,1,2,6,1,1,7,3,5,11,9,1,9];
const filteredNumbers = myNumber.filter(num => num !== 1);
console.log(filteredNumbers);

内容的提问来源于stack exchange，提问作者mohammadreza Faramarzi