【学习笔记30】JavaScript中数组的5种去重方法

1、Set去重

• 数组中默认是可以存储重复数据
• 实际项目中，数组中不能存储重复数据，需要去除数组中重复的数据
• 实际项目中，推荐使用使用set数据类型方法

        var arr = [1,2,3,1,2,3,4,1,2,3,4,5,1,2,3,4,5,6,1,2,3,4,5,6,7];
        console.log( arr );
​
        // 实际项目中 使用的数组去重代码
        var newArr = [...new Set(arr)];
        console.log( newArr );
1
2
3
4
5
6

2、indexOf / lastIndexOf

1. 创建一个新的空数组
2. 将原始数组数据写入新数组中，写入时执行判断
3. 要写入的数据新数组中没有，再执行写入操作

2.1方法一

        var arr = [1,2,3,1,2,3,4,1,2,3,4,5,1,2,3,4,5,6,1,2,3,4,5,6,7];
​
        // 创建一个空数组 存储数据
        var newArr = [];
​
        for (var i = 0; i <= arr.length - 1; i++) {
            // console.log( i, arr[i] );
​
            // 当查询结果是-1时 将值写入新数组newArr
            if (newArr.indexOf(arr[i]) === -1) {
           
                // 如果查询结果是-1 证明新数组中没有要写入的数据 arr[i] 
                // 执行末位新增数据操作
                newArr.push(arr[i]);
            }
        }
        console.log(newArr);         
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

        var arr = [1,2,3,1,2,3,4,1,2,3,4,5,1,2,3,4,5,6,1,2,3,4,5,6,7];
​
        // 创建一个空数组 存储数据
        var newArr = [] ;
​
        // forEach循环
        arr.forEach( function(item){
​
            // item存储的是原始数组中数据单元存储的数据数值
            // console.log( item );
​
            // 判断原始数组数据item 不在新数组中 执行写入操作
            if( newArr.indexOf( item ) === -1 ) newArr.push( item );
            
        })
        console.log( newArr );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.2方法二

    var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6, 7, 7, 7, 7];

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

1
2
3
4
5
6
7
8
9
10

3、sort排序

1. 将数组使用sort( )方法进行排序，排序后相同的数值会相邻排序
2. 循环遍历数组：如果当前单元存储的数值和下一个单元存储的数值相同，删除数组的下一个单元

        // 原始数组
        var arr = [1,2,3,1,2,3,4,1,2,3,4,5,1,2,3,4,5,6,1,2,3,4,5,6,7]; 
​
        // 利用sort对原始数组进行排序
        arr.sort( function(a , b){ return a-b });
​
        // 使用for循环遍历数组
        for( var i = 0 ; i < arr.length ; i++ ){
​
            // 当前单元和下一个单元相同时
            if( arr[i] === arr[i+1] ){
​
                // 从下一个单元i+1开始 删除 1 个
                arr.splice( i+1 , 1 );
​
                // 消除数组坍塌的影响
​
                i--;
            }
        }
        console.log( arr );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

4、filter过滤去重

1. 将数组中数据单元存储数据是第一次出现的数据
2. 通过filter过滤，写入到新数组中
3. 数组.indexOf( 数据 ) ，执行结果返回值是输入的数据，第一次出现位置的索引下标

        var arr = [ 1,2,3,1,2,3,4,1,2,3,4,5,1,2,3,4,5,6,1,2,3,4,5,6,7 ]; 
​
        // 通过filter过滤函数完成操作
        var newArr = arr.filter( function(item , index){
        /* 
            通过arr.indexOf(item)查询当前item数值，第一次出现位置的索引下标
            如果当前单元的索引下标index和 查询的第一次出现位置的索引下标 相同 
            item 就是第一次出现的数据 
            通过return返回到新数组中
        */
​
            var res = arr.indexOf( item );
            console.log( ` 当前数据是${item},索引下标是${index},数值第一次出现的索引下标是${res}` );
            
            return arr.indexOf( item ) === index ;
        })
​
        console.log( newArr );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

5、双重for循环完成数组去重

        var arr = [ 1,2,3,1,2,3,4,1,2,3,4,5,1,2,3,4,5,6,1,2,3,4,5,6,7 ]; 
​
        // 外层是第一个至倒数第二个单元
        for( var i = 0 ; i <= arr.length-1-1 ; i++ ){
​
            // 内层是外层起始的下一个至最后一个
            for( var j = i+1 ; j <= arr.length-1 ; j++ ){
​
                // 如果两个数值arr[i]和arr[j]相同 
                // 删除内层循环对应的单元,即j索引下标对应的单元
                if( arr[i] === arr[j] ){
                    // 从内层索引下标j对应的数值单元开始删除1个单元
                    arr.splice( j , 1 );
​
                    // 删除数组坍塌影响
                    j-- ;
                }
            }
        }
​
        console.log( arr );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21