如何利用es6去重

2021-09-19 19:19:28 字數 2450 閱讀 9047

以下是三種方法從陣列裡去重,並且返回唯一的值。我最喜歡的方式是使用set,因為它是最短最簡單的。

const array = [5, 2, 4, 5, 3];

console.log([...new set(array)])

console.log(array.filter((item, index) => array.indexof(item) === index))

console.log(array.reduce((unique, item) => unique.includes(item) ? unique: [...unique, item], ))

// result: [5, 2, 4, 3]

使用set

讓我開始解釋set是什麼吧:

set是由es6引入的一種新的資料物件,由於set只允許你儲存唯一值,所以當傳遞進去乙個陣列的時候,它將會移除任何重複的值。

好啦,然我們回到我們的**中來看下到底都發生了什麼。實際上他進行了以下的操作:

首先,我們建立了新的set並且把陣列當作入參傳遞了進去,由於set僅僅允許唯一值,所以所有重複值將會被移除。

現在重複值已經消失了,我們將會利用...把它重新轉為陣列。

const array = [5, 2, 4, 5, 3];

const set = new set(array)

const newarr = [...set]

console.log(newarr)

// result: [5, 2, 4, 3]

使用array.from()函式來吧set轉為陣列

另外呢,你也可以使用array.from()來吧set轉為陣列。

const array = [5, 2, 4, 5, 3];

const set = new set(array)

const newarr = array.from(set)

console.log(newarr)

// result: [5, 2, 4, 3]

使用filter

為了理解這個選項,讓我們來看看這兩個方法都做了什麼:indexof和filter

indexof()

indexof()返回我們從陣列裡找到的第乙個元素的索引。

const array = [5, 2, 4, 5, 3];

console.log(array.indexof(5)) // 0

console.log(array.indexof(2)) // 1

console.log(array.indexof(8)) // -1

filter

filter()函式會根據我們提供的條件建立乙個新的陣列。換一種說法,如果元素通過並且返回true,它將會包含在過濾後的陣列中,如果有元素失敗並且返回false,那麼他就不會包含在過濾後的陣列中。

我們逐步看看在每次迴圈陣列的時候都發生了什麼。

const array = [5, 2, 4, 5, 3];

array.filter((item, index) => )

//輸出

// 5 0 0 true

// 2 1 1 true

// 4 2 2 true

// 5 3 0 false

// 3 4 4 true

上面輸出的**見注釋。重複的元素不再於indexof相匹配,所以在這些情況下,它的結果將會是false並且將不會被包含進過濾後的值當中。

檢索重複的值

我們也可以在陣列中利用filter()函式來檢索重複的值。我們只需要像這樣簡單的調整下**:

const array = [5, 2, 4, 5, 3];

array.filter((item, index) => )

//輸出

// 5 0 0 false

// 2 1 1 false

// 4 2 2 false

// 5 3 0 true

// 3 4 4 false

使用reduce()函式

reduce()函式用於減少陣列的元素並根據你傳遞過去的reducer函式,把他們最終合併到乙個最終的陣列中,

在這種情況下,我們的reducer()函式我們最終的陣列是否包含了這個元素,如果不包含,就吧他放進最終的陣列中,反之則跳過這個元素,最後再返回我們最終的元素。

reduce()函式理解起來總是有那麼一點費勁,所以呢,咱們現在看下他是怎麼執行的。

const array = [5, 2, 4, 5, 3];

array.reduce((unique, item) => , )

//輸出

// 5 false [5]

// 2 [5] false [5, 2]

// 4 [5, 2] false [5, 2, 4]

// 5 [5, 2, 4] true [5, 2, 4]

// 3 [5, 2, 4] false [5, 2, 4, 3]

利用es6進行陣列去重

es6中新增了set資料結構,類似於陣列,但是 它的成員都是唯一的 其建構函式可以接受乙個陣列作為引數,如 let array 1,1,1,1,2,3,4,4,5,3 let set new set array console.log set set es6中array新增了乙個靜態方法array....

陣列去重ES6

1,去除簡單型別 es6中新增了set資料結構,類似於陣列,但是 它的成員都是唯一的 其建構函式可以接受乙個陣列作為引數,如 let array 1,1,1,1,2,3,4,4,5,3 let set new set array console.log set set es6中array新增了乙個靜...

es6陣列去重

es6中新增了set資料結構,類似於陣列,但是它的成員都是唯一的,其建構函式可以接受乙個陣列作為引數,如 let array 1,1,1,1,2,3,4,4,5,3 let set new set array console.log set set es6中array新增了乙個靜態方法array.f...