JavaScript的Set数据结构是什么?怎么用?

set是javascript中用于存储唯一值的数据结构,其核心特点是元素不可重复。1. 创建实例后通过add添加元素,重复值不会被加入;2. 使用has检查存在性,delete删除元素,size获取数量;3. set遍历可用for…of或foreach;4. 清空使用clear方法;5. 常见用途包括数组去重、快速查找判断、集合运算(如并集、交集、差集);6. 与数组相比,set更适合需要唯一性和高效成员检测的场景,而数组适合依赖索引顺序和允许重复的情况;7. set可存储原始值和对象引用,但对象比较基于引用地址,相同内容不同实例仍视为不同元素;8. set在判断nan时将其视为相等,解决数组中nan无法自比较的问题。

JavaScript的Set数据结构是什么?怎么用?

Set是JavaScript中一种特殊的数据结构,它允许你存储任何类型的唯一值,无论是原始值还是对象引用。它的核心特点就是“唯一性”,当你往Set里添加重复的元素时,它只会保留一份。用起来也很直观,主要通过add、delete、has、size等方法来操作,是一个非常实用的数据集合。

JavaScript的Set数据结构是什么?怎么用?

Set的用法其实挺直接的,就像操作一个集合。首先,你需要创建一个Set实例:

const mySet = new Set();

然后,你可以往里面添加元素:

JavaScript的Set数据结构是什么?怎么用?

mySet.add(1);mySet.add('hello');mySet.add({ name: 'Alice' });mySet.add(1); // 这一行不会有任何效果,因为1已经存在了

检查某个元素是否存在:

立即学习“Java免费学习笔记(深入)”;

console.log(mySet.has(1));      // trueconsole.log(mySet.has('world')); // false

删除元素:

JavaScript的Set数据结构是什么?怎么用?

mySet.delete('hello');console.log(mySet.has('hello')); // false

获取Set的大小(元素的数量):

console.log(mySet.size); // 2 (因为1和{name: 'Alice'}还在)

遍历Set:Set是可迭代的,所以你可以用for...of循环或者forEach。

for (const item of mySet) {  console.log(item);}// 输出:// 1// { name: 'Alice' }mySet.forEach((value, key, set) => {  console.log(value); // Set的forEach回调函数中,value和key是同一个值});

清空Set:

mySet.clear();console.log(mySet.size); // 0

一个挺常见的场景是数组去重:

const numbers = [1, 2, 3, 2, 1, 4, 5];const uniqueNumbers = [...new Set(numbers)];console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Set与数组(Array)有哪些关键区别?我什么时候该用Set而不是数组?

Set和数组虽然都能存储数据,但它们的设计哲学和用途有着本质的不同。我个人觉得,理解这些差异是决定何时使用它们的关键。

最大的区别当然是唯一性。数组允许重复元素,你可以在一个数组里放无数个1,[1, 1, 1]完全没问题。但Set不行,new Set([1, 1, 1])最后只会得到一个包含1的Set。这意味着如果你需要一个集合来确保所有成员都是独一无二的,Set是首选,它帮你省去了手动去重的麻烦和潜在的bug。

然后是查找效率。虽然具体实现可能因JavaScript引擎而异,但通常情况下,Set在检查元素是否存在(has()方法)时,理论上比数组的includes()或indexOf()要快,尤其是在处理大量数据时。这是因为Set内部通常会使用哈希表或其他优化结构来存储元素,实现接近O(1)的查找时间复杂度。而数组的查找往往是O(n)的线性扫描。所以,如果你的核心操作是频繁地检查某个元素是否在集合中,Set会是性能更好的选择。

再者是元素顺序。数组是有序的,元素的插入顺序和索引位置是固定的。arr[0]永远是第一个元素。Set在ES6规范中是有序的,它会保持元素的插入顺序,但你不能通过索引来访问元素。这一点和Map类似,它们的迭代顺序是按照元素添加的顺序来的。但在实际开发中,我们通常不依赖Set的插入顺序来做逻辑判断,因为它的主要价值在于“成员资格”而非“位置”。

所以,什么时候用Set?

需要去重时:这是Set最直观也最常用的场景。比如收集用户访问过的页面ID,确保每个ID只记录一次。需要快速判断某个元素是否存在于集合中时:如果你有一个“黑名单”或者“白名单”,需要频繁地检查某个项是否在其中,Set的has()方法会非常高效。处理数学上的集合操作时:比如求两个集合的交集、并集、差集,Set能让你更优雅地实现这些逻辑。虽然JavaScript本身没有直接提供这些操作符,但通过Set的方法组合,实现起来非常简洁。并集: new Set([...setA, ...setB])交集: new Set([...setA].filter(x => setB.has(x)))差集: new Set([...setA].filter(x => !setB.has(x)))

