JavaScript – 数组 map() 方法

简介

JavaScript 中的 Array.map() 方法用于对数组中的每个元素进行操作后，生成一个新数组。这个新数组由原数组中的元素转变而来，通常情况下转变的形式为对元素执行某种函数操作后返回一个新的值。

自 JavaScript ES6 版本以来，使用箭头函数表达式使 map() 方法更加简便易用。下面我们来看一个例子：

// ES6 箭头函数
let numbers = [2, 4, 6, 8, 10];
let doubles = numbers.map(num => num * 2);
console.log(doubles);  // [4, 8, 12, 16, 20]

在这个例子中，我们首先定义了一个数组 numbers，由 5 个偶数组成。接下来，我们使用 map() 方法将每个元素取两倍，并用变量 doubles 保存返回的新数组。最后，使用 console.log() 打印这个新数组，输出结果为 [4, 8, 12, 16, 20]。

基本语法

map() 方法的基本语法如下：

array.map(func(currentValue, index, arr))

其中，

array：必需。要进行映射操作的数组对象。
func：必需。该参数是函数，它执行有三个参数：currentValue，index 和 arr。分别表示正在处理的当前元素的值，当前元素的索引和正在处理的原数组。
currentValue：必需。当前元素的值。
index：可选。当前元素的索引值。
arr：可选。当前元素所在的原始数组。

下面，我们通过一个完整的例子展示 map() 方法如何使用。

// 声明一个原始数组
let students = [
  { name: "Tom", age: 18 },
  { name: "Jerry", age: 20 },
  { name: "John", age: 25 },
  { name: "Alex", age: 28 }
];

// 使用 map() 方法生成一个新数组
let studentNames = students.map((item) => item.name);

// 打印新数组
console.log(studentNames); // ["Tom", "Jerry", "John", "Alex"]

在这个例子中，我们声明了一个包含四个对象的数组 students，并使用 map() 方法将所有对象的 name 属性映射到了一个新数组 studentNames 中。最后，执行 console.log() 输出结果。

参数

map() 方法支持三个可选参数，分别是thisArg，arg 和 iterator。

thisArg：可选，指定调用 func 函数时的 this 值（即 this 关键字指向的对象）。如果不指定，则默认为当前运行环境的全局对象（如浏览器环境下为 window 对象）。
arg：可选，在调用 func 函数时需要传入的额外参数。
iterator：可选，用于替代默认的迭代器。

示例

下面是 map() 方法的一些简单的演示。

将所有元素取平方

let numbers = [1, 2, 3, 4];

let squares = numbers.map((item) => item ** 2);

console.log(squares); // [1, 4, 9, 16]

在这个例子中，我们定义了一个包含四个数字的数组 numbers，并使用箭头函数将其每个值都取平方。

数组去重复

let items = ["a", "b", "a", "c", "d", "e", "d", "f", "g", "c"];

let uniqueItems = items.filter((value, index, self) => {
  return self.indexOf(value) == index;
});

console.log(uniqueItems); // ["a", "b", "c", "d", "e", "f", "g"]

在这个例子中，我们定义了一个包含 10 个字符串元素的数组 items。为了去掉其中的重复元素，我们使用了 filter() 方法并在其中嵌套了一个 indexOf() 函数。由于 indexOf() 将返回第一个匹配到的元素的索引，因此我们将其与当前元素的索引进行比对，若相等则加入数组。

字符串转换为数字

let strings = ["123", "456", "789"];

let numbers = strings.map((item) => parseInt(item));

console.log(numbers); // [123, 456, 789]

在这个例子中，我们定义了一个包含 3 个字符串元素的数组 strings。我们使用了 map() 方法将字符串类型的元素转换为数字类型的元素，并将其保存到了新数组 numbers 中。最终，我们输出 numbers 数组的值。

对象映射转换

let products = [
  { name: "Apple", price: 1.99 },
  { name: "Banana", price: 2.99 },
  { name: "Orange", price: 2.49 }
];

let salePrices = products.map((item) => {
  return {
    name: item.name,
    salePrice: item.price * 0.8
  };
});

console.log(salePrices);

在这个例子中，我们定义了一个包含了三个对象的数组 products，每个对象都包含 name 和 price 两个属性。我们使用了 map() 方法将每个对象中的 name 和 price 转换为一个新数组 salePrices 中的 name 和 salePrice 属性。其中 salePrice 表示打折后的价格，即原价格的 0.8 倍。最终，我们输出了 salePrices 数组的值。