原文 | https://medium.com/code-85/three-easy-ways-to-remove-duplicate-array-values-in-javascript-97131baeba7a

原譯 | 小愛

有多種方法可以刪除數(shù)組中的重復(fù)值。在開始使用推薦的方法之前，先問問自己你使用的是哪個 ES 版本？

我們將通過三種策略來刪除重復(fù)值。每個策略都將使用更新的約定，從而產(chǎn)生更高效的代碼。為了節(jié)省空間，假設(shè)每個代碼片段都使用一個名為 items 的變量，該變量是一個包含一些重復(fù)值的數(shù)組。

1、帶有 .indexOf() 的 For 循環(huán)

第一種方法經(jīng)過實(shí)戰(zhàn)測試，保證即使是最古老的基礎(chǔ)設(shè)施也能使用。

我們首先定義一個新數(shù)組來保存唯一值，然后使用 for 循環(huán)通過 indexOf() 方法手動檢查每個值。當(dāng) indexOf() 返回 -1 時，我們知道該值尚未出現(xiàn)在我們的唯一數(shù)組中。

var unique = [];for(var i=0; i < items.length; i++) {  if(unique.indexOf(items[i]) == -1) {    unique.push(items[i]);  }}

2、.filter() 與 .indexOf()

第二個序列將需要 ES5，它于 2009 年發(fā)布。

使用 .filter()，我們避免預(yù)定義一個空數(shù)組并繞過 for 循環(huán)。該策略的秘訣在于 .indexOf() 將返回從左側(cè)開始找到的值的索引。這意味著如果當(dāng)前索引與 .indexOf() 的返回值不匹配，那么我們找到了重復(fù)項(xiàng)。

var unique = items.filter(  (item, index) => {    return items.indexOf(item) == index;  });

3、Set() 與擴(kuò)展運(yùn)算符

這個最終策略利用了 2015 年發(fā)布的 ES6 的特性。

在 ES6 中，JavaScript 支持 Set() 數(shù)據(jù)結(jié)構(gòu)，根據(jù)定義，該結(jié)構(gòu)僅包含唯一值。使用 Set() 的一個缺點(diǎn)是我們不再留下數(shù)組。我們使用擴(kuò)展運(yùn)算符來解決這個問題，將集合解包到一個新形成的數(shù)組中。

const unique = [... new Set(items)];

你需要根據(jù)正在構(gòu)建的環(huán)境來決定選擇哪種實(shí)現(xiàn)。雖然自然的反應(yīng)是“越新越好”，但不要忘記考慮代碼的舒適度以及在重新訪問時識別代碼的能力。

以上就是我分享的3種方法，希望對你也有幫助，謝謝你的閱讀！

學(xué)習(xí)更多技能

請點(diǎn)擊下方公眾號