在 JavaScript 中，map 方法是一个非常常用的数组方法，多数情况下我们在使用 map 方法后还需要使用 flat 方法来将多层嵌套的数组展开。这种组合的使用方式有时候会让代码显得不够简洁和清晰，而 ES7 中新增的 flatMap 方法可以很好地替代这种组合方式，使代码更加优雅。
什么是 flatMap 方法
flatMap 方法是 ES7 中新添加的一个数组方法，它的目的是将嵌套的数组（多维数组）展开并映射到一个新的数组中。同时，flatMap 方法还支持将一维数组映射为多维数组。
flatMap 方法可以理解为 map 方法和 flat 方法的组合使用，这样就可以指定一个映射函数，返回值会自动被展开，展开后的结果组成一个新的数组返回。
flatMap 方法的语法
flatMap 方法的语法与 map 方法类似，除了映射函数之外，还可以有一个可选的参数来指定结果数组的维度。语法如下所示：
------------------------------------ ------ ----- ----------
其中，currentValue 表示当前正在处理的数组元素，index 表示当前正在处理的元素的下标，arr 表示正在操作的数组对象，thisValue 表示可选参数，定义了 this 关键字在执行回调函数时所引用的对象。
flatMap 方法的应用
替代 map 和 flat
在使用 flatMap 方法之前，让我们先来看一下使用 map 和 flat 方法的示例：
--- ----------- - ---- --- --- --- --- ---- --- --------- - ----------------- -- ------- -- - - ----------- ----------------------- -- ---------------
在这个示例中，我们先使用 map 方法将数组元素进行映射，然后使用 flat 方法将嵌套的数组展开。在这种情况下，使用 flatMap 方法能够使代码更加简洁和可读：
--- ------------ - --------------------- -- ------- -- - - ---- -------------------------- -- ---------------
处理嵌套数组
flatMap 方法可以很好地处理多层嵌套的数组，它不仅能够展开多层嵌套的数组，还能将它们映射到单个数组中：
--- ----------- - ----- ---- ---- --- --- ----- --- ------------ - --------------------- -- -------------- -- - - ---- -------------------------- -- --- -- -- -- --- ---
在这个示例中，我们首先使用 flat 方法展开嵌套的数组，然后使用 map 方法将新的数组中的每个元素进行映射，最终得到一个展开的数组。
一维数组和多维数组之间的转换
flatMap 方法还支持将一维数组映射为多维数组，这可以通过指定结果数组的维度来实现，示例代码如下：
--- ----- - --- -- --- --- ------------- - --------------- -- --- - - ---- --------------------------- -- --- -- -- -- -- -- --- ------------- - --------------- -- ---- - - ----- --------------------------- -- ---- --- --- --- --- ---
在这个示例中，我们使用 flatMap 方法映射了一个一维数组，并指定了结果数组的维度为一维数组和二维数组。
注意事项
需要注意的是，flatMap 方法返回的是一个新的数组，而原数组并不会发生改变。
此外，在使用 flatMap 方法时，如果映射函数返回的是一个空数组或者 null 或者 undefined，那么这个空数组或者 null 或者 undefined 会被忽略，不会被包含在最终的结果数组中。
结论
flatMap 方法是 ES7 中一个非常强大的方法，它支持将多维数组展开，并能够指定结果数组的维度，还能够简化使用 map 和 flat 方法的组合方式，使代码更加优雅。在实际开发中，合理使用 flatMap 方法能够让代码更加简洁和可读。
希望本篇文章对您理解 ES7 的 flatMap 方法有所帮助，同时也希望您能够合理地应用 flatMap 方法来提高代码的性能和可读性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673927c4317fbffedf156835