为什么使用 Set？

Set 是一种数据结构，允许您存储任何类型的唯一值。它类似于数组，但不允许重复值。它是一种存储任何类型唯一值的好方法。有时您想在数组中存储唯一值，但又不想循环遍历数组以检查该值是否已经存在。这时 Set 就派上用场了。

在之前的文章中，我们讨论了 Javascript Map。Set 类似于 Map，但它只存储键，而不是值。它是保持任何类型唯一值的好方法。在很多情况下使用 Map 会很繁琐，这就是我们今天要讨论 Set 的原因。

什么是 JavaScript Set？

Set 对象是值的集合。Set 集合中每个值只能出现一次，即在 Set 集合中是唯一的。您可以按插入顺序迭代 Set 中的元素。插入顺序对应于每个元素被 Set 的 add() 方法成功插入集合的顺序（也就是说，当 Set 调用 add() 时，集合中还没有相同的元素）。

规范要求 Set 的实现方式应“平均提供比集合中元素数量更低的访问时间”。因此，它可以在内部表示为哈希表（具有 O(1) 的查找）、搜索树（具有 O(log(N)) 的查找）或任何其他数据结构，只要复杂度优于 O(N) 即可。

如何创建 Set？

创建 Set 有两种方法。第一种方法是使用 Set 构造函数。第二种方法是使用 Set 对象字面量。

Set 构造函数

Set 构造函数创建一个新的 Set 对象。您可以将可迭代对象作为参数传递给构造函数。可迭代对象的元素将被添加到新的 Set 中。

const set = new Set([1, 2, 3, 4, 5])

Set 对象字面量

Set 对象字面量创建一个新的 Set 对象。您可以将可迭代对象作为参数传递给对象字面量。可迭代对象的元素将被添加到新的 Set 中。

const set = {1, 2, 3, 4, 5};

Set 方法和属性

方法	描述
add()	将具有指定值的元素添加到 Set 对象。
clear()	从 Set 对象中删除所有元素。
delete()	删除与值相关联的元素，并返回 Set.prototype.has(value) 之前返回的值。Set.prototype.has(value) 之后将返回 false。
entries()	返回一个新的 Iterator 对象，其中包含 Set 对象中每个元素的 [value, value] 数组，按插入顺序排列。
forEach()	按插入顺序对 Set 对象中的每个值执行提供的函数一次。
has()	返回一个布尔值，表明 Set 对象中是否具有给定值的元素。
keys()	返回一个新的 Iterator 对象，其中包含 Set 对象中每个元素的值，按插入顺序排列。
values()	返回一个新的 Iterator 对象，其中包含 Set 对象中每个元素的值，按插入顺序排列。

属性	描述
size	返回 Set 对象中值的个数。

Set 示例

向 Set 中添加值

const set = new Set([1, 2, 3, 4, 5])
set.add(6)
console.log(Set) // Set { 1, 2, 3, 4, 5, 6 }

从 Set 中删除值

const set = new Set([1, 2, 3, 4, 5])
set.delete(3)
console.log(set) // Set { 1, 2, 4, 5 }

检查 Set 中是否存在值

const set = new Set([1, 2, 3, 4, 5])
console.log(set.has(3)) // true

迭代 Set

const set = new Set([1, 2, 3, 4, 5])
for (const item of Set) {
  console.log(item)
}
// 1
// 2
// 3
// 4
// 5

将 Set 转换为数组

const set = new Set([1, 2, 3, 4, 5])
const array = Array.from(set)
console.log(array) // [1, 2, 3, 4, 5]

将数组转换为 Set

const Array = [1, 2, 3, 4, 5]
const set = new Set(array)
console.log(Set) // Set { 1, 2, 3, 4, 5 }

获取 Set 的大小

const set = new Set([1, 2, 3, 4, 5])
console.log(set.size) // 5

清空 Set

const set = new Set([1, 2, 3, 4, 5])
set.clear()
console.log(set) // Set {}

合并 Set

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([6, 7, 8, 9, 10])
const set3 = new Set([...set1, ...set2])
console.log(set3) // Set { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }

获取两个 Set 的交集

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5, 6, 7, 8])
const set3 = new Set([...set1].filter((x) => set2.has(x)))
console.log(set3) // Set { 4, 5 }

获取两个 Set 的差集

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5, 6, 7, 8])
const set3 = new Set([...set1].filter((x) => !set2.has(x)))
console.log(set3) // Set { 1, 2, 3 }

检查 Set 是否是另一个 Set 的子集

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5])
console.log([...set2].every((x) => set1.has(x))) // true

检查 Set 是否是另一个 Set 的超集

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([4, 5])
console.log([...set1].every((x) => set2.has(x))) // false

检查两个 Set 是否不相交

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([6, 7, 8, 9, 10])
console.log([...set1].every((x) => !set2.has(x))) // true

检查两个 Set 是否相等

const set1 = new Set([1, 2, 3, 4, 5])
const set2 = new Set([1, 2, 3, 4, 5])
console.log(set1.size === set2.size && [...set1].every((x) => set2.has(x))) // true

浏览器支持

Chrome	Firefox	Edge	Safari	Opera
49+	44+	12+	10.1+	36+

Set vs. 数组

Set	数组
唯一值，不允许重复值	允许重复值
Set 是一个无序值的集合	数组是有序值的集合
Set 是可迭代的	数组是可迭代的
Set 在初始化时比数组慢，因为它使用哈希处理。	数组在初始化方面更快
在检查元素是否存在时性能更佳	在访问元素时性能更佳

本文最初发布于 blog.imam.dev。

JavaScript Set，每个初级程序员都应该知道的知识