js 数组遍历时删除元素

参考
js在循环遍历数组中删除指定元素踩坑（ foreach.. for.. for..in.. ）
JS-数组遍历中删除元素的方法优化

一、删除失效的例子

let arr = [1, 1, 2];
arr.forEach((item, index, arr) => {
    if (item == 1) {
        arr.splice(index, 1);
    }
})
console.log(arr); // [1, 2]

第一次forEach循环，arr是[1, 1, 2]，index是0，item是1，if条件成立，使用splice删除了item1，arr变成[1, 2]
第二次forEach循环，arr是[1, 2]，index是1，item是2，if条件不成立，使用splice无法删除了第二个重复的1

二、解决方案

1.使用filter()方法筛选符合条件的元素，去除不符合条件的元素

let arr = [1, 1, 2];
arr = arr.filter(item => {
    return item != 1;
});
console.log(arr);

2.删除下标i的时候执行 i--(使下标回退一个位置)

出现问题的原因就是splice删除当前数据时，导致后面的数据前移，最直接的解决办法就是i也跟着前移即可。

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

注意，此时使用For in遍历是不行的

let arr = [1, 1, 2];
for (let i in arr) {
    if (arr[i] == 1) {
        arr.splice(i, 1);
        i--;
    }
}
console.log(arr);// [1, 2]

原因是迭代器的i，每次都重新取值了，i--失效。

3.从后向前遍历，这样就算后面的数据前移，也不影响继续遍历

let arr = [1, 1, 2];
for (let i = arr.length - 1; i >= 0; i--) {
    if (arr[i] == 1) {
        arr.splice(i, 1);
    }
}
console.log(arr);

三、扩展到map

    private testDelMap(): void {
        let m: Map<string, number> = new Map();
        m.set("a", 1);
        m.set("b", 2);
        m.set("c", 3);
        m.set("d", 3);
        m.set("a", 4);
        for (let [k, v] of m) {
            console.log("map k:", k, v);
        }
        for (let [k, v] of m) {
            if (v == 3) {
                m.delete(k);
            }
        }
        for (let [k, v] of m) {
            console.log("new map k:", k, v);
        }
    }

测试结果说明可以安全删除