定义Set
想象一个只能存放唯一值的魔法盒子（类似数学中的集合）
- 放苹果🍎 → 成功
- 再放苹果🍎 → 自动忽略（盒内已有）
- 放香蕉🍌 → 成功
const fruitBox = new Set();
fruitBox.add("🍎");
fruitBox.add("🍎"); // 重复值被过滤
fruitBox.add("🍌");
console.log(fruitBox); // Set(2) { "🍎", "🍌" }
核心特征
1、 自动去重（核心价值） 无论添加多少次相同值，Set 只保留一份
const nums = new Set([1, 2, 2, 3]);
console.log(nums); // Set(3) {1, 2, 3}
2、 特殊值处理
NaN在 Set 中被视为相同值（不同于NaN === NaN // false）- 空对象
{}每次都是新值（因内存地址不同）
const set = new Set();
set.add(NaN);
set.add(NaN); // 只存一个
set.add({});
set.add({}); // 存两个不同对象
3、 无索引概念
Set 中的值无序存放且不能通过下标访问（与数组最大区别）
4、 键名即键值
Set 中每个值既是键名也是键值
const set = new Set(["A", "B"]);
// 遍历时 key 和 value 相同
set.forEach((v, k) => console.log(v === k)); // 输出两次 true
一些常用操作
基础操作
| 方法 | 作用 | 示例 |
|---|---|---|
add(value) | 添加值（返回 Set 自身） | set.add(10) |
delete(value) | 删除值（返回是否成功） | set.delete(10) // true |
has(value) | 检查是否包含值 | set.has(10) // true |
clear() | 清空所有值 | set.clear() |
size | 获取值的数量（非函数！） | set.size // 2 |
遍历方法
const colors = new Set(["red", "blue"]);
// 1. forEach 遍历
colors.forEach(color => console.log(color));
// 2. for...of 循环
for (const color of colors) {{
console.log(color);
}}
// 3. 转数组后操作
[...colors].map(color => color.toUpperCase());
一些常见的使用场景
数组去重（最常用） 一行代码秒杀重复值
const arr = [1, 2, 2, 3];
const uniqueArr = [...new Set(arr)]; // [1, 2, 3]
集合运算 利用 Set 实现数学集合操作
// 并集
const union = new Set([...setA, ...setB]);
// 交集
const intersect = new Set([...setA].filter(x => setB.has(x)));
// 差集（A有B无）
const difference = new Set([...setA].filter(x => !setB.has(x)));
存储 DOM 节点 自动避免重复添加同一元素
const nodes = new Set();
nodes.add(document.getElementById("btn")); // 重复添加同一元素 → 自动忽略
Set vs Array 区别
| 特性 | Set | Array |
|---|---|---|
| 元素唯一性 | ✅ 自动去重 | ❌ 允许重复 |
| 索引访问 | ❌ 不支持 | ✅ 支持下标访问 |
| 顺序性 | ❌ 无序 | ✅ 严格有序 |
| 去重效率 | ⚡️ 超高（哈希表存储） | 🐢 需手动遍历 |
何时使用 Set
- 需要快速去重时（如统计独立访客）
- 需要检查值是否存在（比
array.includes()更快 - 进行集合运算（交集/并集/差集）
牢记
Set = 自动去重 + 高速查找 + 集合运算工具箱
