如何在ES6中删除重复的数组元素

这里有三种方式可以滤除数组中重复的元素，只保留唯一的元素。我最喜欢的是用Set，因为它是最简短的。

使用Set

让我首先解释一下Set是什么：

Set是ES6中引入的一个新的数据对象。因为Set只允许你存储唯一的值。当你传入一个数组时，它将删除其中所有重复的值。

让我们回到我们的代码，分解一下代码发生了什么。这里做了2件事：

1. 首先，我们创建了一个新的Set对象，把一个数组传递进去。因为Set只允许唯一的值存在，所有重复的元素都会被删除。

2. 现在重复的值已经没有了，我们再把它转回一个数组，这里使用了扩展运算符...

使用Array.from把Set转为一个数组

或者，你也可以使用Array.from把一个Set转为一个数组：

使用filter

为了理解这种处理方式，我们先了解一下这两个方法是做什么的：indexOf 和 filter。

IndexOf

indexOf方法返回在数组中找到的符合要求的元素第一次出现的索引值。

filter

filter方法会遍历原数组筛选出符合条件的元素组成一个新数组。换句话说，如果数组元素符合条件并返回了true，它会被填充到新的过滤后的数组里。其他元素不符合条件或者返回了false，不会现在过滤后的数组里。

让我们深入了解，看看数组循环中做了什么。

下面是在控制台的输出。重复的元素是那些索引值和indexOf()不相同的。所以对于那些元素，条件检查会返回false，它们不会出现在过滤后的数组里。

查找重复的值

我们也可以使用filter方法来查找数组中的重复值。我们只需要调整一下过滤条件即可：

如果我们运行上面的代码会看到下面的输出：

使用reduce

reduce方法用于缩减数组元素，并根据你传递的缩减处理函数将它们组合成最终的数组。

对于我们的例子，我们的缩减处理函数（reducer）会检查最终的数组里是否包含了某个元素。如果没有包含，会把该元素推入此数组里。否则，会忽略此元素。函数最后返回最终的数组。

缩减过程不太容易理解，让我们分解一下，看看输出结果：

如下是console.log的输出结果：