【译】如何用 ES6 去重一个数组

【原文】medium.com/dailyjs/how…

有三种方法对数组去重，返回惟一值。我喜欢用 Set，由于它快又简单。

1.Set

首先介绍什么是 Set

Set is a new data object introduced in ES6. Because Set only lets you store unique values. When you pass in an array, it will remove any duplicate values.

Set 是 ES6 引入新的数据对象。由于 Set 只容许存储惟一值。传入一个数组，返回任何重复的值。

让咱们回到代码中，并分解发生了什么。分为2步：

1. 首先，经过传入一个数组建立一个新的 Set，由于 Set 只容许惟一值，全部重复的值都会被移除掉。
2. 如今重复值的消失了，咱们经过解构符号 ... 将它转换成一个数组。

用 Array.from 将 Set 转换为一个数组

另外，您一样可使用 Array.from 将一个 Set 转换为一个数组：

2: 使用 Filer

为了理解这个选项，让咱们了解两个方法：indexOf 和 filter。

indexOf

indexOf 方法返回给出数组中找到的第一个元素的索引。

filter

filter() 方法建立一个新的数组元素，传递咱们提供的条件。换句话说，若是元素经过并返回true，它将被包含在过滤后的数组中。以及任何失败或返回false的元素，它将不在筛选的数组中。

当咱们循环数组时，让咱们y一步一步执行并遍历所发生的。

下面是显示控制台的输出。重复项是索引与indexOf不匹配的地方。所以，在这些状况下，条件将为false，而且不会包括在咱们的筛选数组中。

检索重复值

咱们还可使用Filter方法从数组中检索重复值。咱们能够经过简单地调整咱们的条件来作到这一点：

接着，跳出以上代码，看看输出的结果。

3: 使用 Reduce

Reduce方法用于对数组中的每一个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。 在这个案例中，咱们的缩减函数是检查咱们的最终数组是否包含该项。若是没有，就把它推到咱们的最终数组中。不然，跳过该元素并按原样返回最终数组(实际上跳过了该元素)。 Reduce 比较难理解，因此让咱们也来看看每种状况下的输出：

下面是来自 console.log 的输出结果

参考资料

• MDN Web Docs — Set
• MDN Web Docs — Filter
• MDN Web Docs — Reduce
• GitHubGist: Remove duplicates from JS array
• CodeHandbook: How to Remove Duplicates from JavaScript Array