Map比Object更适合存储键值对,因其支持任意类型键、保留插入顺序、size属性直接获取长度;Set比Array更适合去重和成员判断,因has()为O(1)且原生支持迭代器。

Map 比 Object 更适合存储键值对
Object 的键只能是字符串或 Symbol,而 Map 允许任意类型作键(包括对象、函数、null、甚至另一个 Map)。这意味着你不需要把对象转成字符串再拼接,避免了 {[object Object]}: value 这种不可靠的 key。
常见错误现象:用普通对象缓存 DOM 节点或 React 组件实例时,因为 obj[node] = data 实际触发了 node.toString(),所有节点都变成 "[object HTMLDivElement]",导致数据覆盖。
实操建议:
- 需要以非字符串/非 Symbol 值为键时,必须用
Map,不能用Object -
Map保留插入顺序,遍历时按添加顺序返回;Object在 ES2015+ 虽也保留部分顺序,但对数字字符串键(如"10"、"2")会自动排序,行为不一致 -
Map.size是属性,Object.keys(obj).length需计算,且无法包含不可枚举属性
Set 比 Array 更高效地做去重和成员判断
Array.includes() 是 O(n) 时间复杂度,而 Set.has() 是平均 O(1)。当你要高频判断某个值是否“存在”(比如防重复提交、状态白名单校验),Set 明显更快。
立即学习“Java免费学习笔记(深入)”;
使用场景举例:监听多个事件源,只处理未见过的 ID;或维护一个动态更新的允许操作的用户角色集合。
实操建议:
- 从数组创建去重集合:
new Set([1, 2, 2, 3])→Set {1, 2, 3},比[...new Set(arr)]或filter((v, i) => arr.indexOf(v) === i)更简洁可靠 -
Set不支持索引访问(没有set[0]),也不能用map/find等数组方法,需先转为数组([...set])再操作 —— 这是易踩的坑 - 若需保持插入顺序 + 快速查重 + 高频增删,
Set是比Array.filter()或Array.findIndex()更优解
Map 和 Set 都原生支持迭代器,与 for…of 天然契合
Map 和 Set 都实现了 Symbol.iterator,可直接用于 for...of、展开运算符、Array.from(),而普通对象要遍历自身可枚举属性还得靠 Object.entries() 或 Object.keys() 中转。
性能影响:Map.keys()、Map.values()、Map.entries() 返回的是迭代器,不是新数组,内存更友好;而 Object.keys() 总是返回新数组,大量键时有额外开销。
实操建议:
- 遍历键值对优先写
for (const [key, value] of myMap) { ... },而不是for (const key of myMap.keys()) { const value = myMap.get(key); ... } - 需要解构赋值时:
const [firstEntry] = myMap;可直接取第一个[key, value],Object不支持这种写法 -
Map和Set的迭代器是“活”的:遍历时修改结构(如map.set())不会报错,但行为未定义(不同引擎可能跳过或重复)—— 生产环境应避免边遍历边改
何时不该用 Map/Set?这些边界情况容易被忽略
Map 和 Set 不是万能替代品。它们不支持 JSON 序列化(JSON.stringify(new Map()) 得到 {}),也没有原型方法如 hasOwnProperty 或 toString 的自定义空间。
容易被忽略的点:
- 如果只是静态配置映射(如
{'en': 'English', 'zh': '中文'}),用Object更轻量、可读性更好、支持点语法和解构,没必要上Map -
Set无法存储重复值,但如果你需要计数(比如统计某 ID 出现次数),得用Map存id → count,或用第三方Multiset - IE11 不支持
Map/Set,需检查兼容性;即使用了 Babel,Map的 polyfill 也无法完全模拟弱引用语义(如WeakMap的垃圾回收行为)











