js map函数详解

js map函数详解

在JavaScript中，map()函数是一个高阶函数，它接收一个回调函数作为参数，对数组中的每个元素都执行该回调函数，并返回一个新的数组，新数组的每个元素为原数组中对应元素经过回调函数处理后得到的结果。在本文中，我们将详细介绍map()函数的用法及其示例。

基本语法

map()函数的基本语法如下：

array.map(callback(currentValue[, index[, array]])[, thisArg])

• array：要操作的数组
• callback：回调函数，接收三个参数
  • currentValue：当前元素的值
  • index（可选）：当前元素的索引
  • array（可选）：原数组本身
• thisArg（可选）：执行回调函数时的this值

map()函数会返回一个新数组，新数组的每个元素由回调函数处理得到。

示例

示例1：将数组中的每个元素乘以2

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(function(number) {
  return number * 2;
});

console.log(doubled);

运行结果：

[2, 4, 6, 8, 10]

在这个示例中，我们定义了一个数组numbers，然后使用map()函数将数组中的每个元素乘以2，最终得到新的数组doubled。

示例2：提取对象数组中的某个属性

const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 35 }
];

const names = users.map(function(user) {
  return user.name;
});

console.log(names);

运行结果：

['Alice', 'Bob', 'Charlie']

在这个示例中，我们定义了一个对象数组users，然后使用map()函数提取每个对象中的name属性，最终得到包含所有name属性值的新数组names。

注意事项

• map()函数不会修改原数组，而是返回一个新数组。
• 回调函数中的返回值将作为新数组中对应位置的元素。
• 如果回调函数有返回值，新数组中会包含这个返回值；如果没有返回值（即回调函数内没有return语句），新数组对应位置的元素为undefined。
• map()函数对原数组中每个元素执行一次回调函数，不会跳过任何元素。如果原数组有空位，map()函数跳过空位。
• 如果需要在回调函数中访问原数组的其他元素，可以使用index和array参数。

总结

map()函数是一个非常有用的数组方法，可以对数组中的每个元素进行处理，生成一个新的数组，常用于数据转化、提取等操作。掌握map()函数的基本用法，能够更方便地对数组进行操作，提高编程效率。