JavaScript 数组怎么映射

JavaScript 数组怎么映射

你有没有过这样的经历：把奶茶店的菜单列表改成带价格的新列表，或者把购物车的商品名称统一加上“已到货”标签？这些看似简单的“批量修改”需求，在编程里就可以用数组映射轻松搞定。数组映射就像给数组里的每个元素“派快递”，每个元素都会经过同一个“加工厂”处理，最后得到一个全新的数组，不会影响原来的数组本身。

为什么要单独用映射处理数组？如果手动循环数组修改，不仅要写很多重复代码，还容易写错索引位置。比如你想把数组里的每个数字都乘以2，用循环要写“从第一个元素到最后一个，挨个取出来乘2，再放到新数组”，而映射方法直接帮你把这个重复步骤封装好，写代码又快又不容易出错。

举个最生活化的例子，假设你有一个记录朋友年龄的数组：[18, 22, 25, 30]，想把每个人的年龄都加5算出几年后的年龄。用映射方法处理起来特别简单，只需要调用数组的map方法，在括号里写一个“加工规则”就行。

先看具体代码：

`javascript

const ages = [18, 22, 25, 30];

const futureAges = ages.map(age => age + 5);

`

这里的age就是数组里每个元素的临时变量，第一次循环取18，第二次取22，以此类推。加工规则是age + 5，也就是每个元素都加5。最后得到的futureAges就是新数组：[23, 27, 30, 35]，原来的ages数组还是原来的样子，完全没被改动。

如果是更复杂的需求，比如把一组商品的名称统一加上“促销”标签，也能用映射。假设商品数组是：[{name: "T恤"}, {name: "牛仔裤"}, {name: "帽子"}]，想给每个商品的name属性加上“促销”前缀，代码可以这样写：

`javascript

const goods = [{name: "T恤"}, {name: "牛仔裤"}, {name: "帽子"}];

const saleGoods = goods.map(item => {

return {name: 促销${item.name}};

});

`

这里的item是每个商品对象，加工规则是新建一个和原来结构一样的对象，把name改成“促销”加原来的名称。处理后的新数组就是[{name: "促销T恤"}, {name: "促销牛仔裤"}, {name: "促销帽子"}]，完全符合要求。

要注意两个容易踩的小坑：一是映射必须有返回值，如果忘了写return，新数组里的元素就会变成undefined。比如刚才的年龄例子，如果写成const futureAges = ages.map(age => { age +5 });，没有return，结果就会是[undefined, undefined, undefined, undefined]。二是映射不会修改原数组，如果你想保留原来的数据做对比，用映射就再合适不过了。

总结一下，JavaScript的数组映射就是给数组里的每个元素按统一规则处理，生成新数组的方法，不用手动循环，代码简洁又可靠。从简单的数字运算，到复杂的对象属性修改，映射都能搞定，是开发中处理数组的常用小工具。