JavaScript Set用法及唯一值存储教程
时间:2026-03-23 15:30:55 327浏览 收藏
JavaScript 的 Set 是一个高效、语义清晰的内置集合类型,专为存储唯一值而设计,相比数组去重更简洁可靠——它自动忽略重复项、增删查操作平均时间复杂度仅为 O(1)、正确处理 NaN 相等性与对象引用比较,还支持交集、差集等实用集合运算(仅需几行代码即可实现);但需注意它不可索引、不能直接 JSON 序列化,且与 WeakSet、Map 在内存管理与数据结构上存在关键差异,合理选用才能避免性能瓶颈和内存泄漏。

JavaScript 的 Set 是一个内置构造函数,用来存储唯一值(重复值自动被忽略),不是数组,也没有索引,但支持遍历和常见集合操作。
为什么不能用数组代替 Set 去去重?
数组本身不阻止重复,每次去重都要手动 filter + indexOf 或用 new Set(arr) 转换——后者更简洁、语义更准。更重要的是:Set 的 add、has 平均时间复杂度是 O(1),而数组的 includes 是 O(n);尤其在频繁查存的场景(如实时过滤、状态标记),性能差距明显。
常见错误现象:arr.includes(obj) 总返回 false,因为对象比较是引用相等;而 set.has(obj) 同样基于引用,但至少行为一致、无隐式转换陷阱。
- 原始值(
string、number、boolean)在Set中按值去重 NaN和NaN被视为相等(数组的indexOf(NaN)却找不到)- 对象、函数只按引用判断是否重复,不是深比较
Set 的基础操作:增删查遍历
它不像数组有下标,所有操作都通过方法调用完成,且返回值设计统一:add 和 delete 返回 Set 本身(可链式),has 返回布尔值,size 是只读属性。
- 添加:
set.add(42)、set.add("hello"),重复值不报错,也不生效 - 检查存在:
set.has(42)—— 注意不是in操作符(那是为对象属性设计的) - 删除:
set.delete("hello"),返回true表示删除成功,false表示不存在 - 清空:
set.clear(),无返回值 - 遍历:
for (const item of set) { ... },或用set.forEach(cb),顺序是插入顺序
别误用 set[0] 或 set.length —— 它们都是 undefined。
把 Set 当工具用:去重、交集、差集
原生 Set 不直接提供交/并/差方法,但组合扩展运算符和数组方法就能写得又短又清楚,无需引入 Lodash。
- 数组去重:
[...new Set([1,2,2,3])] → [1,2,3] - 两 Set 交集:
new Set([...setA].filter(x => setB.has(x))) - setA 对 setB 的差集(A 有但 B 没有):
new Set([...setA].filter(x => !setB.has(x))) - 转为数组再映射:
[...set].map(x => x * 2),比Array.from(set, x => x * 2)更直观
注意:这些操作都会新建 Set 或数组,原 Set 不变;如果数据量大,避免在循环里反复展开 [...set],先缓存。
Set 和 Map、WeakSet 的关键区别
选错类型会导致内存泄漏或功能受限。比如想存 DOM 元素并随元素销毁自动清理,必须用 WeakSet(只接受对象,且不阻止 GC);而 Set 会强引用对象,可能导致内存堆积。
Map存键值对,键可以是任意类型(包括对象),Set只存值,没有键的概念WeakSet不能遍历、没有size、不支持clear,仅提供add/delete/hasSet的值可为任意类型,但NaN和0、-0的处理与严格相等(===)一致:0 === -0为true,所以它们在Set中算同一个值
真正容易被忽略的一点:你无法序列化 Set 为 JSON —— JSON.stringify(new Set([1,2])) 得到 "{}",必须先转成数组。
今天带大家了解了的相关知识,希望对你有所帮助;关于文章的技术知识我们会一点点深入介绍,欢迎大家关注golang学习网公众号,一起学习编程~
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
196 收藏
-
340 收藏
-
341 收藏
-
116 收藏
-
272 收藏
-
184 收藏
-
451 收藏
-
282 收藏
-
223 收藏
-
434 收藏
-
437 收藏
-
190 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习