什么时候用数组?

需要保持元素顺序并依赖索引访问时:比如一个列表、一个队列、一个栈,或者任何需要通过位置来操作数据的场景。允许重复元素时:比如一个日志记录,你可能需要记录每次操作,即使操作内容相同。需要更丰富的数组方法时:数组有map、filter、reduce、sort等大量高阶函数,这些是Set所不具备的。当然,你可以把Set转换成数组再用这些方法,但如果一开始就知道需要这些操作,直接用数组会更自然。

总的来说,Set是“我关心里面有什么,不关心有多少个,不关心它们的位置”,而数组是“我关心里面有什么,有多少个,它们都在哪儿”。

Set能存储哪些类型的数据?它如何判断元素是否重复?

Set能够存储几乎所有JavaScript支持的数据类型,这包括:

原始值(Primitives):number、string、boolean、null、undefined、Symbol、BigInt。对象(Objects):包括普通对象字面量、数组、函数、Date对象等等。

关于Set如何判断元素是否重复,这是它的一个核心机制,也是有时会让人感到困惑的地方。Set内部使用了一种叫做“Same-value-zero equality”的算法来比较值。这基本上就是JavaScript的严格相等操作符===,但有几个特殊之处:

+0和-0被认为是相同的。 new Set([-0]).add(+0),Set里最终只会有一个-0(或者+0,取决于实现,但它们被视为等价)。

NaN被认为是相同的。 这是一个非常重要的特性!在JavaScript中,NaN === NaN是false,但Set里new Set([NaN]).add(NaN)只会存储一个NaN。这解决了在数组中处理NaN去重时的痛点。

const s = new Set();s.add(NaN);s.add(NaN);console.log(s.size); // 1

对象引用:这是最容易踩坑的地方。对于对象类型(包括数组、函数等),Set判断重复是基于引用地址的。这意味着,即使两个对象看起来内容完全一样,只要它们是不同的对象实例,Set就会把它们当作不同的元素。

const obj1 = { id: 1, name: 'A' };const obj2 = { id: 1, name: 'A' };const arr1 = [1, 2];const arr2 = [1, 2];const mySet = new Set();mySet.add(obj1);mySet.add(obj2); // obj2和obj1是不同的引用,所以会被添加mySet.add(arr1);mySet.add(arr2); // arr2和arr1是不同的引用,所以会被添加console.log(mySet.size); // 4console.log(mySet.has(obj1)); // trueconsole.log(mySet.has({ id: 1, name: 'A' })); // false,因为这是新的对象引用

如果你想让Set根据对象的内容来判断重复,你需要做一些额外的工作,比如在添加对象前,先将对象“序列化”成字符串(例如JSON.stringify),或者维护一个Map来映射对象到它们的唯一标识符。但这通常意味着你正在处理更复杂的数据结构,Set的这种“浅比较”行为是其设计的一部分,目的是保持高效。

所以,理解Set的Same-value-zero equality对于正确使用它来去重至关重要,特别是当涉及到NaN和对象时。

除了基本的添加、删除、查询,Set还有哪些高级用法或常见应用场景?

Set除了那些基础操作,在实际开发中还有一些很巧妙或者说高级一点的应用,能让代码变得更简洁、更有效率。

一个我个人觉得非常优雅的用法是轻松实现集合运算。虽然JavaScript没有像Python那样直接的集合操作符(比如&、|),但借助Set和展开运算符,以及数组的filter方法,我们可以非常简洁地实现并集、交集、差集。

