在前端开发中，我们经常需要对数组进行操作，针对数组中的每个元素进行迭代，然后处理元素并得到一个新数组。这时候，我们可能会用到 Array.map() 方法来实现这个功能。ES2020 中的 FlatMap() 方法在一定程度上能够代替 map()，并且在操作嵌套数组时表现得更为优秀。
什么是 FlatMap？
FlatMap 是 ES2020 中的新方法，它结合了数组的 map() 和 flat() 方法，能够同时处理 map() 和 flat() 方法的效果。FlatMap() 可以对给定的数组中的每个元素执行一个映射操作，并将结果与映射的元素的索引位置合并成一个新数组。
FlatMap 的语法
下面是 FlatMap 方法的语法：
arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])
- arr：这是必需的。要应用 flatMap() 方法的数组。
- callback：这也是必需的。作为数组中的每个元素映射的函数。
- currentValue：要映射的当前元素的值。
- index（可选）：当前元素的索引值。
- array（可选）：处理的数组。
- thisArg（可选）：执行 callback 时的 this 值。
当执行 flatMap() 时，callback 函数将会获取到 currentValue 作为它的参数。callback 函数可以返回一项，返回一个数组或者返回 null 或 undefined。而这就是 flatMap() 的神奇之处了，它会将返回的结果展开，并将其合成一个新数组。
FlatMap 的应用
实际上，FlatMap 的应用场景还是比较多的。假如我们在获取接口数据时，接口返回的数据可能是数组嵌套形式。但是在处理数据的时候，我们并不需要层级结构的数据，需要把它们合并成一个扁平化的数组。也就是说，我们需要把了解结构的嵌套数组展平的扁平化数组。
下面是一个示例：
-- -------------------- ---- -------
----- ---- - -
-
--- --
------ ------
----- -
- ----- ----- --
- ----- ------------ -
-
--
-
--- --
------ ------
----- -
- ----- ----- --
- ----- ------- -
-
--
-
--- --
------ ------
----- -
- ----- ----- --
- ----- ----- -
-
-
--
----- ---- - ----------------- -- ----------------- -- -----------
------------------运行结果：
["web", "JavaScript", "web", "React", "web", "Vue"]
从示例代码可以看出，flatMap() 可以很好地将数组结构进行展开，也就是将 tags 数组展开成了一个扁平化数组，减少了操作的复杂性并且使代码更容易理解。
总结
FlatMap() 是一种处理迭代嵌套数组的有效方法，可以使用它简化处理数组所需的代码逻辑。FlatMap() 的语法非常简单，与 Array.map() 类似，但返回的结果是一个扁平化数组，更容易理解及处理。
当然，FlatMap() 并不是完美的，出现过一些性能问题。在大数组情况下，性能可能受到一定的影响。因此，在确保代码可读性的前提下，我们需要考虑性能问题和其它结合场景的更好方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d377348841e98949f3d79