在 ECMAScript 2020 中，新增了一个数组方法：flatMap。与 Array.prototype.map() 相似，flatMap 也是遍历数组，执行一个回调函数，生成一个新的数组。但与 map 不同的是，flatMap 对每个元素执行回调函数后，将回调函数的返回值（必须是数组）展开到一个新的数组中，最终返回这个新数组。
以下是 Array.prototype.flatMap(callback) 方法的语法：
array.flatMap(callback(currentValue[, index[, array]])[, thisArg])
其中，callback 函数会针对数组中的每个元素执行一次，具体描述如下：
currentValue：当前元素的值。index（可选）：当前元素的索引。array（可选）：数组本身。- 返回值：需要是一个数组，这个数组会整合到
flatMap()的返回值中。
接下来，我将详细介绍 flatMap 的使用技巧，包括如何处理各种场景的数组。
1、使用 flatMap 扁平化数组
假设我们有一个嵌套数组，我们想将它扁平化成一个一维数组，可以这样做：
const arr = [1, 2, [3, 4], 5, [6, [7, 8]]]; const flattened = arr.flatMap(item => Array.isArray(item) ? item : [item]); console.log(flattened); // [1, 2, 3, 4, 5, 6, 7, 8]
在这里，我们将 Array.isArray 用作判断当前元素是否为一个嵌套的数组，如果是，则将其扁平化，否则将其包裹为一个新数组，以便插入到扁平化的数组中。
2、使用 flatMap 转换数组
我们可以使用 flatMap 将一个类型的数组转换成另一种类型的数组，例如将一个数字数组转换为字符串数组：
const nums = [1, 2, 3, 4, 5];
const strings = nums.flatMap(num => [`Num ${num}`]);
console.log(strings); // ["Num 1", "Num 2", "Num 3", "Num 4", "Num 5"]在这里，我们将 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