JavaScript数组元素删除异常：如何正确移除指定元素得到目标数组

嘿，我明白你遇到的麻烦了——循环删除数组元素时，因为splice()会直接修改原数组的长度和元素位置，导致有些元素没被检查到，最后得到了不想要的结果。咱们来一步步解决这个问题。

问题根源分析 #

你原来的代码从前往后遍历数组，当执行splice(i,1)删除元素后，数组后面的所有元素都会往前移动一位，但循环的i还在继续递增，这就导致你跳过了下一个元素。比如你的例子里：

• 初始数组[3,2,1]，i=1时删除了2，数组变成[3,1]；
• 接着i变成2，但此时数组长度已经是2，循环直接结束，1根本没被检查到，所以最后剩下了[3,1]。

至于你尝试的remove arrayAuxiliar[i]，JavaScript数组并没有原生的remove()方法，这么做只会把对应位置的元素设为undefined，所以得到了[3,,]这种带空占位符的数组，这可不是我们想要的。

三种可行的解决方案 #

1. 倒序遍历数组

从数组的最后一位开始往前遍历，这样即使删除了前面的元素，也不会影响当前正在遍历的索引位置，因为后面的元素已经检查过了。

var arrayAuxiliar = [3,2,1];
var valueFirst = 1;
var value = 2;

// 从末尾开始倒序循环
for (var i = arrayAuxiliar.length - 1; i >= 0; i--) {
    // 合并条件，代码更简洁
    if (arrayAuxiliar[i] === valueFirst || arrayAuxiliar[i] === value) {
        arrayAuxiliar.splice(i, 1);
    }
}

console.log(arrayAuxiliar); // 输出: [3]

2. 使用filter()方法（推荐）

filter()是数组的原生方法，它会创建一个新数组，包含所有通过测试的元素。这种方式不需要手动处理索引，代码简洁易读，还避免了修改原数组的副作用（如果需要修改原数组，直接赋值覆盖即可）。

var arrayAuxiliar = [3,2,1];
var valueFirst = 1;
var value = 2;

// 筛选出既不等于valueFirst也不等于value的元素
arrayAuxiliar = arrayAuxiliar.filter(item => item !== valueFirst && item !== value);

console.log(arrayAuxiliar); // 输出: [3]

3. 正向遍历但调整索引

如果必须用正向循环，那在删除元素后，把i减1，这样下一次循环就能检查到刚往前移过来的元素。

var arrayAuxiliar = [3,2,1];
var valueFirst = 1;
var value = 2;

for (var i = 0; i < arrayAuxiliar.length; i++) {
    if (arrayAuxiliar[i] === valueFirst || arrayAuxiliar[i] === value) {
        arrayAuxiliar.splice(i, 1);
        i--; // 删除元素后回退索引，避免跳过下一个元素
    }
}

console.log(arrayAuxiliar); // 输出: [3]

总结 #

如果不需要保留原数组的引用，强烈推荐用filter()方法，代码最简洁也最不容易出错；如果必须修改原数组本身，倒序遍历或者调整索引的方式都能解决问题。

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