JavaScriptSet对象使用教程

哈喽！今天心血来潮给大家带来了《JavaScript Set对象详解：高效管理唯一值集合》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

Set是JavaScript中基于SameValueZero算法的唯一值集合，自动去重、O(1)查询，语义上强调“存在性”；WeakSet仅存对象且弱引用，适用于临时标记场景。

Set 是 JavaScript 原生的唯一值集合类型，它自动去重、不索引、不支持重复项——不是数组的替代品，而是语义更明确的“存在性集合”。

为什么不能用数组 filter() 或 includes() 模拟 Set？

手动维护唯一性在数据量稍大时性能断崖式下降：每次 includes() 是 O(n)，插入 n 个元素变成 O(n²)；而 Set.prototype.add() 平均是 O(1)。更关键的是语义丢失——arr.includes(x) 表达“是否出现过”，set.has(x) 才是“是否存在”，后者更贴近业务意图（比如权限校验、已读标记、防重复提交）。

常见错误现象：

• 用 Array.from(new Set(arr)) 做去重后又反复转回数组操作，失去 Set 的高效查询能力
• 误以为 Set 支持下标访问（set[0] 是 undefined），结果逻辑静默失败
• 对对象或函数存入 Set 后发现“重复添加成功”，其实是引用不同（{} 和 {} 是两个不同引用）

Set 的初始化和基础操作要注意什么？

构造时传入可迭代对象（如数组、字符串、Map.keys()），但不会递归扁平化；空构造器创建空集，传 null 或 undefined 会报 TypeError。

实操建议：

• 从数组初始化唯一集合：

  const uniqueIds = new Set([1, 2, 2, 3]); // {1, 2, 3}

• 避免用展开运算符无脑转数组：[...uniqueIds] 可以，但频繁执行会抵消 Set 的性能优势
• 清空用 set.clear()，别写 set = new Set()——如果其他变量引用了原 Set，后者不会被清空
• 判断存在性一律用 set.has(value)，不用 set.values().next().value === x 这类低效写法

如何用 Set 实现集合运算（交/并/差）？

原生不提供 union() 等方法，但可用扩展运算符 + 构造器简洁实现，注意操作顺序和内存开销。

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

// 并集
const union = new Set([...a, ...b]); // {1, 2, 3, 4}

// 交集
const intersection = new Set([...a].filter(x => b.has(x))); // {2, 3}

// a 对 b 的差集（a 有、b 没有）
const difference = new Set([...a].filter(x => !b.has(x))); // {1}

性能提示：

• 交集/差集操作中，把较小的 Set 作为 b（即调用 has() 的那个），能减少查找次数
• 不要用 forEach + add 替代扩展运算符——语法更啰嗦，性能无优势
• 如果需频繁做集合运算，考虑封装成工具函数，避免每次重复展开

和 WeakSet 的核心区别在哪？

WeakSet 只能存对象，且是弱引用——当对象无其他引用时，会被 GC 回收，WeakSet 自动清理对应条目。它没有 size、不能遍历、没有 clear()，只提供 add()、delete()、has()。

典型使用场景：

• 标记 DOM 元素是否已绑定事件（避免重复绑定）：

  const observed = new WeakSet();
  function bindOnce(el) {
    if (!observed.has(el)) {
      el.addEventListener('click', handler);
      observed.add(el);
    }
  }

• 存储私有元数据（配合闭包或 Symbol），不阻止对象被回收
• 绝对不要用 WeakSet 存基本类型（new WeakSet([1]) 报错）或需要长期稳定存在的对象

真正容易被忽略的是：Set 的“唯一性”基于 SameValueZero 算法，这意味着 NaN 和 NaN 被视为相等（与 === 不同），但 -0 和 +0 也被视为相等——如果业务需要区分它们，Set 就不适用，得换 Map 或自定义结构。

今天关于《JavaScriptSet对象使用教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！