在JavaScript里，数组的map方法是最常用的高阶函数之一。它的核心作用是接收一个回调函数，对数组中的每一个元素依次执行该函数，并把每次执行得到的返回值按顺序组装成一个全新的数组返回。原数组不会被修改，这符合函数式编程中不可变数据的思路，也能帮我们在处理列表数据时减少副作用。
map方法的基本语法
map方法挂载在数组实例上，调用方式非常直观。它接收一个必填的回调函数，以及可选的第二个参数用来指定回调函数内部的this指向。回调函数本身可以接收三个参数，分别是当前遍历到的元素、该元素对应的索引，以及正在被遍历的原数组本身。
最常见的用法只使用第一个参数，也就是当前元素。比如我们想把一组数字都翻倍，就可以直接写一段简洁的变换逻辑。下面这段代码演示了最基础的调用形式，可以看到新数组的长度和原数组完全一致，但内部的值已经全部经过处理。
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(function(item) {
return item * 2;
});
// doubled 结果为 [2, 4, 6, 8]
// numbers 依然是 [1, 2, 3, 4]
回调函数的三个参数
虽然多数场景只需要当前元素，但索引和原数组参数在复杂逻辑中很有用。例如我们想给数组中的每个对象添加它所处的位置信息，就同时用到了item和index。原数组参数则适合在回调中需要参考整体结构时使用，不过日常开发中直接依赖它容易让函数耦合变高，建议谨慎使用。
下面的示例展示如何结合索引生成带序号的描述。这里没有修改原数组中的对象，而是返回了全新的字符串，体现了map“映射而非修改”的特性。这种写法在渲染列表前组装显示文本时非常普遍。
const fruits = ['苹果', '香蕉', '橙子'];
const labeled = fruits.map(function(item, index) {
return (index + 1) + '. ' + item;
});
// labeled 为 ['1. 苹果', '2. 香蕉', '3. 橙子']
map与foreach的区别
很多初学者会混淆map和foreach，因为它们都能遍历数组。关键差异在于：foreach只是依次执行回调，不返回任何值（确切地说是返回undefined），通常用于执行打印、修改外部变量等副作用操作；而map一定会返回一个等长的新数组，语义上明确表示“转换数据”。
如果你调用了map却没有使用它的返回结果，这其实是一种误用，既浪费了内存去创建新数组，又让代码意图变得模糊。反之，当你需要基于旧数组得到新数组时，用map比foreach加push更简洁，也更容易被后来的维护者理解。参考下面的对比代码：
// 使用 foreach 生成新数组（不推荐）
const arr = [10, 20, 30];
const result1 = [];
arr.forEach(function(v) {
result1.push(v + 5);
});
// 使用 map 生成新数组（推荐）
const result2 = arr.map(function(v) {
return v + 5;
});
链式调用与实战场景
由于map返回的是数组，它可以紧接着调用其他数组方法，形成链式操作。比如先通过map把接口返回的用户列表提取出姓名，再用filter筛掉空值，最后用sort排列。这种声明式写法比嵌套循环清晰得多，也是现代前端处理数据的标配。
在实际项目中，map常被用来把后端数据转换成组件需要的格式。假设接口给的是带原始字段的对象数组，我们可以用map一次性映射成表格需要的行列结构。下面示例演示了这种数据整形过程：
const rawUsers = [
{ id: 1, name: '张三', age: 28 },
{ id: 2, name: '李四', age: 34 }
];
const tableData = rawUsers.map(function(u) {
return {
key: u.id,
username: u.name,
years: u.age
};
});
// tableData 可直接交给表格组件渲染
使用时的注意事项
首先，map会跳过数组中缺失的元素（即空位），但不会跳过值为undefined或null的项，回调仍会对它们执行。其次，map并不适合用来做条件筛选，因为无论怎么写，返回数组长度都和原数组一样，若想过滤应该用filter。最后，在回调中务必写上return，一旦忘记返回，新数组对应位置就会是undefined。
当我们处理大型数组时，也要意识到map会开辟新的内存空间。如果数据量极大且只是单纯遍历做某件事，foreach或其他方式可能更省资源。合理选择方法，才能让代码既优雅又高效。
JavaScriptmap_method数组遍历修改时间：2026-08-04 12:03:24