JavaScriptSet用法及去重技巧
时间:2026-01-07 15:42:41 217浏览 收藏
怎么入门文章编程?需要学习哪些知识点?这是新手们刚接触编程时常见的问题;下面golang学习网就来给大家整理分享一些知识点,希望能够给初学者一些帮助。本篇文章就来介绍《JavaScript中Set的用法及存储唯一值方法》,涉及到,有需要的可以收藏一下
JavaScript Set 是用于存储唯一值的内置对象,自动去重、支持高效存在性判断与集合运算,不按索引排序,可通过 add/has/delete/clear 等方法操作,支持 for...of 和 forEach 遍历及转数组等转换。

JavaScript Set 是一个内置对象,用来存储唯一值的集合,无论值的类型是原始类型还是对象,重复添加的值都会被自动忽略。 它不按索引排序,也不支持通过下标访问元素,但能高效地判断某个值是否存在、去重、求交集或差集等。
创建和初始化 Set
用 new Set() 创建空集合,也可以传入一个可迭代对象(如数组)来初始化:
const set1 = new Set();—— 创建空 Setconst set2 = new Set([1, 2, 2, 3, 3]);—— 自动去重,结果为{1, 2, 3}const set3 = new Set("hello");—— 字符串会被拆成单字符,结果为{"h", "e", "l", "o"}(注意:只有一个 "l")
常用操作方法
Set 提供了清晰的方法管理数据:
add(value):添加一个值,返回 Set 本身(可链式调用)has(value):返回布尔值,判断是否包含某值(比数组includes更快,尤其大数据量)delete(value):删除指定值,返回是否删除成功clear():清空所有元素size:获取当前元素个数(不是方法,是属性)
例如:const colors = new Set();
colors.add("red").add("blue").add("red"); // 只存两个值
console.log(colors.size); // 2
console.log(colors.has("green")); // false
遍历和转换
Set 支持多种遍历方式,也容易转成其他数据结构:
- 用
for...of循环:for (const color of colors) { console.log(color); } - 用
forEach:colors.forEach(c => console.log(c)); - 转为数组:
[...colors]或Array.from(colors) - 转为字符串(需手动处理):
Array.from(colors).join(", ")
配合数组去重和集合运算
Set 最常见的用途之一就是快速去重:
- 数组去重:
[...new Set([1, 2, 2, 3])] → [1, 2, 3] - 求并集:
new Set([...setA, ...setB]) - 求交集:
new Set([...setA].filter(x => setB.has(x))) - 求差集(A 减 B):
new Set([...setA].filter(x => !setB.has(x)))
注意:Set 的相等判断使用 SameValueZero 算法,所以 NaN === NaN 为 true,0 和 -0 被视为相同。
到这里,我们也就讲完了《JavaScriptSet用法及去重技巧》的内容了。个人认为,基础知识的学习和巩固,是为了更好的将其运用到项目中,欢迎关注golang学习网公众号,带你了解更多关于的知识点!
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
171 收藏
-
389 收藏
-
353 收藏
-
150 收藏
-
389 收藏
-
179 收藏
-
420 收藏
-
497 收藏
-
393 收藏
-
216 收藏
-
224 收藏
-
187 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习