js list.map详解|极客笔记

js list.map详解

一、概述

js list.map详解

本文将详细解释 JavaScript 中的 map() 方法。map() 是 JavaScript 数组对象的原生方法，用于遍历数组并返回一个新数组，新数组的每个元素都是通过对原数组中的每个元素应用回调函数得到的结果。

二、`map()` 方法的语法

map() 方法的语法如下：

array.map(function(currentValue, index, array), thisValue)

参数说明：

function(currentValue, index, array)：必需，回调函数，用于处理数组的每个元素；
- currentValue：必需，表示当前正在处理的元素；
- index：可选，表示当前正在处理的元素的索引；
- array：可选，表示调用 map() 方法的数组对象；
thisValue：可选，指定回调函数中的 this 值。

三、`map()` 方法的作用

map() 方法用于遍历数组的每个元素，并对每个元素执行回调函数，最后返回一个新数组。

具体而言，map() 方法将会：

创建一个新数组；
遍历原数组的每个元素；
对每个元素应用回调函数，将返回值添加到新数组中；
返回新数组。

四、`map()` 方法的示例

为了更好地理解 map() 方法的使用方法和效果，我们将通过一些示例来详细说明。

示例 1：数组元素求平方

下面的示例展示了如何使用 map() 方法将数组中的每个元素求平方，并将结果存储在一个新数组中。

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(function(num) {
  return num ** 2;
});

console.log(squaredNumbers);

输出：

[1, 4, 9, 16, 25]

在上述示例中，我们定义了一个名为 numbers 的数组，其中包含了一组数字。接下来，我们使用 map() 方法遍历 numbers 数组的每个元素，并对每个元素执行回调函数，将返回值存储在新数组 squaredNumbers 中。回调函数中的参数 num 表示当前正在处理的元素，通过 num ** 2 的方式求得元素的平方值。最后，我们输出 squaredNumbers 数组，可以看到数组中的元素已经被求平方了。

示例 2：元素转换为大写

下面的示例展示了如何使用 map() 方法将数组中的每个元素转换为大写，并将结果存储在一个新数组中。

const fruits = ["apple", "banana", "orange"];
const uppercaseFruits = fruits.map(function(fruit) {
  return fruit.toUpperCase();
});

console.log(uppercaseFruits);

输出：

["APPLE", "BANANA", "ORANGE"]

在上述示例中，我们创建了一个名为 fruits 的数组，其中包含了一组水果名称。接下来，使用 map() 方法遍历 fruits 数组的每个元素，并调用字符串的 toUpperCase() 方法将其转换为大写形式。最后，我们输出 uppercaseFruits 数组，可以看到数组中的所有元素都已经转换为了大写。

示例 3：对象属性提取

下面的示例展示了如何使用 map() 方法从一组对象中提取指定的属性，并将结果存储在一个新数组中。

const users = [
  { name: "Alice", age: 20 },
  { name: "Bob", age: 25 },
  { name: "Charlie", age: 30 }
];
const userAges = users.map(function(user) {
  return user.age;
});

console.log(userAges);

输出：

[20, 25, 30]

在上述示例中，我们定义了一个名为 users 的数组，其中包含了一组用户对象。用户对象具有 name 和 age 两个属性。接下来，使用 map() 方法遍历 users 数组的每个元素，并从每个用户对象中提取出 age 属性的值。最后，我们输出 userAges 数组，可以看到其中存储了用户数组中所有用户的年龄。