JavaScript中的map方法|极客笔记

JavaScript中的map方法

在JavaScript中，map() 方法是一个很有用的数组方法，它可以让我们对数组中的每个元素都执行同一个操作，然后返回一个新数组。在本文中，我们将详细探讨map()方法的用法和示例。

语法

map() 方法的语法如下：

array.map(function callback(currentValue, index, array) {
    // 返回一个新数组
}, thisArg)

在这个语法中，array 是要操作的原始数组，callback 是要对每个元素执行的函数，currentValue 是当前正在处理的元素的值，index 是当前元素的索引，array 是原始数组本身，thisArg 是可选的，在 callback 函数中的 this 值。

示例

让我们看一个简单的示例来理解map() 方法的用法。假设我们有一个包含一组数字的数组，现在我们想要将每个数字都乘以2并返回一个新数组。我们可以使用map() 方法来实现这个操作。

// 定义一个包含一组数字的数组
const numbers = [1, 2, 3, 4, 5];

// 使用map()方法将每个数字乘以2
const doubledNumbers = numbers.map(function(num) {
    return num * 2;
});

console.log(doubledNumbers);

在上面的示例中，我们定义了一个包含一组数字的数组 numbers，然后使用 map() 方法将每个数字乘以2，并将结果保存在 doubledNumbers 变量中。最后，我们打印了 doubledNumbers 数组。运行以上代码，将会输出：

[2, 4, 6, 8, 10]

使用箭头函数

在上面的示例中，我们使用了一个普通的匿名函数作为map() 方法的回调函数。实我们也可以使用箭头函数来更简洁地定义回调函数。让我们用箭头函数重写上面的示例：

// 使用箭头函数重写map()方法
const doubledNumbers = numbers.map(num => num * 2);

console.log(doubledNumbers);

这里我们使用了箭头函数 num => num * 2 来代替传统的匿名函数。箭头函数是ES6中的新特性，它更简洁并且更易读。运行以上代码，输出仍然是：

[2, 4, 6, 8, 10]

返回新数组

需要注意的是，map() 方法返回的是一个新数组，原始数组并没有被修改。让我们看一个示例来验证这一点：

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

const newArray = originalArray.map(num => num * 3);

console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(newArray); // [3, 6, 9, 12, 15]

在这个示例中，我们可以看到原始数组 originalArray 并没有被修改，在 map() 方法执行后，我们得到了一个新数组 newArray，其中的每个元素都是原始数组中对应元素乘以3的结果。

处理对象数组

除了处理数字类型的数组，我们还可以使用 map() 方法处理对象数组。假设我们有一个包含学生信息的对象数组，现在我们想要将每个学生的姓名变成大写并返回一个新数组：

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

const upperCaseNames = students.map(student => ({ name: student.name.toUpperCase(), age: student.age }));

console.log(upperCaseNames);

在这个示例中，我们使用箭头函数将每个学生对象中的姓名改为大写，然后返回一个新数组 upperCaseNames。运行以上代码，输出为：

[
    { name: "ALICE", age: 20 },
    { name: "BOB", age: 22 },
    { name: "CHARLIE", age: 21 }
]

使用 map() 方法实现数组方法

除了简单的映射操作，我们还可以利用 map() 方法实现其他数组方法。比如，我们可以使用 map() 方法来实现 filter() 方法：

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

const filteredNumbers = numbers.map(num => {
    if (num % 2 === 0) {
        return num;
    } else {
        return null;
    }
}).filter(num => num !== null);

console.log(filteredNumbers);

在这个示例中，我们首先使用 map() 方法将所有偶数返回，不是偶数的元素返回为null，然后再使用 filter() 方法过滤掉值为null的元素，从而实现了自定义条件的过滤操作。