Map与Set在JS中的使用详解

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《Map与Set在JavaScript中的应用详解》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

Map 和 Set 不是语法糖，而是分别解决键名不限类型的数据映射与自动去重的唯一值集合问题；Map 键可为任意类型，按插入顺序遍历；Set 仅存唯一值，支持 O(1) 成员判断；二者均需用 for…of 遍历，WeakMap/WeakSet 适用于弱引用场景。

Map 和 Set 不是语法糖，也不是数组的替代品——它们解决的是普通对象和数组无法高效处理的两类问题：键名不限类型的数据映射，以及自动去重的唯一值集合。

Map 用来存「键值对」，且键可以是任意类型

普通对象的键只能是字符串或 Symbol，而 Map 允许用函数、对象、甚至 null 或 undefined 当键。这在缓存、事件监听器绑定、DOM 节点元数据等场景中很关键。

常见错误现象：obj[{}] 会把对象转成 "[object Object]" 字符串，导致多个不同对象被当作同一键；Map 则不会。

• new Map() 初始化后需用 .set(key, value) 写入，不能用点号或方括号赋值
• map.get(key) 返回 undefined（即使存了 undefined 值），要用 map.has(key) 判断是否存在
• 遍历时顺序按插入顺序，而普通对象属性顺序不保证（尤其数字键）
• JSON 序列化不支持 Map，需手动转成数组：Array.from(map) 或 [...map]

Set 用来存「唯一值」，自动忽略重复项

Set 不是“没有值的 Map”，它只存值，不存键值关系。它的核心价值是去重 + 成员判断，比用 includes() 或 indexOf() 在数组里查快得多（平均时间复杂度 O(1) vs O(n)）。

使用场景：过滤用户点击记录、管理已加载模块、去重异步请求参数、实现简单权限集合。

• 初始化可传入可迭代对象：new Set([1, 2, 2, 3]) → {1, 2, 3}
• set.add(value) 总是返回 Set 本身，支持链式调用；重复添加无副作用
• set.delete(value) 返回布尔值，表示是否成功删除；set.clear() 清空全部
• 数组去重最简写法：[...new Set(arr)]，但注意它不保留原始类型（如 NaN 被视为相等，而 === 中不是）

Map 和 Set 都有迭代器，但不能直接用 for…in

for…in 遍历的是对象的可枚举属性，而 Map 和 Set 的元素存在内部槽位，不在属性链上。必须用 for…of、.forEach() 或展开运算符。

• Map 的 .entries()、.keys()、.values() 返回迭代器，[...map.keys()] 可转为数组
• Set 的 .values() 和 .keys() 行为完全一致（为兼容 Map 接口），都返回值迭代器
• 想转成普通对象？别硬转。真需要就用 Object.fromEntries(map)（仅当键都是字符串或 Symbol 时安全）

真正容易被忽略的是弱引用场景：如果只是临时关联 DOM 节点和状态，又不想阻止节点被 GC，该用 WeakMap 或 WeakSet——它们的键/值不可枚举，且不阻止垃圾回收。但这也意味着你不能遍历它们，也不能用 size 属性。

理论要掌握，实操不能落！以上关于《Map与Set在JS中的使用详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！