Js中數組去重的幾種方法

  　　前幾天在看前端面試題的時候，其中js部分有個問題是實現數組去重的算法，一開始就想了一兩種方法，后來仔細回憶了下這個題，覺得該問題實現方法確實不止局限於一兩種方法

，從不同的角度去看待該問題就會有多種實現方法。以下列舉了一些常用方法。

 

一、利用ES6中的 Set 方法去重

　　注：Set為ES6新增的一個對象，允許存儲任何類型（原始值或引用值）的唯一值

1　　　　　　let arr = [1,0,0,2,9,8,3,1];

          function unique(arr) {
                return Array.from(new Set(arr))
          }
          console.log(unique(arr));   // [1,0,2,9,8,3]
　　or
6　　　　　　console.log(...new Set(arr));　// [1,0,2,9,8,3]

 

二、使用雙重for循環，再利用數組的splice方法去重（ES5常用）

    var arr = [1, 5, 6, 0, 7, 3, 0, 5, 9,5,5];
             function unique(arr) {
                    for (var i = 0, len = arr.length; i < len; i++) {
                        for (var j = i + 1, len = arr.length; j < len; j++) {
                            if (arr[i] === arr[j]) {
                                arr.splice(j, 1);
                                j--;        // 每刪除一個數j的值就減1
                                len--;      // j值減小時len也要相應減1（減少循環次數，節省性能）   
                                // console.log(j,len)

                            }
                        }
                    }
                    return arr;
                }
                console.log(unique(arr));       //  1, 5, 6, 0, 7, 3, 9

 

三、利用數組的indexOf方法去重

　　注：array.indexOf(item,statt) 返回數組中某個指定的元素的位置，沒有則返回-1

     var arr =[1,-5,-4,0,-4,7,7,3];
                function unique(arr){
                   var arr1 = [];       // 新建一個數組來存放arr中的值
                   for(var i=0,len=arr.length;i<len;i++){
                       if(arr1.indexOf(arr[i]) === -1){
                           arr1.push(arr[i]);
                       }
                   }
                   return arr1;
                }
                console.log(unique(arr));    // 1, -5, -4, 0, 7, 3

 

四、利用數組的sort方法去重（相鄰元素對比法）

　　注：array.sort( function ) 參數必須是函數，可選，默認升序

        var arr =  [5,7,1,8,1,8,3,4,9,7];
                function unique( arr ){
                    arr = arr.sort();
                    console.log(arr);

                    var arr1 = [arr[0]];
                    for(var i=1,len=arr.length;i<len;i++){
                        if(arr[i] !== arr[i-1]){
                            arr1.push(arr[i]);
                        }
                    }
                    return arr1;
                }
                console.log(unique(arr))l;   //  1, 1, 3, 4, 5, 7, 7, 8, 8, 9

 

五、利用對象的屬性不能相同的特點去重（不建議用，有缺陷）

　　注：用數組項作為對象的屬性會自動去除相同的值

        var arr = [1,3,8,9,3,5,4,4,6,6,2];
                function unique(arr){
                    var arr1 = [];
                    var obj = {};
                    for(var i =0,len=arr.length;i<len;i++){
                        if(!obj[arr[i]]){
                            arr1.push(arr[i]);
                            obj[arr[i]] = 1;
                        }
                        else{
                            obj[arr[i]]++;
                        }
                    }
                    return arr1;
                }
                console.log(unique(arr));   //  1, 3, 8, 9, 5, 4, 6, 2

 

六、利用數組的includes去重

　　注：arr.includes(指定元素(必填),指定索引值(可選,默認值為0) )，有值返回true，沒有則返回false

         var arr = [-1,0,8,-3,-1,5,5,7];
                function unique( arr ){
                    var arr1 = [];
                    for(var i=0,len=arr.length;i<len;i++){
                        if( !arr1.includes( arr[i] ) ){      // 檢索arr1中是否含有arr中的值
                            arr1.push(arr[i]);
                        }
                    }
                    return arr1;
                }
                console.log(unique(arr));      //  -1, 0, 8, -3, 5, 7

 

七、利用數組的filter方法去重

　　注：filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素，array.filter(function(currentValue,index,arr), thisValue)

　　　　currentValue：當前元素的值(必選參數)、index：當前元素的索引值(可選)、arr：當前元素屬於的數組對象(可選)、thisValue：對象作為該執行回調時使用，傳遞給函數，用作 "this" 的值，默認undefined(可選)

             var arr = [1,2,8,9,5,8,4,0,4];
                /*
                    模擬: 原始數組：[1,2,8,9,5,8,4,0,4]
                            索引值：0,1,2,3,4,5,6,7,8
                          偽新數組：[1,2,8,9,5,8,4,0,4]
                    使用indexOf方法找到數組中的元素在元素在中第一次出現的索引值
                            索引值：0,1,2,3,4,2,6,7,6
                        返回前后索引值相同的元素：
                          新數組：[1,2,8,9,5,4,0]        
                */
                function unique( arr ){
                    // 如果新數組的當前元素的索引值 == 該元素在原始數組中的第一個索引，則返回當前元素
                    return arr.filter(function(item,index){
                        return arr.indexOf(item,0) === index;
                    });
                }
                console.log(unique(arr));    //  1, 2, 8, 9, 5, 4, 0

 

八、利用函數遞歸去重

          var arr = [1,1,5,6,0,9,3,0,6]
                 function unique( arr ){
                     var arr1 = arr;
                      var len = arr1.length;
                      arr1.sort((a,b)=>{
                          return a-b
                      })
                      function loop(index){
                          if(index >= 1){
                             if(arr1[index] === arr1[index-1] ){
                                 arr1.splice(index,1);
                            }
                             loop(index - 1);  // 遞歸loop，然后數組去重
                        }
                    }
                    loop(len-1);   
                     return arr1
                 }
                 console.log(unique(arr));    //   0, 1, 3, 5, 6, 9

 

九、利用ES6中的Map方法去重

　

         　　　　/*
              　　　　創建一個空Map數據結構，遍歷需要去重的數組，把數組的每一個元素作為key存到Map中。由於Map中不會出現相同的key值，所以最終得到的就是去重后的結果。
                */
     let arr = [1, 0, 8, 3, -9, 1, 0, -9, 7]
           function unique(arr) {
                let map = new Map();
                console.log(map)
                //let arr1 = new Array();      // 數組用於返回結果
                let arr1 = []
                    for (let i = 0, len = arr.length; i < len; i++) {
                        if (map.has(arr[i])) {      // 判斷是否存在該key值
                            map.set(arr[i], true);
                        }
                        else {
                            map.set(arr[i], false);
                            arr1.push(arr[i]);
                        }
                    }
                    return arr1;
                }
21　　　　　　　　　　console.log(unique(arr)); // 1, 0, 8, 3, -9, 7