ES6 中如何数组去重 [ 🦄 KuangPF’ blog ]

使用 Set
1. 使用 Array.from 将 Set 转化为数组
使用 filter
使用 reduce
参考

有三种方法可以从数组中过滤掉重复项，并且只返回唯一的值，我最喜欢的方式还是使用 Set，因为它最简洁并且最简单😁。

使用 Set

首先解释下什么是 Set

Set 是 ES6 提供的一种新的数据结构，由于它只会存储唯一的值，因此当你传入数组时，他会删除重复的值。

Okay，我们现在看一下以下代码，分析下发生了什么，它做了两件事情：

首先，我们创建一个 Set 数据结构，并传入一个数组，由于 Set 只会存在唯一的值，因此所有重复的值将会被删除
当删除重复的值后，通过扩展运算符 ... 将 Set 数据结构转化为数组

使用 `Array.from` 将 Set 转化为数组

另外，你也可以使用 Array.from 将 Set 转化为数组

使用 filter

为了更好地理解这部分，我们先看下一下两种方法：indexOf and filter

indexOf

indexOf 方法返回它从数组中找到的所提供元素的第一个索引。

filter

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素，换句话说，如果元素满足过滤的条件，并且返回 true，那么这个元素就会被包含在过滤掉的数组中，如果一个元素不满足过滤条件，那么将不会在过滤掉的数组中。

下面我们看下使用 filter 遍历数组会发生什么。

以下是控制台输出的日志，数组中重复项，它们的 indexOf 与遍历时的 index 的值不相等，对于那些值，它们不会包含在过滤掉的数组中。

找出重复项

我们也可以通过 filter() 方法找出数组中重复项，简单的改变下过滤条件既可以实现：

同样，如果我们调试上面的代码可以看到如下输出：

使用 reduce

reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。
在这种情况下，我们可以让 reducer 函数检测下最终数组中是否包含 reduce 回调中的当前值，如果不包含，则将该值添加到最终数组中，否则就忽略掉该元素，返回最终数组。
Reduce 函数稍微有点难以理解，下面通过例子来调试下，看下输出：

下面是控制台的输出：

参考

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

文章来源：翻译 How to Remove Array Duplicates in ES6

ES6 中如何数组去重