用生命谱写代码的赞歌

0%

JS循环删除数组中指定的元素

Posted on Edited on In
循环删除数组中指定的元素通常直接一个for循环，在循环里面添加if判断，在判断中删除指定元素即可。但是实际情况可能并不像我们预想的那样，下面细说一下问题所在。

一般for循环

1
2
3
4
5
6
7
8
9
10
11
12
13
(function() {
    var arr = [1,2,2,3,4,5];
    var len = arr.length;
    for(var i = 0; i < len; i++) {
        //打印数组中的情况，便于跟踪数组中数据的变化
        console.log(i + "=" + arr[i]);
        //删除掉所有为2的元素
        if (arr[i] === 2) {
            arr.splice(i, 1);
        }
    }
    console.log(arr);
})();

运行结果如下：

1
2
3
4
5
6
7
0=1
1=2
2=3
3=4
4=5
5=undefined
[1, 2, 3, 4, 5]

从结果来看实际上只删除掉了其中一个匹配的2元素，而另外一个元素还存在。

原因在于当删除掉了一个元素后，数组的索引发生的变化，造成了程序的异常。

解决方案

  1. 删除元素的同时调整遍历索引

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    (function() {
        var arr = [1, 2, 2, 3, 4, 5];
        var len = arr.length;
        for (var i = 0; i < len; i++) {
            //打印数组中的情况，便于跟踪数组中数据的变化

            console.log(i + "=" + arr[i]);
            //删除掉所有为2的元素

            if (arr[i] == 2) {
                //注意对比这行代码：删除元素后调整i的值

                arr.splice(i--, 1);
            }
        }
        console.log(arr);
    })();

  2. 反向遍历删除元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    (function() {
        var arr = [1, 2, 2, 3, 4, 5];
        var len = arr.length - 1;
        //start from the top

        for (var i = len; i >= 0; i--) {
            console.log(i + "=" + arr[i]);
            if (arr[i] == 2) {
                arr.splice(i, 1);
            }
        }
        console.log(arr);
    })();

  3. 使用while循环

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    (function() {
        var arr = [1, 2, 2, 3, 4, 5];
        var i = arr.length;
        while (i--) {
            console.log(i + "=" + arr[i]);
            if (arr[i] == 2) {
                arr.splice(i, 1);
            }
        }
        console.log(arr);
    })();

  4. 循环过程中设立flag标志，并在后面的 i++ 位置判断，flag为true则加，为false则不变。特别注意，for循环里面的 if 要先判断一下 arr[i] 的存在与否。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    (function() {
        var arr = [1, 2, 2, 3, 4, 5];
        var len = arr.length,
            i = 0,
            flag = true;
        for (; i < len; flag ? i++ : i) {
            console.log(i + "=" + arr[i]);
            if (arr[i] && arr[i] == 2) {
                arr.splice(i, 1);
                flag = false;
            } else {
                flag = true;
            }
        }
        console.log(arr);
    })();