打开网易新闻 查看更多图片

这里有三种方式可以滤除数组中重复的元素,只保留唯一的元素。我最喜欢的是用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的输出结果: