js map()方法|极客笔记

js map()方法

在 JavaScript 中，数组是一种常用的数据结构。它允许我们将一组值存储在一个变量中，并对这组值进行操作。数组提供了许多方法来处理数组中的数据，其中之一就是 map() 方法。

介绍

map() 方法是 JavaScript 数组的内置方法，它用于对数组中的每个元素进行操作，并返回一个新的数组。

该方法接受一个函数作为参数，这个函数应用在数组的每个元素上，然后把每个函数的返回值组成一个新数组返回。

语法如下：

array.map(function(currentValue, index, arr) {
  // 处理每个元素的逻辑...
}, thisValue);

function(currentValue, index, arr) – 必需。函数，当前元素的值、元素的索引和原始数组的引用。函数可以有三个参数：

currentValue – 当前元素的值。
index – 当前元素的索引。
arr – 原始数组的引用。

thisValue – 可选。对象，当执行回调函数时，用作参数的对象。

map() 方法不会对原始数组进行修改，而是返回一个新的数组。如果不需要返回一个新的数组，可以考虑使用 forEach() 方法。

示例

接下来，我们将通过一些示例来详细讲解 map() 方法的用法。

示例 1: 将数组中的每个元素加倍

假设我们有一个数组 [1, 2, 3, 4, 5]，我们想将每个元素都加倍。我们可以使用 map() 方法来实现这个功能。

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

const doubledNumbers = numbers.map(function(num) {
  return num * 2;
});

console.log(doubledNumbers);

运行结果：

[2, 4, 6, 8, 10]

在这个示例中，我们通过 map() 方法遍历了数组 numbers 中的每个元素，并将每个元素乘以 2。然后，我们得到了一个新的数组 doubledNumbers，它包含了每个元素都加倍后的结果。

示例 2: 将字符串数组转换为大写

下一个示例中，我们将演示如何使用 map() 方法将字符串数组中的所有字符串转换为大写。

const words = ["hello", "world", "javascript"];

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

console.log(uppercasedWords);

运行结果：

["HELLO", "WORLD", "JAVASCRIPT"]

在这个示例中，我们使用 map() 方法遍历了字符串数组 words 中的每个元素，并通过调用 toUpperCase() 方法将每个字符串转换为大写。最后，我们得到了一个新的数组 uppercasedWords，它包含了所有字符串都转换为大写后的结果。

示例 3: 获取对象数组的特定属性

map() 方法也可以用于从对象数组中获取特定属性的值。

const players = [
  { id: 1, name: "Alice", score: 100 },
  { id: 2, name: "Bob", score: 150 },
  { id: 3, name: "Charlie", score: 200 }
];

const playerNames = players.map(function(player) {
  return player.name;
});

console.log(playerNames);

运行结果：