JavaScript中Map的取值与赋值方法及相关使用疑问

嘿，我来帮你搞明白这里面的关键区别，你遇到的问题其实是混淆了Map的专属键值对操作和普通对象的属性操作～

两种操作的本质差异 #

你看到的两种写法，看似都能存值取值，但底层完全是两回事：

• 用set()和get()：这是Map对象设计的专属API，操作的是Map内部专门存储键值对的结构。这些键值对会被Map的所有内置方法（比如entries()、forEach()）识别，也是我们使用Map的正确方式。

  let myMap = new Map();
  myMap.set('key', 'value');
  console.log(myMap.get('key')); // 输出 'value'
  

• 用方括号myMap['key'] = 'value'：这其实是给Map这个对象本身添加了一个普通属性，根本没存入Map的键值对集合里。就像你给一个数组对象加个自定义属性一样，和数组的元素完全是两码事。

举个直观的例子对比：

let myMap = new Map();
// 正确存入Map的键值对
myMap.set('name', 'Alice');
// 给Map对象加普通属性
myMap['age'] = 25;

console.log(myMap.get('name')); // 正常输出 'Alice'
console.log(myMap['age']); // 也能拿到25，但这不是Map的键值对

// 遍历Map的键值对，只会拿到name，age不会出现
for (let [key, value] of myMap) {
  console.log(key, value); // 仅输出 'name' 'Alice'
}

这就是你返回Map时出问题的原因：那些用方括号加的属性不属于Map的核心键值对，自然不会被Map的相关方法或转换逻辑包含进去。

Map与对象的正确转换方法 #

1. Map转普通对象 #

用Object.fromEntries()可以直接把Map的键值对集合转成对象：

let myMap = new Map();
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

const targetObj = Object.fromEntries(myMap);
console.log(targetObj); // { key1: 'value1', key2: 'value2' }

2. 普通对象转Map #

用Object.entries()把对象转成键值对数组，再传给Map的构造函数：

const sourceObj = { key1: 'value1', key2: 'value2' };
const myMap = new Map(Object.entries(sourceObj));
console.log(myMap.get('key1')); // 输出 'value1'

总结 #

以后操作Map的时候，一定要用它的专属API（set()、get()、delete()、has()等）来处理键值对，别和普通对象的属性操作混在一起，这样就能避免返回或转换时出现的“丢失数据”问题啦～

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