JavaScript數組去重的五種方法及其他細節和拓展

Posted on by

前言

您或許會疑惑，網上那麼多去重方法，這篇文章還有什麼意義？

別著急，這篇文章隻節選瞭簡單的，好玩的，古老的，有實際講解意義的去重方法,除瞭去重的實現以外，我還將和您分享這其中的其他細節和拓展。

您或許不理解，為什麼隻有五種？

當然，我可以舉例出更多的例子來，但那有什麼意義呢？工作中用不到那麼多，會其中一二就可以。即使是面試，能說出五種也是完全足夠的。所以，我們完全沒有必要去記憶更多的去重方式。

五種方式

最簡單的方法，ES6的Set去重(最推薦)

這個方法是我日常開發中最喜歡用的方法，因為，他的使用方法是所有去重中最簡單的。而我是一個懶癌患者。

new Set是ES6新推出的一種類型。他和數組的區別在於，Set類型中的數據不可以有重復的值。當然，數組的一些方法Set也無法調用。

使用方法:其實很簡單，將一個數組轉化為Set數據，再轉化回來，就完成瞭去重。

    const arr = [1,1,2,2,3,3,4,4,5,5];
    const setData = Array.from(new Set(arr));
    console.log(setData);

圖例↓

但是Set去重有一個弊端，他無法去重引用類型的數據。比如對象數組。

圖例:

所以如果您的數組中都是值類型的數據（比如全string或者全number），那麼使用Set進行去重一定是首選，會為您減少很多的麻煩。

最古老的方法，雙重for循環去重

在很早以前，還沒有Set，沒有map，filter的時候，雙重for循環幾乎是去重的唯一方式。

//雙重循環去重
const handleRemoveRepeat = (arr) => {
    for (let i=0,len = arr.length; i < len; i++) {
        for (let j = i + 1; j < len; j++) {
            if (arr[i] === arr[j]) {
                arr.splice(j, 1);
                j--;
                len--;
            }
        }
    }
    return arr;
};

圖例:

這裡有一個有意思的地方，或許您不太明白，為什麼我的for循環的初始表達式中聲明瞭兩個東西:let i = 0;len = arr.length;

我來給您解答:

被圈起來的三個表示的是for循環的三個表達式,依次分別是:初始表達式，判斷表達式，自增表達式。其中，初始表達式在for循環開始的時候會執行一次，以後就不會再執行瞭，但是判斷表達式和自增表達式會在每一次循環的時候都去執行。

如果您不太理解文字表達，沒關系，我畫瞭張圖。

您或許已經發現，後一個圈中的內容會陷入一個循環。

但這和我們一開始len = arr.length有什麼關系呢？

值得註意的是,如果一開始定義，那麼每一次循環，都需要走 arr.length,length可是個方法，雖然他的消耗並不大，但在for循環中這個消耗會被方法，假設這個循環需要循環10000次呢，length就會被執行10000次。

最雞肋的去重方式，indexOf去重

indexOf還是相對簡單又雞肋。為什麼說他雞肋呢?說難吧，indexOf方法確實比上文的雙重for循環簡單。說簡單吧，嘿，他沒Set方法去重來的更簡單。所以雞肋。

//去重
const handleRemoveRepeat = (arr) => {
    let repeatArr = [];
    for (let i = 0,len = arr.length ; i < len; i++) 
     if (repeatArr.indexOf(arr[i]) === -1)  repeatArr.push(arr[i])
    return repeatArr;
}

圖例：

同樣的，這個方法也有一個細節點，您或許已經發現瞭，上文的if和for沒有花括號；是的；for和if都默認對下面一條語句負責。在沒有必要的情況下，不用多加一個{}。

或許您會覺得這不可讀，這就是有意思的地方瞭，這是一個工具類方法，註定被藏在utils中的一個方法，他無關業務邏輯，並不需要有太大可讀性。

而且，這麼寫還有一個很原因:給人的視覺沖擊會比較大。說點人話就是 —–很裝;

一種類似於indexOf的去重方法，includes去重

使用includes的去重方法和indexOf不能說很像，基本上一模一樣。變換的僅僅隻是判斷方法。

includes的判斷方法更簡單瞭。循環數組的每一樣，用新數組檢測當前數組中是否包含數組項，如果不包含，則追加該元素

const handleRemoveRepeat = (arr) => {
    let repeatArr = [];
    for (let i = 0,len = arr.length ; i < len; i++)
        if (!repeatArr.includes(arr[i])) repeatArr.push(arr[i])
    return repeatArr;
}

圖例

includes方法在除瞭去重以外的場景，還是很好用的。

最有趣的去重方法，使用filter去重。

使用filter配合indexOf進行的去重過程，真的可以非常的簡單且富含趣味性。

//去重
const handleRemoveRepeat = (arr) => arr.filter((item,index) => arr.indexOf(item,0) === index);

是的，沒瞭，就一行。

圖例

您是否沒有反應過來？乍一看，不知道他是怎麼完成去重的。

小問題，我為您解答疑惑。

indexOf的特性是返回被查找的目標中包含的第一個位置的索引

如圖，下標為0和下標為4的位置存儲的都是“1”。但是indexOf()隻返回瞭0。因為indexOf的特性是返回被查找的目標中包含的第一個位置的索引。

同樣的，我們可以利用這個特性。來完成去重，文字描述恐怕很難表達準確，您可以看看下面的這張圖。

您或許會問:如果要去重對象數組怎麼辦？

去除對象數組的方式他並不是很穩定，這不像我們去重值類型數據的數組，上面的五種方法隨便復制一種，往裡面一調用就好瞭。絕對不會出問題。

但是對象數組去重，需要有一個去重條件，也就是根據哪個字段進行去重。

用雙重循環去重舉個例子：

圖例

如上圖，我們就是拿數據的id作為去重條件的。

像這樣的對象數組就不能直接提供方法，因為每一個場景下的對象數組都不一定一樣。我這是根據id去重，萬一其他地方需要根據其他字段去重呢。

所以，如果您需要去重對象，根據上方的截圖中的代碼。使用雙重for循環的方法，自己自定義一個可以滿足您當前業務需求的去重方法。

總結

到此這篇關於JavaScript數組去重的五種方法及其他細節和拓展的文章就介紹到這瞭,更多相關js數組去重方法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：