ES7 中的 Array.prototype.map() 方法：完整指南
Introduction
Array.prototype.map() 是 ES6 中引入的一种新方法，主要用于对数组的每一项进行操作，返回一个新的数组。在 ES7 中，这个方法有了更多的用法，包括了一些更强大的功能，为我们在前端开发中提供了更多的选择。
Syntax
Array.prototype.map() 函数的语法如下：
-------------------------------- ------ ----- ----------
参数说明：
function(currentValue, index, arr)：必需。函数参数分别表示当前元素、元素索引和数组本身，对数组的每个元素都执行该函数。该函数可以有三个参数。
- currentValue：当前元素的值。
- index：当前元素的索引。
- arr：原始数组本身。
thisValue：可选。对象作为该执行回调时使用，传入函数，用作 this 的值。
示例代码
首先，让我们看一下一个简单的示例，以便更好地理解 map() 方法是如何工作的：
----- --- - --- -- -- -- --- ----- ------ - --------------------- - ------ --- - -- --- -------------------- -- --- -- -- --- ---
上面的代码将数组 arr 中的每个元素都加上了 5，并返回了一个新的数组 newArr。
下面，我们将深入了解 map() 方法的更多功能：
- 省略参数
如果省略函数参数，则 map() 方法将为每个元素调用默认函数。其中元素是未定义的，返回的值是 undefined。
示例代码：
----- --- - --- -- -- -- --- ----- ------ - ---------- -------------------- -- ----------- ---------- ---------- ---------- ----------
- 改变 this 指向
在上面的例子中，thisValue 参数可以用作 this 的值。如果我们使用箭头函数，则可以省略 thisValue 参数。
----- ------ - -
---- ---
-------- ---------- -
----- ---- - ---- --- ----
------ -------------- -- -
------ --- - ---------
---
-
--
------------------------------ -- ------- ------ ------上面的代码将数组 ages 中的每个元素都与 person 对象中的 age 来进行比较。这里我们使用了箭头函数（=>），因为它自动绑定了 this 的值。
- 修改原始数组
可以在 map() 函数内修改原始数组，但请注意，这并不是 map() 的预期用法。在本示例中，我们将原始数组 arr 中的每个元素都乘以 2，并使用 map() 返回了一个新的数组 newArr。但是，由于可以在 map() 函数内部修改原始数组，因此原始数组 arr 中的每个元素也都变成了乘以 2 的值。
----- --- - --- -- -- -- --- ----- ------ - --------------------- ------ ---- - ---------- - --- - -- ------ --- - -- --- -------------------- -- --- -- -- --- --- ----------------- -- --- -- -- --- ---
- 处理多个数组
可以使用多个数组并在单个回调函数中进行处理。下面的示例中，map() 方法将从两个数组中取出相应位置的元素，并将它们加在一起：
----- ---- - --- -- --- ----- ---- - --- -- --- ----- ------ - ---------------------- ------ - ------ --- - ------------ --- -------------------- -- --- -- --
结论
从上面的示例中可以看出，map() 方法在前端开发中非常有用。通过使用 map() 方法，可以发挥数组的最大功效，并始终保持代码的简洁优美。在编写代码时，请记住这个简单易用的方法，并根据需要使用其功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6707859cd91dce0dc869a019