JavaScript map 方法

最后修改于 2025 年 4 月 4 日

在本文中，我们将展示如何使用 JavaScript 中的 map 方法转换数组。

数组转换

map 方法创建一个新数组，其中填充了对调用数组中每个元素调用提供的函数的结果。它不会修改原始数组，因此在正确使用时它是一个纯函数。

当您需要根据特定逻辑转换数组中的每个元素时，通常会使用此方法。map 方法为每个元素执行回调函数一次，并根据结果构造一个新数组。

回调函数可以接受三个参数：正在处理的当前元素、它的索引以及调用 map 的数组。map 方法是可链的，并且经常与其他数组方法一起使用。

基本 map 示例

以下示例演示了 map 方法的基本用法。

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);

console.log(numbers);  // Original array unchanged
console.log(doubled);  // New transformed array

我们创建一个数组，并使用 map 将每个数字翻倍。原始数组保持不变。 map() 方法返回一个包含转换后的值的新数组。

$ node main.js
[ 1, 2, 3, 4 ]
[ 2, 4, 6, 8 ]

将对象映射到新结构

map 方法通常用于转换对象数组。

const users = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 30 }
];

const names = users.map(user => user.name);
const ages = users.map(user => ({ age: user.age }));

console.log(names);
console.log(ages);

我们将一个用户对象数组转换为姓名和年龄对象的数组。回调函数从每个对象中提取特定属性。请注意箭头函数中对象字面量周围的括号。

$ node main.js
[ 'John', 'Jane' ]
[ { age: 25 }, { age: 30 } ]

使用 map 与索引参数

回调函数可以访问当前元素的索引。

const fruits = ['apple', 'banana', 'cherry'];
const indexedFruits = fruits.map((fruit, index) => 
  `${index + 1}. ${fruit.toUpperCase()}`
);

console.log(indexedFruits);

我们通过添加它们的位置编号来转换水果数组。索引参数（第二个参数）提供当前元素的位置。我们使用模板字面量进行字符串插值。

$ node main.js
[ '1. APPLE', '2. BANANA', '3. CHERRY' ]

使用外部函数进行映射

回调函数可以在外部定义并传递给 map。

function squareRoot(num) {
  return Math.sqrt(num).toFixed(2);
}

const numbers = [4, 9, 16, 25];
const roots = numbers.map(squareRoot);

console.log(roots);

我们定义一个单独的 squareRoot 函数来计算平方根。map 方法将此函数应用于每个元素。toFixed 方法将结果格式化为小数点后两位。

$ node main.js
[ '2.00', '3.00', '4.00', '5.00' ]

将 map 与其他数组方法链接

map 方法可以与其他数组方法链接。

const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers
  .filter(n => n % 2 === 0)
  .map(n => n * 10)
  .reverse();

console.log(result);

我们首先过滤偶数，然后将它们乘以 10，最后反转数组。每个方法都返回一个新数组，允许方法链。这种方法在函数式编程中很常见。

$ node main.js
[ 60, 40, 20 ]

来源

数组 map - 语言参考

在本文中，我们演示了如何使用 map() 方法在 JavaScript 中转换数组。

作者

我叫 Jan Bodnar，是一位充满激情的程序员，拥有丰富的编程经验。自 2007 年以来，我一直在撰写编程文章。迄今为止，我撰写了 1,400 多篇文章和 8 本电子书。我拥有超过十年的编程教学经验。

列出 所有 JS 数组函数。