JavaScript Map的[]与set/get差异及size异常问题答疑

核心原因：Map的键值对存储与对象属性存储完全独立 #

JavaScript的Map是ES6引入的专用集合类型，它有自己独立的键值对存储容器，和Map实例作为普通JS对象的属性存储是两个完全分离的机制。

1. 为何mp1.size为0，mp2.size正常？ #

• 当你使用mp1[1] = 'apple'这种[]赋值语法时，并没有往Map的专属键值对集合里添加元素，而是给mp1这个普通JS对象添加了一个名为"1"的属性（对象属性名会自动转成字符串）。
• Map的size属性仅统计通过set()方法添加到其内部集合中的键值对数量：
  • mp1全程只通过[]给对象加属性，从未调用set()，所以size显示为0；
  • mp2通过set()添加了两个键值对，因此size正确统计为2。

2. 为何[]访问与get()/set()结果不同？ #

set()和get()操作的是Map自身的键值对集合，而[]操作的是Map实例作为JS对象的属性，两者的数据完全不互通：

• 对于mp1：
  • mp1[1] = 'apple'给对象添加了属性"1"，值为apple；
  • mp1.set(1, 'test')是在Map集合里添加了键为数字1的条目，值为test；
  • 因此mp1.get(1)拿到的是Map集合里的test，而mp1[1]拿到的是对象属性的apple。
• 对于mp2：
  • mp2.set(1, 'match')是在Map集合里添加了键为数字1的条目；
  • mp2[1]试图访问对象的属性"1"，但这个属性从未被定义过，所以返回undefined；
  • 而mp2.get(1)能正确拿到Map集合里的match。

额外补充 #

Map的键支持任意类型（对象、函数、原始值等），而对象的属性名只能是字符串或Symbol，这也是两者的关键区别之一。比如你可以用一个对象作为Map的键，但无法用对象作为普通对象的属性名（会被转为字符串"[object Object]"）。

内容的提问来源于stack exchange，提问作者Sowmya Ravichandran