JavaScript 集合：组织数据的友好指南

你好，未来的 JavaScript 巫师们！今天，我们将踏上一段激动人心的旅程，探索 JavaScript 集合的世界。如果你是编程新手，不用担心——我会成为你的忠实向导，我们将一步步地探索这个主题。在本教程结束时，你将能够像专业人士一样操作集合！

JavaScript - Sets

什么是集合？

在我们深入代码之前，让我们先聊聊集合是什么。想象你有一个弹珠袋，但这个袋子很特别——它只允许每种颜色有一个弹珠。这在 JavaScript 中基本上就是集合的定义：一个只能包含唯一值的集合。不允许重复！

语法：创建集合

让我们从基础开始。以下是如何创建一个新的集合：

let mySet = new Set();

就这样！你已经创建了一个空集合。但如果你想要创建一个带有初始值的集合呢？没问题：

let fruitSet = new Set(['apple', 'banana', 'orange']);

现在你有一个包含三种水果的集合。记住，即使你尝试再次添加 'apple'，它也不会被包含，因为集合只保留唯一值。

参数：你可以在集合中放入什么？

JavaScript 中的集合非常灵活。你可以添加各种类型的值：

数字
字符串
对象
数组
甚至其他集合！

让我们看一个例子：

let mixedSet = new Set([1, 'two', {three: 3}, [4, 5]]);
console.log(mixedSet);

如果你运行这段代码，你会看到我们的集合包含了所有这些不同类型的值。

示例：玩转集合

现在我们知道了基础知识，让我们来点有趣的集合操作！

添加和删除元素

let colorSet = new Set();

// 添加元素
colorSet.add('red');
colorSet.add('blue');
colorSet.add('green');

console.log(colorSet); // 输出: Set(3) { 'red', 'blue', 'green' }

// 尝试添加一个重复的元素
colorSet.add('red');
console.log(colorSet); // 输出: Set(3) { 'red', 'blue', 'green' }

// 删除一个元素
colorSet.delete('blue');
console.log(colorSet); // 输出: Set(2) { 'red', 'green' }

正如你所看到的，当我们尝试再次添加 'red' 时，集合没有改变。这就是集合的美妙之处——它们会自动为我们处理重复项！

检查元素

想知道集合是否包含一个特定的值？使用 has() 方法：

let animalSet = new Set(['dog', 'cat', 'bird']);

console.log(animalSet.has('dog')); // 输出: true
console.log(animalSet.has('fish')); // 输出: false

集合的大小

要找出你的集合中有多少个唯一元素，使用 size 属性：

let numberSet = new Set([1, 2, 3, 4, 5, 5, 5]);
console.log(numberSet.size); // 输出: 5

即使我们添加了三个 5，集合也只计算一次！

数学集合操作

现在，让我们戴上数学帽，看看我们可以对集合执行的一些操作。

并集

并集将两个集合合并，保留两个集合中的所有唯一元素：

let set1 = new Set([1, 2, 3]);
let set2 = new Set([3, 4, 5]);

let unionSet = new Set([...set1, ...set2]);
console.log(unionSet); // 输出: Set(5) { 1, 2, 3, 4, 5 }

交集

交集只保留两个集合中都存在的元素：

let set1 = new Set([1, 2, 3, 4]);
let set2 = new Set([3, 4, 5, 6]);

let intersectionSet = new Set([...set1].filter(x => set2.has(x)));
console.log(intersectionSet); // 输出: Set(2) { 3, 4 }

差集

差集保留第一个集合中的元素，但不包含第二个集合中的元素：

let set1 = new Set([1, 2, 3, 4]);
let set2 = new Set([3, 4, 5, 6]);

let differenceSet = new Set([...set1].filter(x => !set2.has(x)));
console.log(differenceSet); // 输出: Set(2) { 1, 2 }

JavaScript 集合参考

以下是我们讨论过的所有方法和属性，以及一些额外的：

方法/属性	描述
`new Set()`	创建一个新的集合
`add(value)`	向集合中添加一个新元素
`delete(value)`	从集合中删除一个元素
`has(value)`	如果值存在于集合中，则返回 true
`clear()`	从集合中删除所有元素
`size`	返回集合中的元素数量
`forEach(callback)`	对集合中的每个元素调用一个函数
`values()`	返回一个包含集合中所有值的迭代器
`keys()`	与 `values()` 相同
`entries()`	返回一个包含集合中 [值, 值] 对的迭代器

好了，各位！你已经完成了 JavaScript 集合的速成课程。记住，集合就像那些总是保持独特和有组织的那些朋友——当你处理的数据不应该有重复时，它们是非常有用的。

练习创建和操作集合，很快你就会发现自己在编码冒险中自然地使用它们。谁知道呢？也许你甚至会开始到处看到集合——就像那个每只袜子都不一样的袜子抽屉！

继续编码，保持好奇心，并记住：在集合的世界里，保持独特性是游戏的名字！

Credits: Image by storyset