es6去除重复项_ES6中如何删除数组中的重复项

ES6中，如何删除一个数组中的重复数据呢，以下是我总结的，从数组中过滤掉重复项并且返回唯一值的三种方法。我最喜欢的是使用Set因为它是最简单和最简单的😁

const array = ['🐷',1, 2,'🐷','🐷', 3]

// 1: 'Set'

[... new Set(array)]

// 2: 'Filter'

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

// 3: 'Reduce'

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

// 返回结果

[ '🐷', 1, 2, 3 ]

1. 使用Set

我先解释一下什么是Set:

Set是ES6中引入的新数据对象。Set只允许您存储唯一值。当传入数组时，它会删除任何重复的值。

ok，我们重新回到刚才的代码来分析一下发生了什么事情，(上面的代码)做了两件事情。

1、首先，我们通过传递一个数组来创建了一个新的Set，因为Set只允许存储唯一的值，所以数组中那些重复的值会被删除。

2、创建一个新的Set对象后，重复值已经被删除了，现在我们使用...运算符，将其转换回数组。

const array = ['🐷',1, 2,'🐷','🐷', 3]

// Step 1

const uniqueSet = new Set(array)

# Set { '🐷', 1, 2, 3 }

// Step 2

const backToArray = [...uniqueSet]

# [ '🐷', 1, 2, 3 ]

使用Array.from 将Set转换为Array

或者你也可以使用Array.from将Set转化为数组

const array = ['🐷',1, 2,'🐷','🐷', 3]

Array.from(new Set(array))

# [ '🐷', 1, 2, 3 ]

2.使用Filter

为了便于理解，我们先来看下indexOf和filter会做什么事情

indexOf

indexOf方法会将我们提供的参数，在数组中找到该元素的第一个索引值并返回。

const array = ['🐷',1, 2,'🐷','🐷', 3]

array.indexOf('🐷') #=> 0

array.indexOf(1) #=> 1

array.indexOf(2) #=> 2

array.indexOf(3) #=> 5

filter

filter()方法会根据我们传递的条件，来创建一个新的元素数组。换句话说，如果元素通过并返回true，它将包含在已经过滤的数组中。任何失败元素或者返回为false的，都不会在过滤后的数组中。

让我们一步步来分析数组循环时发生的事情

const array = ['🐷',1, 2,'🐷','🐷', 3]

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

console.log(

// a. Item

item,

// b. Index

index,

// c. IndexOf

array.indexOf(item),

// d. Condition

array.indexOf(item) === index,

);

return array.indexOf(item) === index

})

以下是上面显示的console.log的输出。重复项是索引与indexOf不匹配的位置。因此，在这些情况下，条件将为false，不会包含在我们的过滤数组中。

image.png

检索重复值

我们还可以使用filter方法从数组中检索重复值。我们可以通过简单地修改我们的条件就可以做到：

const array = ['🐷',1, 2,'🐷','🐷', 3]

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

# [ '🐷', '🐷' ]

再次，如果我们一步一来执行上面的代码，可以查看输出：

image.png

3.使用 reduce

reduce方法用于减少数组的元素，并根据您传递的某些reducer函数将它们组合成最终数组。

在这个例子中，我们的reducer函数检查我们的最终数组是否包含该项。如果没有，请将该项目推送到我们的最终数组中。否则，跳过该元素并按原样返回我们的最终数组(基本上跳过该元素)。

reduce总是有点难以理解，所以让我们进入每个案例并查看输出：

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

console.log(

// a. Item

item,

// b. Final Array (Accumulator)

unique,

// c. Condition (Remember it only get pushed if this return 'false')

unique.includes(item),

// d. Reducer Function Result

unique.includes(item) ? unique : [...unique, item],

);

unique.includes(item) ? unique : [...unique, item]

}, [])

# [ '🐷', '🐷' ]

这是console.log的输出：

image.png

参考资料

说明