JavaScript中map.set与方括号赋值的差异及Map工作原理解析

一、两者的核心区别 #

• 存储区域完全分离：map.set('key', value)是往Map自身的专属键值对集合中存储数据，属于Map的核心存储体系；而map['key'] = value是给Map这个对象添加普通对象属性，和给普通{}对象加属性的逻辑完全一致，不属于Map的键值对范畴。
• 键的类型支持差异：Map的set()方法支持任意类型作为键（比如对象、函数、Symbol、基本类型等）；但方括号赋值的键会被强制转为字符串或Symbol类型，无法用对象等非字符串/Symbol类型作为有效键。
• 遍历与统计逻辑不同：Map的forEach()、keys()、values()方法以及size属性，只会统计其专属键值对集合中的内容；方括号添加的属性不会被这些方法统计，却能被for...in遍历到。
• 内存行为不同：Map的键值对是独立管理的，而方括号添加的属性遵循普通对象的内存引用规则（比如强引用）。

二、结合代码解析Map的工作机制 #

先看示例代码：

function howMapWorks() {
    var map = new Map();
    map['someKey'] = ['a', 'b'];
    map.set('someKey', ['c', 'd']);
    map.forEach((v, k) => {
        console.log(v);
    });
    console.log(map);
}

执行后输出：

[ 'c', 'd' ]
Map(1) { 'someKey' => [ 'c', 'd' ], someKey: [ 'a', 'b' ] }

对输出的解析：

1. map['someKey'] = ['a', 'b']：这一步只是给map这个对象本身添加了一个名为someKey的属性，和Map专门用来存键值对的内部结构毫无关系，相当于给普通对象加属性。
2. map.set('someKey', ['c', 'd'])：这才是真正操作Map的核心存储，在Map的内部键值对集合中新增了一条键为'someKey'、值为['c','d']的记录。
3. map.forEach()的输出：forEach是Map的专属遍历方法，只会遍历其内部的键值对集合，所以只打印了['c','d']，完全不会处理之前给对象加的someKey属性。
4. 控制台打印map的结果：控制台会同时展示Map的内部键值对（'someKey' => ['c','d']）和Map对象自身的属性（someKey: ['a','b']），看起来像是有两个同名的"键"，但本质上它们分属两个完全独立的存储区域。

简单来说，Map是JS专门设计的键值对存储容器，它有自己独立的存储逻辑，和普通对象的属性系统是分开的。只有用set()、get()等Map专属方法，才是在操作它的核心键值对；用方括号赋值只是在操作Map对象的普通属性，和Map的核心功能无关。

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