JavaScript中，为什么Set是带键的集合？（前端开发）

最新推荐文章于 2025-11-24 03:12:01 发布
最新推荐文章于 2025-11-24 03:12:01 发布
阅读量90 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 前端 开发语言 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/api_git355/article/details/133298296
JavaScript中的Set是一种存储唯一值的数据结构，它不允许重复元素，元素既是键也是值。Set的设计旨在提供高效的查找和去重机制，通过哈希表实现O(1)的查找速度。示例代码展示了Set的添加、删除、查找和遍历操作，适用于前端开发中的数据处理。

Set是JavaScript中的一种数据结构，它用于存储唯一值的集合。与数组不同，Set不允许重复的元素。在Set中，元素的键和值是相同的，这意味着每个元素本身既是键也是值。

为什么Set是带键的集合？这是因为Set的设计目的是为了提供一种高效的查找和去重机制。当我们需要存储一组值，并确保其中没有重复项时，Set是一个非常有用的数据结构。

让我们通过一些示例代码来说明Set的用法和为什么它是带键的集合。

// 创建一个新的Set实例
const set = new Set();

// 添加元素到Set
set.add(
了解本专栏 订阅专栏 解锁全文
JavaScript Set
卡拉米
09-24 555
entries() 方法返回的是 [value,value] 值值对，而不是 [key,value] 键值对。返回迭代器，其中包含 Set 中的 [value,value] 值值对。对于 Set，instanceof Set 返回 true。keys() 返回与 values() 相同的结果。当 add 中有重复的元素则只会保存第一个的。将数组传递给新的 Set() 构造函数。返回包含 Set 中所有值的迭代器。这使得 Set 与 Map 相兼容。从 Set 中移除所有元素。与 values() 相同。
什么是JavaScript中的Map和Set数据结构？它们与普通对象有什么不同？
热门推荐
官方推荐
07-16 1万+
什么是JavaScript中的Map和Set数据结构？它们与普通对象有什么不同？
javascript 中Set与WeakSet 是什么？
xuxian的博客
05-06 1493
Set类似于数组，可以存储任何类型的唯一值（无重复），包括基本类型和复杂类型。可以使用new Set()构造函数创建一个Set。可以使用add()方法向Set添加元素。可以使用delete()和clear()方法从Set中移除元素。可以使用for...of循环或forEach()方法遍历Set的元素。WeakSet只能包含对象，不能像Set那样包含任何类型的值。WeakSet内的引用对对象是弱引用。
「终极收藏」前端开发必备：超全JavaScript公共方法大全
xingyu_qie的专栏
05-23 6810
在前端开发中，JavaScript是必不可少的一部分，而掌握各种常用的公共方法更是提升开发效率和代码质量的关键。本篇博客将为你详细汇总并解析最全的JavaScript公共方法，涵盖数组、对象、字符串、日期等各个方面的常用技巧。希望通过这篇文章，能为你的前端开发之路提供有力的帮助，成为你开发过程中不可或缺的参考指南。我已经将所有公共方法，按模块的形式，集成到了js-tool-big-box工具包中，大家不比担心安装后会使项目体积变大，不会的。想要使用时间日期类的公共方法，需要先在项目中导入。
JavaScript 中 Set 和 Map 的详细讲解
露西西⭐的博客
03-20 2413
Set具有唯一性、无序性、可迭代。Set 可以存储任意类型的值（包括基本类型和引用类型）。 Map是键值对存储，Map 的键可以是任意类型（包括对象、函数等），Map 会记住键值对的插入顺序，Map 在频繁增删键值对的场景下性能更好。
【前端面试】理解 JavaScript 中的 Set 和 Map 对象
qq_41767061的博客
06-18 1067
给定一个数组和一个目标值，找出数组中和为目标值的两个数，并返回它们的索引。是一个静态方法，它从一个类似数组或可迭代对象创建一个新的数组实例。对象允许你存储任何类型的唯一值，无论是原始值还是对象引用。对象是键值对的集合，键可以是任何类型。: 给定一个字符串，统计其中每个字符出现的次数。: 给定一个数组，找出其中的重复元素。: 给定一个数组，返回去重后的数组。在 JavaScript 中，
JavaScript 中的 Set：理解与应用
weixin_63726940的博客
01-07 1254
SetJavaScript 中的Set是一个非常有用的数据结构，它可以帮助我们高效地管理一组唯一的值，避免重复，并且提供了多种操作方法，如添加、删除、查找和遍历等。Set适用于处理去重、快速查找和集合运算等场景。
JavaScript前端面试题——JS 中 Map 和 WeakMap 有什么区别 ?
lbcbjtlhmjq的博客
09-06 1259
为了避免有小伙伴和我一样连 map 和 weakmap 是什么都不知道，我在这里详细介绍一下。Map和WeakMap是 ECMAScript 2015（ES6）引入的两种数据结构，用于改进键值对的管理方式。Map：适用于需要保持键值对插入顺序、允许多种数据类型作为键、需要遍历和获取大小的场景。WeakMap：适用于需要将对象作为键并确保这些键不会阻止对象被垃圾回收的场景，通常用于存储对象的元数据。
JavaScript中的Set和Map：理解与使用
你若盛开，清风自来
03-09 1639
本文将探讨JavaScript中的Set和Map数据结构。我们将了解它们的特点、用途以及如何使用它们。通过学习Set和Map，你将能更有效地管理集合数据。📚Set和Map是JavaScript中强大的集合数据结构。Set用于存储唯一的值，而Map用于存储键值对。通过学习Set和Map的特点和用法，你可以更有效地管理集合数据，提高代码的效率和可读性。
如何使用JavaScript将Set转换为Array？
m0_66319974的博客
01-11 6743
如何使用JavaScript将Set转换为Array？
JavaScript中Set的基本指南
老司机的后备箱
10-21 1467
Javascript 集是创建唯一列表的有用方法，该列表可以变异，但不包含重复项。JavaScript 中的Set是检查某个值是否存在于指定的其他值列表中的好方法。Set很有用，因为它们通常比类似的更快因此它们提供了一种有效且优化的方式来检查一个值是否存在于一组其他值中。要创建一个新集合，我们使用new Set()为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
Web前端开发第4季：JavaScript基础入门
06-14
switch--case）◆ 循环（while循环, do--while循环, for循环，循环嵌套 ）◆ 集合（Array基础常见操作、案例演示）◆ set集合、map集合（集合的遍历、集合常用的方法）◆ 课后习题 在本季课程的讲解部分结合了大量的...
前端JavaScript总结
06-19
JavaScript，简称JS，是前端开发中的核心技术之一，用于构建交互式的网页应用。在这个"前端JavaScript总结"中，我们将深入探讨JavaScript的基本概念、语法特性、核心功能以及在实际开发中的应用。 首先，JavaScript...
Vue开发工具使用技巧
2509_93946471的博客
11-24 218
打开DevTools的"Events"标签页，所有组件间传递的事件都会按时间顺序列出来，连事件负载数据都能展开看详情。更绝的是，你还能手动触发事件——比如在父组件里模拟一个事件，直接测试子组件的响应逻辑，省得反复修改代码来调试。如果组件用了作用域插槽，可以在"Scoped Slots"子面板里实时查看slot传递的数据内容，比在模板里写调试代码清爽得多。路由调试经常被忽略。热重载调试时，如果发现修改代码后页面没及时更新，可以到DevTools的"Settings"里勾选"Log reloads"选项。
【基础】EGG.js 框架内置基础对象
林见鹿鸣
11-24 553
在。
SSM企业物资管理系统h3109(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上，文末可获取，系统界面在最后面
2509_93102542的博客
11-21 760
在技术实现上，国外多采用成熟的开发框架和技术架构，注重系统的安全性、稳定性和可扩展性，同时积极融入大数据、人工智能等新技术，实现物资需求预测、智能库存优化等功能。基于此，开发一套基于SSM框架的企业物资管理系统，整合部门、员工、物资及各类业务流程管理功能，实现物资管理的数字化、规范化和高效化，成为解决企业物资管理痛点的必然需求。本课题旨在开发一套基于SSM框架的企业物资管理系统，围绕部门、员工、物资信息、物资申请、消息提醒、物资归还、物资入库、意见反馈八大核心功能模块，实现企业物资管理的全流程数字化。
Vue网站
最新发布
2509_93947362的博客
11-24 96
给大家分享个实用技巧：组件通信时，简单的父子传参用props/$emit搞定，复杂场景就用Vuex，千万别为了省事滥用event bus，不然项目大了事件流会乱成麻花。以前写数据绑定总要搞一堆繁琐的DOM操作，现在一个双大括号{{data}}就能搞定，新手看了五分钟就能上手写页面。刚开始觉得小项目用Vuex太重量级，后来发现即便是最简单的购物车功能，随着业务复杂度的提升，最终还是得引入状态管理。特别是把相同业务逻辑抽离成composable函数后，在不同组件里直接引入就能用，代码复用率明显提升。
React社区
2509_93942966的博客
11-23 233
这种混乱中带着生命力的讨论，特别像早年中关村攒机市场——商家喊着不同配置的优劣，而真正懂行的玩家早就摸清了哪个方案最适合自己的项目。但有意思的是，无论工具链怎么变，React核心团队始终稳如老狗——他们宁可把并发特性在实验阶段晾三年，也不愿重蹈Angular断代升级的覆辙。组件库生态更是百花齐放。这种带着口音的技术交流，反而比标准教科书更能体现社区的活力。或许某天你写在Stack Overflow的答案，就会成为某个巴西程序员解决线上故障的关键——这种跨越时区的知识接力，才是技术社区最浪漫的部分。
JavaScript案例
2509_93942579的博客
11-21 305
这段代码遍历用户数组，为每个用户创建li元素，并添加到ul列表中。经常遇到动态添加的元素无法绑定事件的问题，比如一个任务列表，每个任务项有个删除按钮。如果给每个按钮单独绑事件，新加的按钮就没反应。这时事件委托就派上用场了，我们把事件绑在父容器上，通过事件冒泡来管理。这些案例都是我在项目中踩过坑后总结的，可能不是最优解，但实测有效。这个debounce函数返回一个新函数，在delay毫秒内如果重复调用，会清除之前的定时器，重新计时。这样只有用户停止输入300毫秒后，才会触发搜索操作，有效减少不必要的请求。
Map 和普通对象在前端开发中的区别是什么？
08-06
### 三、Map 与普通对象的键类型差异 JavaScript 中的 `Map` 和普通对象在键的类型支持上存在显著区别。普通对象的键只能是字符串或符号（Symbol），而 `Map` 允许使用任意类型的值作为键，包括对象、函数、数字甚至 `null` 和 `undefined`。这种灵活性使得 `Map` 在需要将对象作为键进行映射时表现得尤为出色，例如缓存对象元数据或构建关联型数据结构[^2]。 示例： ```javascript const obj = {}; const map = new Map(); obj['key'] = '字符串键'; map.set('key', '字符串键'); map.set(obj, '对象键'); console.log(map.get(obj)); // 输出: 对象键 ``` ### 四、初始化方式的不同 普通对象可以直接使用字面量进行初始化，而 `Map` 必须通过 `Map()` 构造函数创建。如果需要初始化包含键值对的 `Map`，则需要传入一个可迭代对象，例如数组形式的键值对集合[^2]。 示例： ```javascript const obj = { name: 'Alice', age: 25 }; const map = new Map([ ['name', 'Alice'], ['age', 25] ]); ``` ### 五、数据操作的灵活性与方法支持 `Map` 提供了更丰富的内置方法用于操作键值对，如 `set()`、`get()`、`has()`、`delete()` 和 `clear()`，并且支持直接遍历。相比之下，普通对象的操作方式较为基础，通常需要配合 `Object.keys()`、`Object.values()` 等静态方法才能实现类似功能。此外，`Map` 保持了键值对的插入顺序，而普通对象在 ES6 之前并不保证顺序一致性[^1]。 示例： ```javascript const map = new Map(); map.set('a', 1).set('b', 2); console.log(map.has('a')); // 输出: true console.log(map.size); // 输出: 2 map.delete('a'); ``` ### 六、内存管理与引用行为 `Map` 中的键是强引用的，这意味着只要 `Map` 存在，键所引用的对象就不会被垃圾回收器回收。这种机制适用于大多数数据存储场景。然而，如果希望避免影响垃圾回收机制，可以使用 `WeakMap` 替代。`WeakMap` 的键必须是对象，并且不会阻止垃圾回收器回收这些对象，适用于临时存储对象元信息等场景[^5]。 示例： ```javascript let key = {}; let weakMap = new WeakMap(); weakMap.set(key, '临时数据'); key = null; // 此时，weakMap 中的键已被回收 ``` ### 七、性能与适用场景对比 在前端开发中，`Map` 相较于普通对象在某些场景下具有性能优势。例如，频繁进行键值对的增删操作时，`Map` 的性能表现通常优于普通对象。此外，由于 `Map` 支持任意类型的键，因此在需要使用非字符串键时，`Map` 是更合适的选择。然而，如果只是简单的键值存储，并且键为字符串，普通对象依然是一种轻量且高效的方案[^1]。 ### 八、遍历能力与顺序保证 `Map` 是可迭代对象，可以直接使用 `for...of` 进行遍历，键值对的顺序与插入顺序一致。普通对象虽然也可以通过 `Object.keys()` 等方法实现遍历，但在 ES6 之前不保证键的顺序一致性，容易引发逻辑错误。因此在需要有序遍历键值对的场景中，`Map` 更具优势。 示例： ```javascript const map = new Map([ ['a', 1], ['b', 2], ['c', 3] ]); for (const [key, value] of map) { console.log(key, value); } // 输出: // a 1 // b 2 // c 3 ``` ### 九、嵌套结构与数据管理 在处理嵌套对象或复杂数据结构时，`Map` 提供了更清晰和灵活的操作方式。例如，可以将用户的地址信息作为嵌套对象存储在 `Map` 中，并通过 `.get()` 方法直接获取嵌套属性，避免了对象访问层级过深带来的可维护性问题[^4]。 示例： ```javascript const userMap = new Map(); userMap.set('address', { city: 'Beijing', country: 'China' }); console.log(userMap.get('address').city); // 输出: Beijing ``` ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值