JS map函数|极客笔记

JS map函数

1. 前言

在JavaScript编程中，map函数是一种常用的数组方法。它提供了一种简洁的方式来遍历数组，并对数组的每个元素进行处理。本文将详细讲解map函数的用法和示例，并讨论一些常见的应用场景。

2. map函数的基本语法

在JavaScript中，map函数是Array对象的一个方法。它接受一个函数作为参数，并返回一个新的数组，新数组中的元素是将原始数组中的每个元素传入函数处理后得到的结果。

map函数的基本语法如下：

Array.map(callback(currentValue, index, array), thisArg)

其中，callback是一个回调函数，它接受三个参数：

currentValue：当前元素的值。
index：当前元素的索引。
array：调用map函数的数组。

thisArg是可选的，用于指定在执行callback时使用的this值。

3. map函数的示例

下面通过一些示例代码来演示map函数的用法。

3.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]

在上述示例中，map函数遍历了numbers数组中的每个元素，并将每个元素乘以2。最终得到的结果是一个新的数组doubled，数组中的元素是原始数组中的每个元素乘以2的结果。

3.2 使用箭头函数简化代码

上面的示例可以使用箭头函数来简化代码：

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

const doubled = numbers.map(number => number * 2);

console.log(doubled); // 输出: [2, 4, 6, 8, 10]

使用箭头函数可以使代码更加简洁和易读。

3.3 将字符串转换为大写

const words = ['hello', 'world', 'map', 'function'];

const uppercaseWords = words.map(function(word) {
  return word.toUpperCase();
});

console.log(uppercaseWords); // 输出: ['HELLO', 'WORLD', 'MAP', 'FUNCTION']

在上述示例中，map函数将words数组中的每个字符串转换为大写，并返回一个新的数组。

3.4 返回对象数组的某个属性

const students = [
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 22 },
  { name: 'Charlie', age: 25 }
];

const names = students.map(function(student) {
  return student.name;
});

console.log(names); // 输出: ['Alice', 'Bob', 'Charlie']

在上述示例中，map函数返回了一个由students数组中每个对象的name属性组成的新数组。