1. 理解映射的核心机制
本节聚焦 Array.prototype.map 的作用与返回值，帮助你建立对映射的直观理解。
1-1 map 的核心语义与返回值
在 JavaScript 中，Array.prototype.map 会对数组中的每一个元素执行传入的回调函数，并返回一个新的数组。关键点是“新数组的长度与原数组相同”，且“原数组不被修改”。
回调函数接收三个参数：当前元素值、当前索引、原数组本身。回调的返回值会成为新数组对应位置的元素。
如果回调函数没有显式返回值，映射结果的对应位置将得到 undefined，这是常见的坑之一。不返回值会产生 undefined。
const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6]1-2 thisArg 的使用与作用域
Array.prototype.map 支持第二个参数，用来绑定回调中的 this 指向。传入 thisArg 可以改变回调中的 this，从而访问外部状态。
如果不传入 thisArg，回调中的 this 将根据严格模式而定，通常是 undefined；在非严格模式下，可能指向全局对象。在复杂对象遍历时，这一点需要注意。绑定行为对回调很重要。
下面的示例展示如何使用 thisArg 在回调中访问外部对象的配置：
const config = { factor: 3 };
const arr = [1, 2, 3];
const result = arr.map(function (x) {return x * this.factor;
}, config);
console.log(result); // [3, 6, 9]2. 基本用法与语法要点
在进入本节前，快速总结 map 的核心特性与边界条件，帮助后续理解更复杂的用法。
2-1 常见的映射用法场景
最常见的应用是“把一个数组映射为另一个结构”。通过回调返回不同的值，可以完成单位换算、字段提取、对象重组等。常见场景包括提取对象数组的某个属性、将单位进行换算、以及构造新的对象数组。
例子：从对象数组中提取名字，或将对象转为简化结构：
const users = [{ id: 1, name: 'Alice', age: 30 },{ id: 2, name: 'Bob', age: 25 }
];
const names = users.map(u => u.name);
console.log(names); // ['Alice', 'Bob']const summaries = users.map(u => ({id: u.id,display: `${u.name}(${u.age})`
}));
console.log(summaries); // [{ id: 1, display: 'Alice(30)' }, { id: 2, display: 'Bob(25)' }]
2-2 避免副作用与链式调用
map 本质上是一个纯函数：它不修改原数组，只返回一个新数组。遵循不可变性可以让代码更稳定，便于调试。
在需要连续多步变换时，可以进行链式调用，将 map 与其他数组方法配合使用，例如 map 之后再 filter、reduce，从而实现复杂的数据流。
示例展示：先映射再筛选：
const nums = [1, 2, 3, 4, 5];
const result = nums.map(x => x * 2).filter(x => x > 5);
console.log(result); // [6, 8, 10]3. 使用场景与实战要点
本节聚焦在实际开发中如何把 map 应用到常见需求上，帮助你将数据转换任务落地为可维护的代码。
3-1 将复杂数据结构扁平化或重构
在处理来自 API 的复杂数据结构时，map 可以把嵌套字段转换为扁平结构，便于界面展示。通过为每个原始元素返回一个新对象，可以实现数据重构。
示例：将含有嵌套地址的用户对象，转换为简单的可展示对象：
const users = [{ id: 1, name: 'Alice', address: { city: 'Beijing', zip: '100000' } },{ id: 2, name: 'Bob', address: { city: 'Shanghai', zip: '200000' } }
];
const rows = users.map(u => ({id: u.id,name: u.name,city: u.address.city
}));
console.log(rows);
// [{ id: 1, name: 'Alice', city: 'Beijing' }, { id: 2, name: 'Bob', city: 'Shanghai' }]
3-2 与其他数组方法的对比与组合使用
在只需要简单转化时，map 是首选；若要聚合结果，可以结合 reduce；若要筛选进入下一步处理，先用 filter 再 map，能提高可读性与性能。
下面是一个对比示例：使用 map 提取价格字段，与使用 reduce 计价的差异。选择合适的方法能提升代码易读性。
const products = [{ name: 'Pen', price: 3 },{ name: 'Notebook', price: 10 },
];
const mapPrices = products.map(p => p.price);
console.log(mapPrices); // [3, 10]const sumPrices = products.reduce((sum, p) => sum + p.price, 0);
console.log(sumPrices); // 134. 实战案例：常见需求的 map 实现
在实际业务中，map 常用于把 API 数据转换为 UI 层更友好的结构，减少嵌套和耦合。通过映射保留必要字段并重组数据，提升渲染效率。
4-1 将对象数组映射为新对象的字段集合
在前端数据处理中，常见需求是从对象数组中提取若干字段，构建新的数组以供渲染。使用 map 可以仅保留需要的字段，减少下游组件的耦合。
示例：从订单数组中提取订单号和金额：
const orders = [{ orderId: 'A100', amount: 250, status: 'paid' },{ orderId: 'A101', amount: 75, status: 'pending' }
];
const summary = orders.map(o => ({orderId: o.orderId,amount: o.amount
}));
console.log(summary);
/* [{ orderId: 'A100', amount: 250 }, { orderId: 'A101', amount: 75 }] */
4-2 将数组元素映射为带条件变化的新结构
通过回调的逻辑判断，可以在 map 内部进行条件分支，生成不同结构的对象。这类场景常见于把 API 的多态返回转为统一的前端结构。
示例：将数字映射成不同文本描述、或者保留数值的同时附加标签：
const values = [0, 1, 2, 3];
const described = values.map(v => v === 0 ? { t: 'empty' } : { t: 'value', v });
console.log(described);
/* [{ t: 'empty' },{ t: 'value', v: 1 },{ t: 'value', v: 2 },{ t: 'value', v: 3 }
] */
