JavaScriptmap与set应用区别详解

本篇文章向大家介绍《JavaScript的map和set用途及区别【教程】》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

Map适合存任意类型键的键值对，Set用于高效去重和存在性检查；二者语义明确，不可与Object/Array混用，否则导致逻辑脆弱、性能下降或行为异常。

Map 适合存键值对，且键可以是任意类型

普通对象的键只能是字符串或 Symbol，而 Map 的键支持函数、对象、原始值甚至 NaN —— 这意味着你可以用一个对象实例作为键来查数据，不会被自动转成 "[object Object]"。

常见错误：有人用 {} 模拟映射表，却把数组或日期当 key，结果所有值都写到同一个字符串键上。

• Map 保持插入顺序，遍历时按添加顺序返回
• Object.keys() 返回字符串数组，Map.keys() 返回迭代器，需 Array.from() 或 for...of 遍历
• 频繁增删键值时，Map 的性能通常优于对象（尤其键数量 > 1000）

const obj = {};
const arr = [1, 2];
obj[arr] = 'oops'; // 键被转成 "[1,2]"
console.log(obj[[1, 2]]); // 'oops' —— 看似正常，实则不可靠

const map = new Map();
map.set(arr, 'correct');
console.log(map.get([1, 2])); // undefined —— 因为新数组不是原引用
console.log(map.get(arr)); // 'correct'

Set 用于去重和存在性检查，比数组 filter + includes 更高效

Set 不是“带索引的数组”，它没有下标访问，也不保证顺序（实际实现中大多数引擎保持插入顺序，但规范不保证），核心价值是 O(1) 平均时间复杂度的 .has() 和自动去重。

常见错误：用 Array.from(new Set(arr)) 去重后仍用 indexOf 查找，忽略了 Set.has() 本就更快。

• Set 只存值，不存键；Map 存键值对；Array 存有序索引值；Object 是无序键值容器（ES2015+ 后属性顺序有约定，但语义上仍非序列）
• Set 对 NaN 的处理更合理：new Set([NaN, NaN]) 长度为 1；而 [NaN].indexOf(NaN) 返回 -1
• 需要统计唯一项出现次数？别硬套 Set，该用 Map 存 value → count

const nums = [1, 2, 2, 3, NaN, NaN];
const unique = [...new Set(nums)]; // [1, 2, 3, NaN]
const set = new Set(unique);
console.log(set.has(2)); // true —— 比 nums.includes(2) 在大数据量时快得多

Object 和 Array 不是 Map/Set 的替代品，它们语义不同

用错容器本质是混淆了数据意图：Array 表达“有序列表”，Object 表达“命名结构体”（如配置、响应体），Map 表达“动态键值映射”，Set 表达“唯一值集合”。强行混用会让逻辑变脆。

典型反例：把用户 ID 列表存进 Object 当键（{'123': true, '456': true}），看似能 obj[id] 查存在，但数字键会被排序、JSON.stringify 会丢失、for...in 可能遍历原型链。

• 要快速判断某 id 是否存在？用 Set（set.has(id)）或 Map（map.has(id)），别用对象
• 要按顺序渲染列表？必须用 Array，Map.values() 虽有序但不是数组，不能直接 .map() 渲染（得先转）
• 要给对象加元信息（比如缓存过期时间）？Map 可以把原对象当键，WeakMap 更合适（避免内存泄漏）

兼容性和运行时开销：别为了语法糖牺牲明确性

Map 和 Set 在 IE11 及更早版本中不可用，若需兼容，可用 polyfill（如 core-js），但要注意：polyfill 的 Map 无法真正支持非字符串键的弱引用行为，WeakMap 更无法完全模拟。

另一个现实问题：V8 引擎对小规模数据（Object 查找其实比 Map 更快，因为内联缓存优化充分。盲目替换可能降低性能。

• 现代项目（Target ES2015+）可放心用 Map/Set，但别在热循环里反复创建新实例
• Map.prototype.forEach 和 Array.prototype.forEach 参数顺序不同：map.forEach((value, key) => {})，容易写反
• JSON.stringify(new Map()) 得到空对象 {}，序列化前必须手动转成数组或对象

最常被忽略的一点：Map 和 Set 的迭代器不可重用 —— 一次 for...of 遍历完，再次遍历需重新调用 .entries() 或 .values()。这不是 bug，是设计使然。

好了，本文到此结束，带大家了解了《JavaScriptmap与set应用区别详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！