数组map方法怎么用？手把手教你改数据不改原数组

写前端代码时，经常要对一串数字、一列商品价格、或者一堆用户昵称批量处理——比如全部加个前缀、统一转成大写、或者乘以1.1变成含税价。这时候，map 就是那个默默干活还不动你原来数据的靠谱工具。

map 是什么？一句话说清

map 是数组自带的方法，作用是：遍历原数组的每一项，按你写的规则算出一个新值，最后返回一个全新数组，原数组一根毛都不动。

基本写法长这样

const numbers = [1, 2, 3];
const doubled = numbers.map(item => item * 2);
console.log(doubled); // [2, 4, 6]
console.log(numbers); // 还是 [1, 2, 3]，没变

注意：item => item * 2 是一个箭头函数，它接收当前遍历的元素（比如第一次是 1），返回处理后的结果（2）。map 会把每次返回的结果收集起来，组成新数组。

实际场景举几个例子

例1：给每个用户名加个「VIP-」前缀

const users = ['小明', '阿玲', '老张'];
const vipUsers = users.map(name => 'VIP-' + name);
// 结果：['VIP-小明', 'VIP-阿玲', 'VIP-老张']

例2：把商品价格数组统一保留一位小数

const prices = [99, 128.5, 39.99, 200];
const fixedPrices = prices.map(price => parseFloat(price.toFixed(1)));
// 结果：[99.0, 128.5, 40.0, 200.0]

例3：从对象数组里提取某个字段（最常用！）

const products = [
  { id: 1, name: '键盘', price: 299 },
  { id: 2, name: '鼠标', price: 89 },
  { id: 3, name: '耳机', price: 199 }
];
const names = products.map(p => p.name);
// 结果：['键盘', '鼠标', '耳机']

小心这几个坑

• map 一定返回数组，哪怕你 return 空值，也会得到 [undefined, undefined]；
• 它不会跳过空位（比如 [1, , 3] 中间那个空，map 会把它当 undefined 处理）；
• 如果你忘了写 return（或箭头函数没用括号包裹多行代码），结果全是 undefined——记得检查函数有没有明确返回值。

map 和 for 循环有啥区别？

for 循环你要手动建新数组、推值、控制下标；map 把这些全包了，代码更短，逻辑更聚焦在“我要怎么变这个数据”，而不是“我在哪、推到哪、推几个”。

不是所有地方都非用 map 不可，但当你想一对一转换、生成新数组、且不想碰原数据时，它就是最顺手的那个。