前言

您或許會(huì)疑惑，網(wǎng)上那么多去重方法，這篇文章還有什么意義？

別著急，這篇文章只節(jié)選了簡(jiǎn)單的，好玩的，古老的，有實(shí)際講解意義的去重方法,除了去重的實(shí)現(xiàn)以外，我還將和您分享這其中的其他細(xì)節(jié)和拓展。

您或許不理解，為什么只有五種？

當(dāng)然，我可以舉例出更多的例子來(lái)，但那有什么意義呢？工作中用不到那么多，會(huì)其中一二就可以。即使是面試，能說(shuō)出五種也是完全足夠的。所以，我們完全沒(méi)有必要去記憶更多的去重方式。

五種方式

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

這個(gè)方法是我日常開(kāi)發(fā)中最喜歡用的方法，因?yàn)?，他的使用方法是所有去重中最?jiǎn)單的。而我是一個(gè)懶癌患者。

new Set是ES6新推出的一種類(lèi)型。他和數(shù)組的區(qū)別在于，Set類(lèi)型中的數(shù)據(jù)不可以有重復(fù)的值。當(dāng)然，數(shù)組的一些方法Set也無(wú)法調(diào)用。

使用方法:其實(shí)很簡(jiǎn)單，將一個(gè)數(shù)組轉(zhuǎn)化為Set數(shù)據(jù)，再轉(zhuǎn)化回來(lái)，就完成了去重。

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

圖例↓

但是Set去重有一個(gè)弊端，他無(wú)法去重引用類(lèi)型的數(shù)據(jù)。比如對(duì)象數(shù)組。

圖例:

所以如果您的數(shù)組中都是值類(lèi)型的數(shù)據(jù)（比如全string或者全number），那么使用Set進(jìn)行去重一定是首選，會(huì)為您減少很多的麻煩。

最古老的方法，雙重for循環(huán)去重

在很早以前，還沒(méi)有Set，沒(méi)有map，filter的時(shí)候，雙重for循環(huán)幾乎是去重的唯一方式。

//雙重循環(huán)去重
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;
};

圖例:

這里有一個(gè)有意思的地方，或許您不太明白，為什么我的for循環(huán)的初始表達(dá)式中聲明了兩個(gè)東西:let i = 0;len = arr.length;

我來(lái)給您解答:

被圈起來(lái)的三個(gè)表示的是for循環(huán)的三個(gè)表達(dá)式,依次分別是:初始表達(dá)式，判斷表達(dá)式，自增表達(dá)式。其中，初始表達(dá)式在for循環(huán)開(kāi)始的時(shí)候會(huì)執(zhí)行一次，以后就不會(huì)再執(zhí)行了，但是判斷表達(dá)式和自增表達(dá)式會(huì)在每一次循環(huán)的時(shí)候都去執(zhí)行。

如果您不太理解文字表達(dá)，沒(méi)關(guān)系，我畫(huà)了張圖。

您或許已經(jīng)發(fā)現(xiàn)，后一個(gè)圈中的內(nèi)容會(huì)陷入一個(gè)循環(huán)。

但這和我們一開(kāi)始len = arr.length有什么關(guān)系呢？

值得注意的是,如果一開(kāi)始定義，那么每一次循環(huán)，都需要走 arr.length,length可是個(gè)方法，雖然他的消耗并不大，但在for循環(huán)中這個(gè)消耗會(huì)被方法，假設(shè)這個(gè)循環(huán)需要循環(huán)10000次呢，length就會(huì)被執(zhí)行10000次。

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

indexOf還是相對(duì)簡(jiǎn)單又雞肋。為什么說(shuō)他雞肋呢?說(shuō)難吧，indexOf方法確實(shí)比上文的雙重for循環(huán)簡(jiǎn)單。說(shuō)簡(jiǎn)單吧，嘿，他沒(méi)Set方法去重來(lái)的更簡(jiǎn)單。所以雞肋。

//去重
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;
}

圖例：

同樣的，這個(gè)方法也有一個(gè)細(xì)節(jié)點(diǎn)，您或許已經(jīng)發(fā)現(xiàn)了，上文的if和for沒(méi)有花括號(hào)；是的；for和if都默認(rèn)對(duì)下面一條語(yǔ)句負(fù)責(zé)。在沒(méi)有必要的情況下，不用多加一個(gè){}。

或許您會(huì)覺(jué)得這不可讀，這就是有意思的地方了，這是一個(gè)工具類(lèi)方法，注定被藏在utils中的一個(gè)方法，他無(wú)關(guān)業(yè)務(wù)邏輯，并不需要有太大可讀性。

而且，這么寫(xiě)還有一個(gè)很原因:給人的視覺(jué)沖擊會(huì)比較大。說(shuō)點(diǎn)人話就是 -----很裝;

一種類(lèi)似于indexOf的去重方法，includes去重

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

includes的判斷方法更簡(jiǎn)單了。循環(huán)數(shù)組的每一樣，用新數(shù)組檢測(cè)當(dāng)前數(shù)組中是否包含數(shù)組項(xiàng)，如果不包含，則追加該元素

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方法在除了去重以外的場(chǎng)景，還是很好用的。

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

使用filter配合indexOf進(jìn)行的去重過(guò)程，真的可以非常的簡(jiǎn)單且富含趣味性。

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

是的，沒(méi)了，就一行。

圖例

您是否沒(méi)有反應(yīng)過(guò)來(lái)？乍一看，不知道他是怎么完成去重的。

小問(wèn)題，我為您解答疑惑。

indexOf的特性是返回被查找的目標(biāo)中包含的第一個(gè)位置的索引

如圖，下標(biāo)為0和下標(biāo)為4的位置存儲(chǔ)的都是“1”。但是indexOf()只返回了0。因?yàn)閕ndexOf的特性是返回被查找的目標(biāo)中包含的第一個(gè)位置的索引。

同樣的，我們可以利用這個(gè)特性。來(lái)完成去重，文字描述恐怕很難表達(dá)準(zhǔn)確，您可以看看下面的這張圖。

您或許會(huì)問(wèn):如果要去重對(duì)象數(shù)組怎么辦？

去除對(duì)象數(shù)組的方式他并不是很穩(wěn)定，這不像我們?nèi)ブ刂殿?lèi)型數(shù)據(jù)的數(shù)組，上面的五種方法隨便復(fù)制一種，往里面一調(diào)用就好了。絕對(duì)不會(huì)出問(wèn)題。

但是對(duì)象數(shù)組去重，需要有一個(gè)去重條件，也就是根據(jù)哪個(gè)字段進(jìn)行去重。

用雙重循環(huán)去重舉個(gè)例子：

圖例

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

像這樣的對(duì)象數(shù)組就不能直接提供方法，因?yàn)槊恳粋€(gè)場(chǎng)景下的對(duì)象數(shù)組都不一定一樣。我這是根據(jù)id去重，萬(wàn)一其他地方需要根據(jù)其他字段去重呢。

所以，如果您需要去重對(duì)象，根據(jù)上方的截圖中的代碼。使用雙重for循環(huán)的方法，自己自定義一個(gè)可以滿(mǎn)足您當(dāng)前業(yè)務(wù)需求的去重方法。

總結(jié)

到此這篇關(guān)于JavaScript數(shù)組去重的五種方法及其他細(xì)節(jié)和拓展的文章就介紹到這了,更多相關(guān)js數(shù)組去重方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論