你有没有遇到过这样的场景：拿到一串商品价格，想给每个价格加个税；或者有一组用户ID，需要批量拼成API请求地址；又或者要把后台返回的原始数据，快速转成页面能直接渲染的对象结构？这时候，map 就是那个默默扛活、不改原ref="/tag/146/" style="color:#874873;font-weight:bold;">数组、还特别干净利落的工具。
map 是什么？一句话说清
map 是数组的内置方法，作用是对数组中每个元素调用一次传入的函数，并把每次调用的返回值组成一个新数组。它不会修改原数组，只负责“映射”出新结果。
基本写法长这样
语法很简单：
const newArr = arr.map(函数)这个函数会自动接收三个参数：当前元素、当前索引、原数组。通常我们只用第一个：
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6]
console.log(numbers); // [1, 2, 3]（原数组没变）实战小例子，一看就懂
例1：给商品列表加单位
const prices = [29.9, 58.5, 120];
const priceLabels = prices.map(price => `¥${price.toFixed(2)}`);
// ['¥29.90', '¥58.50', '¥120.00']例2：从用户数组里提取昵称
const users = [
{ id: 1, name: '张三', nickname: '山风' },
{ id: 2, name: '李四', nickname: '阿木' },
{ id: 3, name: '王五', nickname: '小满' }
];
const nicknames = users.map(u => u.nickname);
// ['山风', '阿木', '小满']例3：生成一组带序号的按钮文案
const steps = ['填写信息', '上传证件', '等待审核'];
const buttons = steps.map((step, index) => `第${index + 1}步：${step}`);
// ['第1步：填写信息', '第2步：上传证件', '第3步：等待审核']注意两个常见坑
• 如果 map 回调里忘了 return，新数组对应位置就是 undefined：
[1, 2, 3].map(x => { x * 2 }); // [undefined, undefined, undefined]✓ 正确写法是：x => x * 2（箭头函数单表达式自动返回），或 x => { return x * 2; }
• map 只遍历有值的索引，对稀疏数组里的空位不执行回调：
const arr = [1, , 3]; // 索引1是空位
arr.map(x => x * 10); // [10, , 30]（中间还是空位）和 for 循环比有啥优势？
不用手动建新数组、不用写 i++、不用管索引边界。逻辑更聚焦在“我要把每个元素变成什么样”，而不是“我在哪、还要不要继续”。代码更短，也更不容易出错——尤其当你顺手改成 forEach 或 filter 时，语义清晰不混淆。