JavaScript 数组 Map() 方法

您是否曾经好奇过 JavaScript 数组 map 方法是什么？它能做什么？或者应该在什么时候使用它？本文正是为您准备的。在进一步了解之前，我们先来了解一下 map 方法的正式定义。

满足方法

根据 MDN 文档：

map() 方法通过对调用数组中的每个元素调用提供的函数来创建一个新数组。

让我们简化这一点。

JavaScript 的 map 方法接受一个数组（数组 1），并通过对给定数组（数组 1）中的每个元素调用一个函数来创建一个新数组（数组 2）。为了进一步解释这一点，我们将通过一个例子来了解 map 方法的作用。

让我们用常规的 for 循环来演示 map 函数的作用。一个经典的例子是，如果我们想要一个包含给定数组中所有元素平方值的数组，我们可以使用 for 循环来实现，如下例所示：

    const array = [2, 5, 9];
    let squares = [];

    for (let i = 0; i < array.length; i++) {
        squares.push(array[i] * array[i]));
    }

    console.log(squares); // [4, 25, 81]
    console.log(array); // [2, 5, 9]

上述代码实现了什么？它循环遍历一个数组，找到数组中每个元素的平方，并将其推送到先前定义的平方数组中。

这与 map 函数的功能类似，只是你不需要定义另一个数组来存放结果。map 函数会自动完成这个操作。所以，让我们使用 map 函数来实现上述功能。

PS：示例中使用了箭头函数。如果您不完全理解其语法，请参考这篇文章。

    const array = [2, 5, 9];
    let squares = array.map((num) => num * num);

    console.log(squares); // [4, 25, 81]
    console.log(array); // [2, 5, 9]

你会发现，使用 map 方法更容易，而且仍然可以完成同样的事情。另外，请注意，初始数组保持不变，这在函数式编程中尤其有用。现在让我们更深入地了解 map 方法。

Map 方法及其语法

map函数的语法如下：

    let newArray = array.map((currentValue, index, array) => {
        // return element to new Array
    });

• newArray - 返回的数组
• array - 调用 map 方法的数组
• currentValue - 正在处理的值
• index - 正在处理的当前值的索引

关于 map 方法，有以下几点需要注意：

1. 它返回一个新数组。
2. 它不会改变调用它的原始数组，即原始数组保持不变。
3. map 函数处理的元素范围在第一次调用之前设置。如果在 map 开始后将元素添加到数组中，则回调不会处理该元素。

何时使用 Map 方法

考虑到还有其他类似的数组方法，例如 ForEach 方法，你可能会想，“我什么时候应该使用（或不使用）map 方法？” 以下问题可以帮助你做出决定：

1. 我是否需要从方法返回一个数组并且返回的数组会被使用吗？
2. 我是否从回调函数返回一个值？

如果您对以上任何一个问题的回答是“是”，则应该使用 map 函数。如果两种情况的答案都是否定的，则应该使用forEach或for..of。

Map 方法示例

除了之前使用的示例之外，这里还有一些使用 map 方法可以执行的操作的示例。

示例 1：从对象数组中提取值

我们希望从一组对象中提取某些值。例如，在一个女孩的数组中，我们想获取女孩的年龄。

    const girls = [
       {name: 'Sarah', age: 19},
       {name: 'Laura', age: 10},
       {name: 'Jessy', age: 29},
       {name: 'Amy', age: 23}];

    let girlsAges = girls.map((girl) => girl.age);

    console.log(girlsAges);  //[19, 10, 29, 23]

示例 2：仅对特定元素应用回调

如果我们希望回调仅应用于数组中的某些元素（比如奇数），我们可以使用 if 语句来执行此操作。

    const numbers = [4, 9, 36, 49];

    let oddSquareRoots = numbers.map((num) => {
       if(num % 2 != 0) {
           return Math.sqrt(num)     
       }
       return num;
    })

    console.log(oddSquareRoots);

或使用三元运算符

    const numbers = [4, 9, 36, 49];

    let oddSquareRoots = numbers.map((num) => {
       return num % 2 !== 0 ? Math.sqrt(num) : num 
    })

    console.log(oddSquareRoots);

然而，更有效的方法是使用 JavaScript 数组过滤方法。这将在我的下一篇文章中讨论。

结论

JavaScript 数组 Map 方法如果使用得当，可以简化你的代码。如果你有其他示例来展示如何使用 map 方法，请在评论区分享。

有任何问题或补充？请留言。

感谢您的阅读:)

无耻的插件🙈

如果您想进一步了解我，请点击这里访问我的网站。