
有三種方法對陣列去重,返回唯一值。我喜歡用 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步:
- 首先,通過傳入一個陣列建立一個新的
Set
,因為Set
只允許唯一值,所有重複的值都會被移除掉。 - 現在重複值的消失了,我們通過解構符號
...
將它轉換成一個陣列。

用 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 的輸出結果
