視訊課程-陣列去重你知道多少種方法？-冰山工作室-沙翼-web前端

冰山工作室發表於2019-03-28
陣列Web前端

課程視訊--空陣列的比較
提取碼:q82t

案例分析

隨機生成20個十以內的數字


let arr = Array.from({length:20},=>Math.random()*10|0);
console.log(arr);
//輸出結果：[5,4,7,0,0,0,8,0,2,9,3,0,0,1,5,9,2,8,6,0]
複製程式碼

思路如下：

  • 雙層迴圈，外層迴圈元素，內層迴圈時比較值
  • 值相同時，則刪去這個值

利用splice直接在原陣列進行操作

Array.prototype.distinct = function (){
    var arr = this,
        i,
        j,
        len = arr.length;
 
    for(i = 0; i < len; i++){
        for(j = i + 1; j < len; j++){
            if(arr[i] == arr[j]){
                arr.splice(j,1);
                len--;
                j--;
            }
        }
    }
    return arr;
};
 
var a = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,];
var b = a.distinct();
console.log(b.toString()); //1,2,3,4,5,6,56
複製程式碼

注意：刪除相同值時，陣列長度相應減一。
但是，我們要注意的是，此種方法會改變原陣列的值，也就是說，我們改變了arr的結果。如果不想改變原陣列改怎麼辦呢？

不改變原陣列

Array.prototype.distinct = function(){
    var arr = this,
        result = [],
        i,
        j,
        len = arr.length;
  
    for(i = 0; i < len; i++){
        for(j = i + 1; j < len; j++){
            if(arr[i] === arr[j]){
                j = ++i;
            }
        }
        result.push(arr[i]);
    }
    return result;
}
var arra = [1,2,3,4,4,1,1,2,1,1,1];
arra.distinct()
複製程式碼

此種方法，先建立一個空陣列，然後利用雙層迴圈，符合的，push進result陣列中，若遇到相同值，則直接跳過，不再進行push操作。這樣，我們就避免了對原陣列的操作。

這種方法解決了操作原陣列的問題，但是，如果陣列的值特別大怎麼辦？比如說，陣列arr有10000個值，找到第一項後，比較陣列後面的值，那我們需要比較9999次，找到第二項，需要比較9998次。但是，我們已經確定了，我們的結果集中，就10個數，這樣顯然不是我們想要的，怎麼辦呢？

這種方法解決了操作原陣列的問題，但是，如果陣列的值特別大怎麼辦？比如說，陣列arr有10000個值，找到第一項後，比較陣列後面的值，那我們需要比較9999次，找到第二項，需要比較9998次。但是，我們已經確定了，我們的結果集中，就10個數，這樣顯然不是我們想要的，怎麼辦呢？

為了提升效能，我們可以從結果集中進行比較。

indexOf的使用

let rs = [];
for(let i=0;i<arr.length;i++){
    if(rs.indexOf arr[i] === -1){
        rs.push(arr[i])
    }
};
console.log(rs)
複製程式碼

通過indexOf方法，如果得到的值為-1，則確定陣列中不存在該值，這樣，我們就把arr[i],push到陣列中。這樣我們就得到了去重後的陣列。

既然我們想到了indexOf方法，那我們是不是還能有更加簡便的方法來使陣列去重呢？

仔細想想，我們就會想到，陣列的filter方法。

陣列的filter方法

console.log(arr.filter(function(element,index,self){
    return self.indexOf(element) === index;
}));
複製程式碼

element是陣列的每個值，index是陣列的索引，self是陣列本身。

當使用indexOf方法時，如果陣列的每項的indexOf方法得到的值與陣列索引相同，則證明此值第一次出現，如果陣列的索引與index的值不相同，則證明不是第一次出現。

前面我們介紹的這些方法，都是使用陣列本身的方法。其實在js中，還有一個特殊的東西，叫做物件。

物件去重法

var o={};
var new_arr=[];
for(var i=0;i<arr.length;i++){
    var k=arr[i];
    if(!o[k]){
        o[k]=true;
        new_arr.push(k);
    }
}
console.log(new_arr)
複製程式碼

這種方法利用到，物件的屬性唯一行，來進行判斷。

為什麼要用到這種方法呢？其實前面的方法，都用到了雙層迴圈，indexOf也不例外，但是利用物件的key來做判斷時，我們只用到了一次迴圈，這樣就會大大增加執行的效能，利用物件去重也是這些方法中執行速度最快的一種。

前面介紹到的這些種方法，都是ES3,ES5中用到的方法，接下來我們介紹一下利用ES6來進行陣列去重的方法。

在本文的開頭，我們建立隨機陣列的時候，用到了 Array.from()方法，在ES6中新增了from方法。接下來我們藉助from方法和一些其他的方法來把陣列進行去重。

form方法

let rs = Array.from(arr);
//得到與當前一樣的陣列
let rs= Array.from(new Set(arr));
// 利用ES6的Set方法進行去重。
console.log([...new Set(arr)]);
//這種方法只用到了13個字元，也是陣列去重最方便的方法。
複製程式碼

總結：陣列去重在我們日常的開發中用到的比較少，但是我們要理解其中的邏輯，以便於我們更好的進行其他的開發任務

關於我們

視訊課程網盤地址-----傳送門 提取碼: q82t

冰山社團官網地址-----傳送門

如果觀看視訊或文件後，你覺得有些收穫，願意加入冰山社團與我們一同成長，請進入我們的官網，點選冰山社團，加入我們~

相關文章