如何使用 Sets 在 JavaScript 中创建唯一值数组

TL;DR

let uniqueArray = [...new Set([5,5,2,2,2,4,2])];
// [5,2,4]

抱歉标题太冗长 - 有时用代码示例可以更好地解释事情。

假设你有一个包含许多元素的 JavaScript 数组，其中一些元素是重复的：

let dupeArray = [1,1,4,5,4,4,2,1,5];

您的目标是删除重复项并每个值仅保留一个条目：

let uniqueArray = [1,4,5,2];

你可以写一个 for 循环，或者使用mapor 运算符filter来得到这个结果。在计算机编程中，解决问题的方法有百万种（这正是编程的乐趣所在！）。ES6 引入了一系列新功能，包括 Set，我们也可以用它来用一行代码解决这个问题。

注意：元素类型可以是字符串，也可以是数字和字符串的混合，但我在这里使用整数，因为它们输入起来更快！

Set 是 ES6 中引入的新数据结构。引用MDN中的一段话：

Set 对象是值的集合。您可以按插入顺序迭代 Set 中的元素。Set 中的值只能出现一次；它在 Set 的集合中是唯一的。

在这里我们可以利用唯一值的规则。

让我们创建一个 Set，向其中添加一些值并查询其大小。（你可以在现代浏览器的开发者工具控制台中继续操作）：

let mySet = new Set().add(1).add(3).add(2).add(1);
// Set(3) {1, 3, 2}
mySet.size
// 3

请注意，final1没有被添加，并且 Set 的大小保持为 3 而不是 4。在数组中，它会被添加，并且长度为 4。

有两种方法可以向 Set 添加值。第一种是使用add上述方法。第二种是将数组传递给构造函数 ( new Set())：

let arraySet1 = new Set([3,2,1]);
// Set(3) {3, 2, 1}

如果初始数组中包含重复值，也会被删除：

let arraySet2 = new Set([8,8,9,2]);
// Set(3) {8,9,2}
arraySet2.size;
// 3

你大概已经明白是怎么回事了。剩下要做的就是把这个 Set 转换成数组，这样我们就实现了最初的目标。有两种方法可以实现：都使用 ES6 方法。

该Array.from方法从类似数组的结构创建一个新数组：

let dupeArray = [3,2,3,3,5,2];
let uniqueArray = Array.from(new Set(dupeArray));

这三个点在 ES6 中无处不在。它们随处可见，用途广泛（而且在 Google 上搜索起来非常麻烦）。当我们将它们用作展开运算符时，它们可以用来创建数组：

let uniqueArray = [...new Set(dupeArray)];

您应该使用这两种方法中的哪一种？扩展语法看起来很酷，但Array.from其目的更明确，也更易于阅读。它们在这里完成相同的任务，所以选择权在您手中！

以前需要写很多行代码和变量才能实现的功能，现在在 ES6 中只需一行代码就能实现。真是个充满活力的时代啊。

let uniqueArray = [...new Set([5,5,2,4,2])];
// [5,2,4]