ECMA2019 的标志性变化：Array.flatMap
ECMAScript 2019，也称 ES2019，已经于 2019 年6月被正式发布。除去许多语言功能上的改进外，这个版本中引入了一个非常有趣的新方法，那就是 Array.flatMap()。这个方法在 Array 原型上非常强大，尤其是在处理嵌套数组时，为开发者提供了一种非常简洁而优雅的方式。
在这篇文章中，我们将深入探讨 Array.flatMap() 的用法和特性，并为大家提供一些示例代码。
Array.flatMap() 基础
Array.flatMap() 方法用于首先映射每个元素，然后根据所得到的映射结果（可以是任何格式的数组）最终返回一个新的扁平化数组。就像它的名字一样，这个方法会在内部使用 Array.prototype.map() 方法，之后再对结果使用 Array.prototype.concat() 方法来生成一个新的已扁平化的数组。
以下是 Array.flatMap() 方法的语法：
arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])
callback: 一个函数，用于数组中的每个元素换算出另一个数组，该函数返回一个数组，最终返回的数组将是由该函数生成的数组按顺序连接到一起。它接受 3 个参数：currentValue: 当前被处理的数组元素。index（可选）：当前元素在数组中的索引。array（可选）：flatMap 方法正在操作的数组。
thisArg（可选）：指定执行callback函数时，this关键字绑定的值。
以下是一个简单的例子，它使用 flatMap() 方法将一个二维数组转换为一个扁平数组：
const arr = [[1, 2], [3, 4], [5, 6], [7, 8]]; const flatArr = arr.flatMap(x => x); console.log(flatArr); // [1, 2, 3, 4, 5, 6, 7, 8]
在此示例中，我们定义了一个二维数组，它包含 4 个包含 2 个元素的子数组。使用 flatMap() 方法，我们将它转换为一个扁平数组。
Array.flatMap() 的高级用法
Array.flatMap() 方法可以更深入地处理嵌套数组，让开发者能够更好地处理复杂的数据格式。在这些情况下，开发者可以使用嵌套的 flatMap() 方法，以便在内部映射多个数组元素。
下面是一个示例，它展示了如何使用 flatMap() 处理多维数组：
const arr = [1, 2, [3, 4, [5, 6]]]; const flatArr = arr.flatMap(x => Array.isArray(x) ? x.flatMap(y => y) : x); console.log(flatArr); // [1, 2, 3, 4, 5, 6]
在此示例中，我们定义了一个多维数组，其中第三个元素是包含另外两个整数的数组。我们在 flatMap() 的回调函数中添加了一个条件语句，以检查元素是否是数组。如果是，我们将使用 flatMap() 对其进行扁平化，否则我们将元素添加到新数组中。
现在，让我们以更复杂的方式使用 flatMap() 方法。以下是一个示例，它展示了如何统计一个字符串数组中每个单词出现的次数：
-- -------------------- ---- -------
----- ----- - --------- --------- --------- ------- -------- --------- -------- --------- ------- ------------- ------ ----------
----- ---------- - -----
------------- -- ------------ ---
------------- ----- -- -
-- ----- -- ---- -
------------
- ---- -
--------- - --
-
------ ----
-- ----
------------------------ -- - -------- -- --------- -- --------- -- ------- -- ------------- -- ------ - -在这个示例中，我们首先使用 flatMap() 方法将每个字符串映射为单词数组。之后，我们使用 reduce() 方法对这个扁平化后的数组进行计数，以得到每个单词出现的次数。
Array.flatMap() 方法的指导意义
通过 ECMA2019， Array.flatMap() 可以让开发者更好地处理多层嵌套的数组，这一点在使用许多前端框架时非常有用。使用 flatMap() 方法的 thisArg 参数，开发者可以使用不同的上下文访问函数来更细粒度地控制数组扁平化的逻辑。
如今，flatMap() 已经被广泛使用，成为了许多前端应用程序开发者的首选方法之一。如果您还没有使用这个方法，我们强烈建议您尝试并了解它的特性。
结论
在本文中，我们深入探讨了 Array.flatMap() 方法，并提供了一些使用示例。这个方法的特点是直接扁平化多层嵌套的数组数据，让开发者更加方便有效的处理复杂数据。如果你正在开发JS应用程序，不妨使用 flatMap() 方法来更好的管理你的数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fbbf55447136260161a840