在 ES10 中，JavaScript 引入了 Array 的一个新的原型方法：Array.prototype.flatMap()。这个方法与 Array.prototype.map() 和 Array.prototype.flat() 很相似，但是有着其特有的用途和实现方式。在本文中，我们将总结和解释 flatMap() 的用法、语法和示例，并讨论如何在实际应用中使用这个方法。
flatMap() 方法的概述
flatMap() 是一个非常有用的方法，可以让您同时执行 flat() 和 map()。在这个方法内部，flat() 将所有嵌套的数组压平为单个数组，并返回这个数组，而 map() 则将每个元素映射到一个新的数组，并返回该数组。与 map() 不同，flatMap() 在映射之后会将结果合并为一个新的数组。
flatMap() 方法的语法
flatMap() 方法的基本语法如下所示：
arr.flatMap(callback[, thisArg])
其中，callback 是一个回调函数，具有以下三个参数：
- currentValue: 当前被处理的元素。
- index：当前元素在被处理的数组中的索引。
- array：被遍历的整个数组。
thisArg 可选，为回调函数执行时 this 的值。
flatMap() 方法的示例
为了更好地理解 flatMap() 的用法，我们来看几个示例。
示例 1：将字符串数组映射为数字数组
const strArr = ["1", "2", "3", "4"]; const numArr = strArr.flatMap((item) => parseInt(item)); console.log(numArr); // [1, 2, 3, 4]
在这个示例中，我们定义了一个数组 strArr，其中包含四个字符串元素。我们将这个数组传递给 flatMap() 方法，并使用 parseInt() 函数将每个元素从字符串转换为数字。最后，我们得到一个新数组 numArr，其中包含四个数字元素。
示例 2：将原始数组的元素乘以 2
const arr = [1, 2, 3, 4]; const doubledArr = arr.flatMap((item) => [item * 2]); console.log(doubledArr); // [2, 4, 6, 8]
在这个示例中，我们定义了一个数组 arr，其中包含四个数字元素。我们将这个数组传递给 flatMap() 方法，并将每个元素乘以 2。最后，我们得到一个新数组 doubledArr，其中包含四个乘以 2 的数字元素。
示例 3：使用对象映射数组
-- -------------------- ---- -------
----- ----- - -
- ----- ------- ------- -------------------- ------------------- --
- ----- ------- ------- -------------------- ------------------- --
--
----- ------ - -------------------- -- -------------
-------------------- -- -------------------- -------------------
------------------- -------------------在这个示例中，我们定义了一个包含两个用户对象的数组。每个用户对象具有一个名字和一个电子邮件数组。我们将这个数组传递给 flatMap() 方法，并使用一个 arrow function，将每个用户的电子邮件数组映射到一个新的数组中。最后，我们得到了一个新的电子邮件数组，其中包含所有用户的电子邮件地址。
flatMap() 方法的优缺点
虽然 flatMap() 同时执行 flat() 和 map() 很方便，但也有一些不足之处。与 map() 不同，flatMap() 方法不允许您在映射之后再次进行筛选器操作，这可能会导致您编写的代码变得更加混乱，缺乏可读性。此外，如果您的映射结果中仍然包含数组，那么您可能需要使用额外的层级，以生成您所需要的最终结果。
如何在实际应用中使用 flatMap() 方法
虽然 flatMap() 方法的优缺点显而易见，但在实际应用中，它仍然是一个非常有用的方法。通过将两个方法的操作合并到一个方法中，您可以在代码中减少一些重复的代码，使您的代码更加清晰和易读。此外，flatMap() 也可以使您的代码更加简洁和整洁。
请注意，由于 flatMap() 是 ES10 中新增加的方法，因此在使用它之前，您需要确定您的应用所用的浏览器或 Node.js 版本是否支持该方法。如果您必须在某些版本的浏览器或 Node.js 中使用 flatMap()，则可以使用 polyfill 或者使用另外的库，如 Lodash。
总结
在本文中，我们学习了 flatMap() 方法的用法、语法和示例。在实际应用中，您可能会发现这个方法对您的项目非常有用。请记住，flatMap() 方法是一种优雅的方式，将 flat() 和 map() 操作合并为一个操作，并且可以帮助您让您的代码更加清晰易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654f2dc37d4982a6eb82bb63