const setA = new Set([1, 2, 3, 4]);const setB = new Set([3, 4,

以上就是JavaScript的Set数据结构是什么?怎么用?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1509036.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
BOM中如何检测用户的HID设备支持?
上一篇 2025年12月20日 05:14:13
使用PHP和AJAX动态更新数据库表数据:从数组值到SQL操作
下一篇 2025年12月20日 05:14:21

相关推荐

  • DeepSeek 与 ChatGPT 有什么区别 特性对比与选型建议

    DeepSeek 与 ChatGPT 有什么区别 特性对比与选型建议DeepSeek 与 ChatGPT 有什么区别 特性对比与选型建议DeepSeek 与 ChatGPT 有什么区别 特性对比与选型建议DeepSeek 与 ChatGPT 有什么区别 特性对比与选型建议

    deepseek和chatgpt的主要区别在于训练数据、模型架构、擅长领域及应用场景。1. deepseek侧重代码生成与数学推理,适合编程及逻辑任务;2. chatgpt擅长自然语言处理与文本生成,适用于对话、写作等场景;3. 选型应根据项目核心需求决定,若重代码理解选deepseek,若重语言表…

    2026年9月27日 • 用户投稿
    000
  • 【Linux/C++】Linux下C++命令行编译示例

    本文是关于c++++编程语言基础和linux系统操作基础的系列文章的第二部分。我们将详细介绍在linux环境下如何编译c++代码,并展示相关的编译示例和技巧。 文章目录 准备源代码编译实战引入目录进行编译使用-Wall、-std 参数进行编译生成库文件链接静态库生成可执行文件链接动态库生成可执行文件…

    2026年9月27日
    100
  • linux脚本怎么写

    linux脚本怎么写linux脚本怎么写linux脚本怎么写linux脚本怎么写

    编写 Linux 脚本涉及以下步骤:选择脚本语言(例如 Bash、Python)创建脚本文件并添加 Shebang 行(例如,#!/bin/bash)编写脚本内容,包括变量、命令、循环和条件语句赋予执行权限(chmod +x script.sh)运行脚本(./script.sh)脚本结构通常包括:S…

    2026年9月27日 • 用户投稿
    000
  • Sublime运行Python代码中文乱码_修改默认编码格式解决方案

    Sublime运行Python代码中文乱码_修改默认编码格式解决方案Sublime运行Python代码中文乱码_修改默认编码格式解决方案Sublime运行Python代码中文乱码_修改默认编码格式解决方案Sublime运行Python代码中文乱码_修改默认编码格式解决方案

    答案是修改文件编码声明、配置Sublime构建系统、更改系统区域设置或输出到文件。首先在Python文件首行添加# — coding: utf-8 –,然后在Sublime中创建自定义构建系统并设置环境变量PYTHONIOENCODING为utf-8,接着可调整Windows…

    2026年9月27日 • 用户投稿
    000
  • 就业培训里PHP+MySQL安全开发的讲解深度

    php+mysql安全开发的讲解深度应包括:1)基础安全措施的详细讲解,2)常见攻击类型和防范方法的深入探讨,3)最佳实践和开发习惯的培养,以提升学员的技术技能和安全意识。 在就业培训中,关于PHP+MySQL安全开发的讲解深度是一个非常关键的话题。这不仅关系到学员能否掌握必要的技能,也直接影响到他…

    2026年9月27日
    000
  • sublime怎么关联文件类型_Sublime Text设置特定文件扩展名的默认语法

    sublime怎么关联文件类型_Sublime Text设置特定文件扩展名的默认语法sublime怎么关联文件类型_Sublime Text设置特定文件扩展名的默认语法sublime怎么关联文件类型_Sublime Text设置特定文件扩展名的默认语法sublime怎么关联文件类型_Sublime Text设置特定文件扩展名的默认语法

    在Sublime Text中设置特定文件扩展名的默认语法:打开文件后点击右下角语法名称,选择所需模式并设为该扩展名默认;2. 可通过编辑Packages/User/Preferences.sublime-settings文件添加extensions映射,指定.log用Plain Text、.myco…

    2026年9月27日 • 用户投稿
    100
  • 豆包AI如何实现自动化部署?CI/CD流程优化方案

    豆包AI如何实现自动化部署?CI/CD流程优化方案豆包AI如何实现自动化部署?CI/CD流程优化方案豆包AI如何实现自动化部署?CI/CD流程优化方案豆包AI如何实现自动化部署?CI/CD流程优化方案

    豆包ai的自动化部署通过标准化流程和工具链整合实现,其核心是利用ci/cd机制打通开发、测试、构建、发布等环节。1. ci/cd是指持续集成与持续交付/部署,确保代码提交后自动构建、测试并部署到相应环境,提升效率并减少人为错误。2. 关键步骤包括:代码提交触发ci、自动构建镜像、运行测试、部署至目标…

    2026年9月27日 • 用户投稿
    100
  • win10服务主机本地系统占用CPU过高_Svchost.exe进程导致CPU占用率高的解决方法

    win10服务主机本地系统占用CPU过高_Svchost.exe进程导致CPU占用率高的解决方法win10服务主机本地系统占用CPU过高_Svchost.exe进程导致CPU占用率高的解决方法win10服务主机本地系统占用CPU过高_Svchost.exe进程导致CPU占用率高的解决方法win10服务主机本地系统占用CPU过高_Svchost.exe进程导致CPU占用率高的解决方法

    首先定位高CPU占用的svchost.exe进程,通过任务管理器“详细信息”选项卡排序CPU使用率,右键高占用进程选择“转到服务”以识别具体关联服务;接着禁用常引发问题的Connected User Experiences and Telemetry(DiagTrack)服务,并将Windows U…

    2026年9月27日 • 用户投稿
    200
  • 解决Spring Boot与React应用在AWS部署中CORS错误的终极指南

    解决Spring Boot与React应用在AWS部署中CORS错误的终极指南解决Spring Boot与React应用在AWS部署中CORS错误的终极指南解决Spring Boot与React应用在AWS部署中CORS错误的终极指南解决Spring Boot与React应用在AWS部署中CORS错误的终极指南

    本文旨在解决在Spring Boot后端(AWS EC2)和React前端(AWS S3)部署时,即使服务器端已配置宽松的CORS策略,仍出现跨域资源共享(CORS)错误的问题。我们将深入探讨常见误区,并提供一个将CORS配置与Spring Security有效整合的专业解决方案,同时强调处理wit…

    2026年9月27日 • 用户投稿
    100
  • Java语法基础中++i和i++的区别

    答案:++i是先加后用,i++是先用后加。前者先将i加1再参与运算,后者先使用原值再加1,两者在赋值和表达式中结果不同。 在Java语法中,++i 和 i++ 都是自增操作符,作用是将变量 i 的值加1,但它们在使用时的执行时机和返回值有重要区别。 1. ++i(前置自增) 前置自增表示先将变量 i…

    2026年9月27日
    000
  • 怎么用豆包AI帮我转换编程语言 3分钟学会用AI实现代码语言自动转换

    怎么用豆包AI帮我转换编程语言 3分钟学会用AI实现代码语言自动转换怎么用豆包AI帮我转换编程语言 3分钟学会用AI实现代码语言自动转换怎么用豆包AI帮我转换编程语言 3分钟学会用AI实现代码语言自动转换怎么用豆包AI帮我转换编程语言 3分钟学会用AI实现代码语言自动转换

    豆包ai实现代码语言自动转换的方法如下:1. 准备好原始代码并明确标注目标语言,确保代码无语法错误且功能清晰;2. 使用豆包ai的对话功能进行提问,粘贴代码并准确描述转换需求,避免模糊指令;3. 检查转换后的代码是否可用,通过通读、运行测试用例及对比行为差异进行验证,如有问题可继续向ai反馈修改。 …

    2026年9月27日 • 用户投稿
    000
  • sublime怎么配置build system_Sublime Text自定义编译系统教程

    sublime怎么配置build system_Sublime Text自定义编译系统教程sublime怎么配置build system_Sublime Text自定义编译系统教程sublime怎么配置build system_Sublime Text自定义编译系统教程sublime怎么配置build system_Sublime Text自定义编译系统教程

    首先配置Sublime Text的编译系统以运行代码,依次点击Tools → Build System → New Build System…,编辑JSON模板,例如为Python设置{ “cmd”: [“python”, “-u&#822…

    2026年9月27日 • 用户投稿
    000
  • 《新VR战士》确定不采用客串角色 将强化剧情叙事

    《新VR战士》确定不采用客串角色 将强化剧情叙事《新VR战士》确定不采用客串角色 将强化剧情叙事《新VR战士》确定不采用客串角色 将强化剧情叙事《新VR战士》确定不采用客串角色 将强化剧情叙事

    近日,世嘉公开了《VR战士》系列新作的最新动态,明确表示这款正在开发中的格斗游戏将不会加入来自其他IP的跨界角色。在与Giant Bomb的访谈中,制作人山田精一强调,团队的核心目标是打造一个独立且完整的《VR战士》世界观,同时融入新颖设计以吸引新玩家并回馈长期支持的老粉丝。 谈及为何在系列沉寂多年…

    2026年9月27日 • 用户投稿
    100
  • 使用 Gson 和 Kotlin 泛型将数据转换为自定义类

    使用 Gson 和 Kotlin 泛型将数据转换为自定义类使用 Gson 和 Kotlin 泛型将数据转换为自定义类使用 Gson 和 Kotlin 泛型将数据转换为自定义类使用 Gson 和 Kotlin 泛型将数据转换为自定义类

    本文旨在解决在使用 Kotlin 和 Gson 库时,将 JSON 数据反序列化为自定义类,特别是涉及到泛型和 reified 类型参数时可能遇到的问题。核心问题在于类型擦除会导致 Gson 无法正确识别目标类型,从而产生 ClassCastException。本文将深入探讨问题的原因,并提供多种解…

    2026年9月27日 • 用户投稿
    200
  • 用Pygal绘制正割函数图像

    用Pygal绘制正割函数图像用Pygal绘制正割函数图像用Pygal绘制正割函数图像用Pygal绘制正割函数图像

    python是一种极具趣味性的编程语言,具备在命令行中直接运行的能力。它内置了众多强大且实用的模块,本文将带你深入了解如何借助这些模块有效提升编程效率与实际操作能力。 1、 同时按下键盘上的Win键与R键,打开“运行”对话框。输入cmd并回车,即可进入Windows系统的命令行环境。 2、 在命令提…

    2026年9月27日 • 用户投稿
    100
  • sublime怎么查看当前文件的scope_sublime当前文件Scope查看方法

    sublime怎么查看当前文件的scope_sublime当前文件Scope查看方法sublime怎么查看当前文件的scope_sublime当前文件Scope查看方法sublime怎么查看当前文件的scope_sublime当前文件Scope查看方法sublime怎么查看当前文件的scope_sublime当前文件Scope查看方法

    使用“Show Scope Name”命令可查看Sublime Text中光标位置的语法作用域,通过Ctrl+Shift+P输入命令或菜单Tools→Developer→Show Scope Name打开,显示如source.python等层级信息,用于调试语法高亮和主题配色。 在 Sublime …

    2026年9月27日 • 用户投稿
    100
  • CPU硅脂与钎焊散热工艺的性能差距有多大?

    钎焊导热远优于硅脂,因金属键合大幅降低界面热阻,使CPU温度更低、性能释放更强、超频潜力更大,尤其在高负载下优势明显。 CPU硅脂与钎焊散热工艺之间的性能差距,在我看来,通常能达到数度到十余度甚至更高的温差,这在高性能计算场景下,足以显著影响CPU的性能释放和稳定性。简单来说,钎焊在导热效率上有着硅…

    2026年9月27日
    100
  • sublime怎么设置git为默认的core.editor_sublime设置Git默认编辑器方法

    sublime怎么设置git为默认的core.editor_sublime设置Git默认编辑器方法sublime怎么设置git为默认的core.editor_sublime设置Git默认编辑器方法sublime怎么设置git为默认的core.editor_sublime设置Git默认编辑器方法sublime怎么设置git为默认的core.editor_sublime设置Git默认编辑器方法

    首先确认Sublime Text已添加到系统路径并可通过subl命令启动,然后运行git config –global core.editor “subl -n -w”将其设为默认编辑器,最后通过git config –get core.editor验…

    2026年9月27日 • 用户投稿
    100
  • 控制 JScrollPane 滚动条自动更新行为详解

    控制 JScrollPane 滚动条自动更新行为详解控制 JScrollPane 滚动条自动更新行为详解控制 JScrollPane 滚动条自动更新行为详解控制 JScrollPane 滚动条自动更新行为详解

    本教程将深入探讨如何有效控制 JScrollPane 的滚动条自动更新行为,特别是在内容动态变化时保持滚动条位置不变。通过设置滚动条策略为 NEVER,开发者可以阻止 JScrollPane 自动调整其水平或垂直滚动条的值,从而实现对滚动行为的精确控制,避免不必要的UI跳动,提升用户体验。 JScr…

    2026年9月27日 • 用户投稿
    100
  • Java Stream API处理嵌套对象字段求和:以购物车条目为例

    Java Stream API处理嵌套对象字段求和:以购物车条目为例Java Stream API处理嵌套对象字段求和:以购物车条目为例Java Stream API处理嵌套对象字段求和:以购物车条目为例Java Stream API处理嵌套对象字段求和:以购物车条目为例

    本文深入探讨如何利用Java Stream API高效地对复杂嵌套对象中的数值字段进行聚合求和。通过一个购物车条目的具体案例,演示了如何从多层级对象中提取并累加BigDecimal类型的费用数据,强调了mapToDouble、BigDecimal的精确计算以及在处理可能为空的字段时,结合注解进行nu…

    2026年9月27日 • 用户投稿
    100

发表回复

登录后才能评论
关注微信