JavaScript 数据类型——Set详解

本文详细介绍JavaScript数据类型——Set。

1. 基本用法

// 创建空Set
const set = new Set();

// 创建带初始值的Set
const fruits = new Set(['apple', 'banana', 'apple']); // 自动去重
console.log(fruits.size); // 2

// 添加元素
set.add(1);
set.add(2).add(3); // 链式调用

// 检查元素存在
console.log(fruits.has('apple')); // true

// 删除元素
fruits.delete('banana');

// 清空Set
set.clear();

// 遍历Set
fruits.forEach(fruit => console.log(fruit));
for (const fruit of fruits) {
  console.log(fruit);
}

2. 唯一性特性

Set 使用 SameValueZero 算法判断元素是否重复（类似 ===，但 NaN 被视为相同）：

const set = new Set();
set.add(5);
set.add('5'); // 允许，因为类型不同
set.add(NaN);
set.add(NaN); // 重复，只保留一个

console.log([...set]); // [5, "5", NaN]

3. 集合操作

利用 Set 可以方便地实现数学集合运算：

// 并集
const union = new Set([...setA, ...setB]);

// 交集
const intersection = new Set([...setA].filter(x => setB.has(x)));

// 差集
const difference = new Set([...setA].filter(x => !setB.has(x)));


const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);
console.log([...union]); // [1, 2, 3, 4, 5]
console.log([...intersection]); // [3]
console.log([...difference]); // [1, 2]

4. 与数组的转换

// 数组转Set（去重）
const numbers = [1, 2, 2, 3, 3, 3];
const uniqueNumbers = new Set(numbers); // Set {1, 2, 3}

// Set转数组
const array = [...uniqueNumbers]; // [1, 2, 3]
// 或使用 Array.from
const array2 = Array.from(uniqueNumbers); // [1, 2, 3]

5. 对象和引用类型

Set 判断唯一性时基于引用而非值，因此两个相同值的对象会被视为不同元素：

const set = new Set();
const obj1 = { key: 'value' };
const obj2 = { key: 'value' };

set.add(obj1);
set.add(obj2);

console.log(set.size); // 2，因为obj1和obj2引用不同

// 但同一个对象的引用会被视为重复
const obj = {};
set.add(obj);
set.add(obj);
console.log(set.size); // 1

6. 迭代方法

Set 实现了 Iterable 接口，支持多种迭代方式：

const set = new Set(['a', 'b', 'c']);

// keys() 和 values() 返回相同迭代器（Set无键名）
for (const value of set.values()) {
  console.log(value); // 'a', 'b', 'c'
}

// entries() 返回 [value, value] 形式的迭代器
for (const [value, sameValue] of set.entries()) {
  console.log(value === sameValue); // true
}

// forEach() 回调参数：(value, value, set)
set.forEach((value, sameValue, set) => {
  console.log(value, sameValue); // 两者相同
});

7. 应用场景

// 1. 数组去重
const unique = [...new Set([1, 2, 2, 3])]; // [1, 2, 3]

// 2. 检查元素存在性（比数组的includes更高效）
const set = new Set(['a', 'b', 'c']);
console.log(set.has('b')); // O(1)时间复杂度

// 3. 存储DOM元素（避免重复添加）
const elements = new Set();
document.querySelectorAll('button').forEach(btn => elements.add(btn));

// 4. 管理状态（如用户权限）
const permissions = new Set(['read', 'write', 'delete']);
if (permissions.has('write')) {
  // 允许写操作
}

Set vs 数组