JS移除数组元素函数因参数顺序失效的原因及修复方法

原代码与问题 #

原代码实现了一个从数组中移除指定元素的函数：

const removeFromArray = function (array,...numbersToRemove) {
    for(let i = 0; i < array.length; i++) {
        for(let a = 0; a < numbersToRemove.length; a++) {
            if(array[i] === numbersToRemove[a]) {
                const index = array.indexOf(numbersToRemove[a]);
                array.splice(index, 1);
            }
        }
    }
    return array; 
};

当调用console.log(removeFromArray([1, 2, 3, 4], 2, 3))时能正常返回[1,4]，但将移除参数改为3,2后，调用console.log(removeFromArray([1, 2, 3, 4], 3, 2))会返回[1,2,4]，2没有被移除，代码失效。

问题原因 #

你的推测方向有道理，但核心问题更具体：
当使用splice删除元素时，原数组的长度会缩短，且被删除元素后面的所有元素会向前移动一位。而你的循环是正向递增索引i，这会导致两种问题：

1. 删除元素后，后续元素前移，但i继续递增，会跳过原本位于当前i位置的新元素。比如删除索引2的3后，数组变成[1,2,4]，i接下来会变成3，而此时数组长度是3，循环条件i < array.length不成立，循环直接结束，根本没机会遍历到现在位于索引1的2。
2. 原代码中用indexOf获取索引的方式也有问题——如果数组中有重复元素，indexOf只会返回第一个匹配项的索引，可能不是当前遍历到的i位置。

修复方案 #

这里提供几种不需要箭头函数的修复方式：

方式1：倒序遍历数组（修改原数组） #

倒序遍历的时候，删除当前元素不会影响前面未遍历的元素索引，避免跳过问题：

function removeFromArray(array, ...numbersToRemove) {
    // 从数组末尾开始遍历
    for (let i = array.length - 1; i >= 0; i--) {
        // 检查当前元素是否在要移除的列表中
        if (numbersToRemove.includes(array[i])) {
            array.splice(i, 1);
        }
    }
    return array;
}

方式2：创建新数组过滤元素（不修改原数组，更安全） #

这种方式不会改变原数组，避免意外的副作用：

function removeFromArray(array, ...numbersToRemove) {
    const resultArray = [];
    for (let i = 0; i < array.length; i++) {
        // 如果元素不在移除列表中，加入结果数组
        if (!numbersToRemove.includes(array[i])) {
            resultArray.push(array[i]);
        }
    }
    return resultArray;
}

方式3：使用filter方法（不修改原数组） #

利用filter配合普通函数实现，代码更简洁：

function removeFromArray(array, ...numbersToRemove) {
    return array.filter(function(element) {
        return !numbersToRemove.includes(element);
    });
}

以上三种方式不管移除参数的顺序如何，都能正确移除所有指定元素。

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