一、先搞定Array.prototype.map()：数组的“转换大师” #

到底它是干啥的？ #

Array.prototype.map() 是数组的内置迭代方法，核心就是**“一对一映射转换”：遍历原数组的每一个元素，把每个元素扔给你写的回调函数处理，最后把所有回调返回的结果拼成一个新数组**，原数组不会被修改（除非你在回调里硬改，但这是坏习惯）。

什么时候用它比for循环香？ #

不是说for循环不好，而是map在特定场景下更简洁、更易读：

• 需要从原数组生成对应新数组：比如把用户列表转成用户名数组、把数字转成平方数，这种“每个元素都要转一下”的场景，不用手动初始化空数组、不用写push，一行代码搞定。
• 链式操作更丝滑：map之后可以直接接filter、reduce这些数组方法，比嵌套for循环清爽太多，代码逻辑一眼就能看明白。

实用示例对比 #

比如，把用户数组转成仅包含用户名的数组：

// 用map的写法
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];
const userNames = users.map(user => user.name);
console.log(userNames); // ["Alice", "Bob", "Charlie"]

// 用for循环的写法
const userNamesFor = [];
for (let i = 0; i < users.length; i++) {
  userNamesFor.push(users[i].name);
}

再比如，把摄氏度数组转成华氏度：

const celsius = [0, 10, 20, 30];
const fahrenheit = celsius.map(temp => temp * 9/5 + 32);
console.log(fahrenheit); // [32, 50, 68, 86]

底层原理（简单版） #

map内部会创建一个新数组，然后遍历原数组的每一项：

1. 对每个元素调用你传入的回调函数，传入当前元素、索引、原数组三个参数
2. 把回调返回的结果添加到新数组里
3. 遍历完成后返回新数组，原数组保持不变

二、再聊聊new Map()：键值对存储的“灵活选手” #

它是啥？ #

new Map() 创建的是ES6新增的键值对存储数据结构，和咱们常用的Object有点像，但比Object更灵活。它的核心是存储“键-值”映射关系，而且键可以是任意类型（对象、函数、字符串、数字都行），还自带很多实用方法。

能用它干啥？ #

• 用非字符串/数字当键：比如你想把DOM元素和对应的配置绑定，用Object的话键会被转成字符串，而Map可以直接用DOM元素当键。
• 需要保持插入顺序：Object在ES6之前是不保证键的顺序的，而Map会严格按照你插入键的顺序迭代。
• 频繁增删键值对：Map的增删操作性能比Object好，尤其是数据量大的时候。
• 避免原型链污染：Object会继承原型链上的属性（比如toString、hasOwnProperty），而Map不会，不用担心键名和原型属性冲突。

实用示例 #

比如，存储DOM元素和对应的状态：

// 创建一个Map
const domState = new Map();
const button = document.querySelector('#submit-btn');

// 把按钮元素当键，存它的禁用状态
domState.set(button, false);

// 后面可以直接通过按钮取状态
console.log(domState.get(button)); // false
// 修改状态
domState.set(button, true);

再对比Object的局限性：

// 用Object存的话，键会被转成字符串
const obj = {};
obj[button] = false;
console.log(Object.keys(obj)); // ["[object HTMLButtonElement]"]
// 所有对象当键都会变成这个字符串，根本区分不开

三、两者的核心区别：别再搞混了！ #

为啥同名？ #

其实都是从“映射（Mapping）”这个概念来的：

• map()方法是元素→新值的映射，每个元素对应一个新结果；
• Map数据结构是键→值的映射，每个键对应一个值。
  只是一个是方法，一个是数据结构，刚好同名而已，没啥深层关联。

内容的提问来源于stack exchange，提问作者King是太阳