在 ECMAScript 2020 中，新增了一个数组方法：flatMap。与 Array.prototype.map() 相似，flatMap 也是遍历数组，执行一个回调函数，生成一个新的数组。但与 map 不同的是，flatMap 对每个元素执行回调函数后，将回调函数的返回值（必须是数组）展开到一个新的数组中，最终返回这个新数组。
以下是 Array.prototype.flatMap(callback) 方法的语法：
------------------------------------- ------- ---------- ---------
其中，callback 函数会针对数组中的每个元素执行一次，具体描述如下：
currentValue：当前元素的值。index（可选）：当前元素的索引。array（可选）：数组本身。- 返回值：需要是一个数组，这个数组会整合到
flatMap()的返回值中。
接下来，我将详细介绍 flatMap 的使用技巧，包括如何处理各种场景的数组。
1、使用 flatMap 扁平化数组
假设我们有一个嵌套数组，我们想将它扁平化成一个一维数组，可以这样做：
----- --- - --- -- --- --- -- --- --- ----- ----- --------- - ---------------- -- ------------------- - ---- - -------- ----------------------- -- --- -- -- -- -- -- -- --
在这里，我们将 Array.isArray 用作判断当前元素是否为一个嵌套的数组，如果是，则将其扁平化，否则将其包裹为一个新数组，以便插入到扁平化的数组中。
2、使用 flatMap 转换数组
我们可以使用 flatMap 将一个类型的数组转换成另一种类型的数组，例如将一个数字数组转换为字符串数组：
----- ---- - --- -- -- -- --- ----- ------- - ---------------- -- ----- ---------- --------------------- -- ----- --- ---- --- ---- --- ---- --- ---- ---
在这里，我们将 nums 数组中的每个数字都包裹在一个字符串中，然后将这些字符串组成了一个新的数组。
3、使用 flatMap 处理异步数据
如果我们需要在一个异步请求中获取多个资源，在每个资源中执行回调函数并将结果组合成一个数组，可以使用 flatMap。
例如，我们请求一个 API，获取一组关键词搜索的结果，并为每个结果调用一个 API，获取它们的详细信息。最后，我们需要得到这些详细信息的数组。
----- ----------- - -------------
----- ------ - ----- ---------------------------------------------------
-------------- -- ----------------
---------- --
------------------- --
--------------------------------------------------
-------------- -- ----------------
-
--
-------------------- -- -- --- -- ------ ----------- ------- -- - --- -- ------ ----------- --------- -- ----在这里，我们首先向 API 发送一个搜索请求，然后从搜索结果中获取每个结果的 ID，使用这些 ID 继续请求详细信息的 API，并使用 flatMap 整合所有的详细信息。
结论
flatMap 是一个非常强大的数组方法，可以解决许多有趣的问题。当你需要像扁平化嵌套数组、数组类型转换等问题时，都可以尝试使用 flatMap。同时，在处理异步数据时，也可以使用 flatMap 更方便地整合多个异步请求的结果。
然而，在使用 flatMap 时，需要谨慎处理返回数组的情况，确保它们能够正确地合并到整个扁平化的数组中。总之，flatMap 是一个值得学习和使用的 ECMAScript 2020 数组方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670498c6d91dce0dc84f69d0