在 ES10 中，新增了一个方法叫做 flatMap，这个方法和 map 方法有些相似，但是又有一些不同。许多人认为 flatMap 方法是为了替代 replace 方法而存在的，但事实上，它是一个独立的存在，具有不同的用途和功能。
什么是 flatMap 方法？
在介绍 flatMap 方法之前，我们先来回顾一下 map 方法。map 方法是 JavaScript 中非常常用的一个方法，它可以对数组中的每个元素进行操作，并返回一个新的数组。例如，我们可以使用 map 方法将数组中的每个元素都加上 1：
----- --- - --- -- -- --- ----- ------ - --------- -- - - --- -------------------- -- --- -- -- --
flatMap 方法的作用和 map 方法类似，但是它可以将返回的数组“展开”，也就是将嵌套的数组变成扁平化的数组。例如，我们可以使用 flatMap 方法将数组中的每个元素都加上 1，并且将结果展开：
----- --- - ----- --- --- ----- ----- ------ - ------------- -- ------- -- - - ---- -------------------- -- --- -- -- --
这里的 flatMap 方法首先对数组中的每个元素调用了 map 方法，将其中的每个元素都加上 1，然后将结果展开成一个扁平化的数组。
flatMap 方法的特点
除了可以将嵌套的数组展开之外，flatMap 方法还有一些其他的特点：
1. 可以返回一个空数组
当 flatMap 方法的回调函数返回一个空数组时，flatMap 方法会将这个空数组“消失”，也就是将它从最终的结果中移除。例如，我们可以使用 flatMap 方法将数组中的偶数加上 1，并且将奇数过滤掉：
----- --- - --- -- -- ---
----- ------ - ------------- -- -
-- -- - - --- -- -
------ -- - ---
- ---- -
------ ---
-
---
-------------------- -- --- --这里的 flatMap 方法首先判断每个元素是否为偶数，如果是偶数，则将它加上 1 并返回一个包含这个新元素的数组；如果是奇数，则返回一个空数组。由于返回的数组可能为空，因此最终的结果中并不包含原数组中的奇数。
2. 可以返回一个嵌套的数组
当 flatMap 方法的回调函数返回一个嵌套的数组时，flatMap 方法会将这个嵌套的数组展开。例如，我们可以使用 flatMap 方法将数组中的每个元素都加上 1，并且将结果嵌套在一个数组中：
----- --- - --- -- -- --- ----- ------ - ------------- -- --- - ----- -------------------- -- ----- ---- ---- ----
这里的 flatMap 方法首先对数组中的每个元素都加上 1，并将结果嵌套在一个数组中返回。由于返回的数组是嵌套的，因此最终的结果中也是一个嵌套的数组。
3. 可以处理异步操作
由于 flatMap 方法返回的是一个数组，因此我们可以将它和 Promise.all 方法结合使用，来处理异步操作。例如，我们可以使用 flatMap 方法和 fetch 方法来获取多个网页的标题：
----- ---- - - ------------------------ ------------------------- ------------------------ -- ----- -------- - ------------ -- ------------------- -- ------------- --------------------- ------------- -- -------------------- -- --------------------------------------- ------------ -- ---------------------
这里的 flatMap 方法首先对所有的网页内容调用了 match 方法，提取出了每个网页的标题，并将它们嵌套在一个数组中返回。由于 Promise.all 方法返回的是一个包含多个 Promise 的数组，因此我们可以使用 flatMap 方法将所有的标题“展开”，并将它们作为最终的结果输出。
总结
flatMap 方法是 JavaScript 中一个非常实用的方法，它可以将嵌套的数组展开，并且具有一些其他的特点，例如可以返回一个空数组、可以返回一个嵌套的数组，以及可以处理异步操作。了解 flatMap 方法的用法和特点，可以帮助我们更加高效地编写 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ffb6f4d10417a222af275b