使用es6實現(xiàn)去重的方法

使用es6實現(xiàn)去重的方法？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純热?，讓我們一起來看看吧?/p>

以下是三種方法從數(shù)組里去重，并且返回唯一的值。我最喜歡的方式是使用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引入的一種新的數(shù)據(jù)對象，由于Set只允許你存儲唯一值，所以當傳遞進去一個數(shù)組的時候，它將會移除任何重復的值。

好啦，然我們回到我們的代碼中來看下到底都發(fā)生了什么。實際上他進行了以下的操作：

1. 首先，我們創(chuàng)建了新的Set并且把數(shù)組當作入?yún)鬟f了進去，由于Set僅僅允許唯一值，所以所有重復值將會被移除。

2. 現(xiàn)在重復值已經消失了，我們將會利用...把它重新轉為數(shù)組。

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()函數(shù)來吧Set轉為數(shù)組

另外呢，你也可以使用Array.from()來吧Set轉為數(shù)組。

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()返回我們從數(shù)組里找到的第一個元素的索引。

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()函數(shù)會根據(jù)我們提供的條件創(chuàng)建一個新的數(shù)組。換一種說法，如果元素通過并且返回true，它將會包含在過濾后的數(shù)組中，如果有元素失敗并且返回false，那么他就不會包含在過濾后的數(shù)組中。

我們逐步看看在每次循環(huán)數(shù)組的時候都發(fā)生了什么。

const array = [5, 2, 4, 5, 3];
array.filter((item, index) => {
  console.log(item, index, array.indexOf(item), array.indexOf(item) === index)
  return array.indexOf(item) === index
})
//輸出
// 5 0 0 true
// 2 1 1 true
// 4 2 2 true
// 5 3 0 false
// 3 4 4 true

上面輸出的代碼見注釋。重復的元素不再于indexOf相匹配，所以在這些情況下，它的結果將會是false并且將不會被包含進過濾后的值當中。

檢索重復的值

我們也可以在數(shù)組中利用filter()函數(shù)來檢索重復的值。我們只需要像這樣簡單的調整下代碼：

const array = [5, 2, 4, 5, 3];
array.filter((item, index) => {
  console.log(item, index, array.indexOf(item), array.indexOf(item) !== index)
  return array.indexOf(item) !== index
})
//輸出
// 5 0 0 false
// 2 1 1 false
// 4 2 2 false
// 5 3 0 true
// 3 4 4 false

使用reduce()函數(shù)

reduce()函數(shù)用于減少數(shù)組的元素并根據(jù)你傳遞過去的reducer函數(shù)，把他們最終合并到一個最終的數(shù)組中，

在這種情況下，我們的reducer()函數(shù)我們最終的數(shù)組是否包含了這個元素，如果不包含，就吧他放進最終的數(shù)組中，反之則跳過這個元素，最后再返回我們最終的元素。

reduce()函數(shù)理解起來總是有那么一點費勁，所以呢，咱們現(xiàn)在看下他是怎么運行的。

const array = [5, 2, 4, 5, 3];
array.reduce((unique, item) => {
  console.log(item, unique, unique.includes(item), unique.includes(item) ? unique: [...unique, item])
  return unique.includes(item) ? unique: [...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實現(xiàn)去重的方法大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業(yè)資訊頻道。