JavaScript 中的 Set：理解与应用

在 JavaScript 中，Set 是 ES6 引入的一个新数据结构，它允许我们存储一组唯一的值。与传统的数组不同，Set 的元素是唯一的，不会有重复项。这使得 Set 成为许多场景下的理想选择，特别是当我们需要处理一组不重复的数据时。

本文将介绍 Set 的基础知识、用法以及常见的应用场景，帮助你更好地理解和运用这一数据结构。

一、什么是 Set？

Set 是一种集合（Set）类型的数据结构，类似于数组，但与数组有以下几个显著的区别：

• 唯一性：Set 中的每个值都是唯一的，不能重复。
• 值的类型：Set 可以存储任何类型的值，包括原始值（如数字、字符串、布尔值）和引用类型（如对象、数组、函数等）。
• 无序性：Set 中的值是无序的，它们不具备索引，也无法像数组一样按顺序访问。

二、Set 的基本用法

2.1 创建一个 Set

创建 Set 的方式有两种：直接创建一个空的 Set，或者通过传入一个可迭代对象（如数组、字符串）来初始化。

// 创建一个空的 Set
const mySet = new Set();

// 使用数组初始化 Set
const numbers = [1, 2, 3, 4, 5];
const numberSet = new Set(numbers);

// 使用字符串初始化 Set
const letterSet = new Set('hello');
console.log(letterSet); // Set { 'h', 'e', 'l', 'o' }

2.2 向 Set 中添加元素

使用 add() 方法可以向 Set 中添加元素。如果添加一个重复的元素，Set 会自动忽略该元素。

const mySet = new Set();
mySet.add(1);  // 添加一个元素
mySet.add(2);  // 添加另一个元素
mySet.add(1);  // 尝试添加重复元素

console.log(mySet); // Set { 1, 2 }，重复的元素被自动忽略

2.3 从 Set 中删除元素

使用 delete() 方法可以删除指定的元素。如果删除成功，返回 true，如果元素不存在，则返回 false。

const mySet = new Set([1, 2, 3, 4]);
mySet.delete(3);  // 删除元素 3
console.log(mySet); // Set { 1, 2, 4 }

mySet.delete(5);  // 尝试删除不存在的元素
console.log(mySet); // Set { 1, 2, 4 }，没有变化

2.4 检查元素是否存在

使用 has() 方法可以检查一个元素是否存在于 Set 中。它会返回布尔值。

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

2.5 清空 Set

使用 clear() 方法可以删除 Set 中的所有元素。

const mySet = new Set([1, 2, 3, 4]);
mySet.clear();
console.log(mySet); // Set {}，清空后 Set 为空

2.6 遍历 Set

Set 提供了几种遍历的方法：

• forEach()：对 Set 中的每个元素执行回调函数。
• for...of：可以直接用 for...of 循环来遍历 Set 中的元素

const mySet = new Set([1, 2, 3, 4]);

// 使用 forEach 遍历
mySet.forEach(value => {
  console.log(value);
});

// 使用 for...of 遍历
for (const value of mySet) {
  console.log(value);
}

2.7 Set 的大小

使用 size 属性可以获取 Set 中元素的数量。

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

 

三、Set 与数组的比较

Set 和数组看起来很相似，但它们之间有一些重要的区别：

特性	Set	Array
元素唯一性	元素唯一，不会重复	元素可以重复
访问方式	不支持索引访问，必须使用迭代器或 forEach()	支持索引访问
性能	插入、查找、删除操作较快，特别是大量数据时	插入和删除元素性能较差
操作方法	add(), delete(), has()	push(), pop(), shift(), unshift(), concat() 等
应用场景	集合（唯一值），去重	顺序存储，可能需要重复元素

数组中元素去重的实现

Set 提供了一个非常方便的去重功能。假设我们有一个数组，想要去掉重复的元素，可以使用 Set 来实现：

const array = [1, 2, 3, 4, 4, 5, 5, 6];
const uniqueArray = [...new Set(array)];

console.log(uniqueArray); // [1, 2, 3, 4, 5, 6]

四、Set 的常见应用场景

4.1 去重

当我们需要从一个数组中去除重复元素时，Set 是最简洁和高效的解决方案。你可以将数组传递给 Set，自动去除重复项，然后再将 Set 转换回数组。

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers);  // [1, 2, 3, 4, 5]

4.2 快速查找

Set 提供了快速的查找操作，时间复杂度为 O(1)。如果你有大量的元素需要进行查找，并且不关心顺序，使用 Set 会比数组更加高效。

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

console.log(mySet.has(3)); // true
console.log(mySet.has(6)); // false

4.3 获取集合的交集、并集和差集

Set 非常适合用来进行集合的数学运算，如交集、并集和差集。以下是如何使用 Set 来计算集合的交集、并集和差集的示例：

并集 

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

const union = new Set([...set1, ...set2]);
console.log(union); // Set { 1, 2, 3, 4, 5 }

交集

const intersection = new Set([...set1].filter(x => set2.has(x)));
console.log(intersection); // Set { 3 }

差集

const difference = new Set([...set1].filter(x => !set2.has(x)));
console.log(difference); // Set { 1, 2 }

五、总结

JavaScript 中的 Set 是一个非常有用的数据结构，它可以帮助我们高效地管理一组唯一的值，避免重复，并且提供了多种操作方法，如添加、删除、查找和遍历等。Set 适用于处理去重、快速查找和集合运算等场景。