javascript Map是什么_它和对象有何区别【教程】

Map的键支持对象/函数且不转字符串，而Object会将对象键转为"[object Object]"导致覆盖；Map用SameValueZero比较保留引用，遍历严格按插入顺序，提供size、has()等确定性API，不可用中括号或点号访问。

Map 的键能用对象/函数，而 Object 会偷偷转成字符串

这是最常踩坑的地方：你以为在用对象当键，其实 Object 已经把它变成 "[object Object]"。比如 obj[{}] 和 obj[{}] 看似两个键，实际都指向同一个字符串键，后一次赋值直接覆盖前一次。

Map 不会这样——map.set({}, 'a') 和 map.set({}, 'b') 是两个独立条目，因为 Map 用 SameValueZero 比较键，保留原始引用。

• 要缓存 DOM 元素状态？用 map.set(element, data)，别用 obj[element]
• 要按函数记忆计算结果？map.set(fn, result) 安全；obj[fn]

  

  会变成 "function() { ... }"，所有函数都撞车
• 数字 42、字符串 '42'、NaN 在 Map 中互不干扰；在 Object 中，obj[42] 等价于 obj['42']

遍历时顺序不一致，Object 的 for...in 不可靠

ES2015 规定 Object 属性按插入顺序返回，但仅对字符串和 Symbol 键有效；数字键仍按升序排。比如 { a: 1, 2: 'two', 1: 'one' }，Object.keys() 返回 ['1', '2', 'a']，不是你写的顺序。

Map 始终严格按 set() 的调用顺序迭代，for (const [k, v] of map) 或 map.forEach() 都稳如磐石。

• 做 UI 状态映射表（比如 tab 页签顺序）？必须用 Map
• 需要 map.keys() 或 map.values() 直接拿到有序数组？Object 得先 Object.keys(obj).sort() 手动保序，容易漏逻辑
• 注意：map.entries() 返回的是 [key, value] 数组，不是对象，别试图解构成 { key, value }

size、has()、delete() 这些方法，Object 都得绕弯子

Object 没有 size 属性，统计个数得写 Object.keys(obj).length，还可能被原型链或不可枚举属性干扰；key in obj 会命中 toString 这类原型方法；delete obj[key] 总返回 true，哪怕 key 根本不存在。

Map 提供语义清晰、行为确定的接口：

• map.size 是实时属性，不用计算，也不受原型影响
• map.has(key) 只查自身，不查原型，安全判断存在性
• map.delete(key) 返回布尔值，告诉你删没删成功
• map.clear() 一键清空，Object 得循环 delete 或重新赋值 {}

别把 Map 当 Object 使：点号访问、方括号取值、解构都无效

Map 不是 Object 的子类，它没有原型链，也不支持点号或中括号语法访问数据。写 map.key 或 map['key'] 一律返回 undefined；const { size } = map 解构不到任何东西——size 是属性，但 Map 不可枚举，也不响应解构。

所有操作必须走标准方法：

• 取值只能用 map.get(key)，不是 map[key]
• 设值只能用 map.set(key, val)，不是 map[key] = val
• 遍历必须用 for (const [k, v] of map) 或 map.forEach()，别套用 for...in
• 要转成普通对象？得手动 Object.fromEntries(map)（注意：这会丢失非字符串/Symbol 键）

真正容易被忽略的，不是“该不该用 Map”，而是用了之后还下意识写 map[key] 或 map.size 却忘了它不是普通对象——这种错法不会报错，只会默默返回 undefined，排查起来特别费时间。

# 的是  # 这是  # 也不  # 把它  # 告诉你  # ui  # 循环  # 对象  # javascript  # java  # 区别  # 子类  # 字符串  # 接口  # function  # delete  # foreach  # map  # Object  # 遍历  # for  # dom  # const  # sort  # undefined  # Length  # 转成  # 只能用  # 升序  # symbol 

相关栏目： <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 AI推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 SEO优化<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 技术百科<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 谷歌推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 百度推广<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 网络营销<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 案例网站<？ｍｕｍａ echo $count; ?> 】 <？ｍｕｍａ $count = M('archives')->where(['typeid'=>$field['id']])->count(); ?> 【 精选文章<？ｍｕｍａ echo $count; ?> 】