【譯】如何用 ES6 去重一個數組

【原文】medium.com/dailyjs/how…

有三種方法對數組去重，返回惟一值。我喜歡用 Set，由於它快又簡單。

1.Set

首先介紹什麼是 Set

Set is a new data object introduced in ES6. Because Set only lets you store unique values. When you pass in an array, it will remove any duplicate values.

Set 是 ES6 引入新的數據對象。由於 Set 只容許存儲惟一值。傳入一個數組，返回任何重複的值。

讓咱們回到代碼中，並分解發生了什麼。分爲2步：

1. 首先，經過傳入一個數組建立一個新的 Set，由於 Set 只容許惟一值，全部重複的值都會被移除掉。
2. 如今重複值的消失了，咱們經過解構符號 ... 將它轉換成一個數組。

用 Array.from 將 Set 轉換爲一個數組

另外，您一樣可使用 Array.from 將一個 Set 轉換爲一個數組：

2: 使用 Filer

爲了理解這個選項，讓咱們瞭解兩個方法：indexOf 和 filter。

indexOf

indexOf 方法返回給出數組中找到的第一個元素的索引。

filter

filter() 方法建立一個新的數組元素，傳遞咱們提供的條件。換句話說，若是元素經過並返回true，它將被包含在過濾後的數組中。以及任何失敗或返回false的元素，它將不在篩選的數組中。

當咱們循環數組時，讓咱們y一步一步執行並遍歷所發生的。

下面是顯示控制檯的輸出。重複項是索引與indexOf不匹配的地方。所以，在這些狀況下，條件將爲false，而且不會包括在咱們的篩選數組中。

檢索重複值

咱們還可使用Filter方法從數組中檢索重複值。咱們能夠經過簡單地調整咱們的條件來作到這一點：

接着，跳出以上代碼，看看輸出的結果。

3: 使用 Reduce

Reduce方法用於對數組中的每一個元素執行一個由您提供的reducer函數(升序執行)，將其結果彙總爲單個返回值。 在這個案例中，咱們的縮減函數是檢查咱們的最終數組是否包含該項。若是沒有，就把它推到咱們的最終數組中。不然，跳過該元素並按原樣返回最終數組(實際上跳過了該元素)。 Reduce 比較難理解，因此讓咱們也來看看每種狀況下的輸出：

下面是來自 console.log 的輸出結果

參考資料

• MDN Web Docs — Set
• MDN Web Docs — Filter
• MDN Web Docs — Reduce
• GitHubGist: Remove duplicates from JS array
• CodeHandbook: How to Remove Duplicates from JavaScript Array