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

原譯 | 小愛

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

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

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

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

我們首先定義一個新數(shù)組來保存唯一值，然后使用 for 循環(huán)通過 indexOf() 方法手動檢查每個值。當 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()，我們避免預定義一個空數(shù)組并繞過 for 循環(huán)。該策略的秘訣在于 .indexOf() 將返回從左側開始找到的值的索引。這意味著如果當前索引與 .indexOf() 的返回值不匹配，那么我們找到了重復項。

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

3、Set() 與擴展運算符

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

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

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

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

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

學習更多技能

請點擊下方公眾號