JavaScript 中的数据映射：使用 ECMAScript 2021 的 Array.map

在 JavaScript 中，数据映射是一种非常常见的操作。它允许我们通过对数组中的每个元素执行相同的操作来创建一个新的数组。

近年来，在 ECMA 将 JavaScript 制定为标准之后，JavaScript 数组方法得到了极大的改进，其中包括 Array.map，该方法可以帮助我们更方便地进行数据映射。

什么是 Array.map？

Array.map 是 ECMAScript 2021 中 Array 类的方法之一。它可以接受一个函数作为参数，然后对数组中的每个元素执行该函数，最终生成一个新的数组。

Array.map 的语法如下所示：

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

其中，currentValue 是当前元素的值，index 是当前元素的索引，arr 是当前数组，thisValue 是可选的参数，用于在执行函数时设置 this 的值。

如何使用 Array.map？

在使用 Array.map 之前，我们需要定义一个函数，该函数将被应用于数组的每个元素。在该函数中，我们可以执行任意操作（例如计算、操作、组装等），但是必须返回一个新的值，该值将成为新数组中的元素。

下面是一个简单的示例代码，使用 Array.map 将一个字符串数组转换为数字数组：

const strArr = ["1", "2", "3", "4", "5"];
const numArr = strArr.map(Number);
console.log(numArr); // [1, 2, 3, 4, 5]

此代码首先定义了一个名为 strArr 的字符串数组，然后通过调用 Array.map 来创建一个新的名为 numArr 的数组。在这个过程中，我们传递了一个 Number 函数作为参数，该函数将字符串转换为数字。最后，我们将 numArr 输出到控制台。

更复杂的示例

现在，让我们看一个更复杂的示例。假设我们有一个包含员工信息的数组，每个元素都包含员工的姓名、年龄和工资。我们想要将这个数组转换为包含所有员工工资的新数组，同时过滤掉工资低于 3000 的员工。

以下是实现该逻辑的示例代码：

const employees = [
  { name: "Tom", age: 25, salary: 4000 },
  { name: "Jerry", age: 30, salary: 3200 },
  { name: "Mickey", age: 35, salary: 2800 },
  { name: "Goofy", age: 40, salary: 4500 }
];

const filteredSalaries = employees
  .filter(employee => employee.salary >= 3000)
  .map(employee => employee.salary);

console.log(filteredSalaries); // [4000, 3200, 4500]

在此代码中，我们首先使用 Array.filter 过滤掉工资低于 3000 的员工。然后，我们使用 Array.map 提取所有员工的工资。最后，我们将生成的数组输出到控制台。

这个示例很好地说明了 Array.map 的优点。它允许我们按照我们自己的方式处理数组的元素并生成新的数组。

总结

在本文中，我们学习了如何使用 ECMAScript 2021 中 Array.map 方法实现 JavaScript 中常见的数据映射操作。我们还讨论了一个简单的示例和一个更复杂的示例来演示 Array.map 的使用方式。

使用 Array.map 能够使代码更加简洁、易读和易于维护。但是，我们需要确保定义的映射函数是明确的，并且返回值一致，否则会导致不可预测的结果。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a8b850add4f0e0ff1e4b92