在 ES6 中，我们已经学习了 Array.prototype.map() 方法，它可以将数组中的每个元素映射到一个新的数组中。但是，如果我们想要将每个元素映射到多个元素，并将这些元素组合成一个新的数组，我们该怎么办呢？这时候，ES12 中的 Array.prototype.flatMap() 方法就派上用场了。
介绍
Array.prototype.flatMap() 方法可以将一个数组映射到一个新的数组中，并将这些新的数组组合成一个新的数组。具体来说，它会先使用 map() 方法将每个元素映射到一个新的数组中，然后将这些新的数组展平成一个新的数组。
flatMap() 方法的语法如下：
----------------------------------- ------- ---------- ---------
其中，callback 是一个函数，它的参数和 map() 方法的 callback 参数一样，currentValue 是当前处理的元素，index 是当前处理元素的索引，array 是原始数组。
应用实践
我们来看一个简单的例子，假设我们有一个二维数组，每个子数组都包含一些数字，我们想将这些数字相加并返回一个新的数组。我们可以使用 map() 方法来实现这个功能，然后使用 flat() 方法将结果展平。这个过程可以用下面的代码来实现：
----- --- - ---- --- --- --- --- ---- ----- ------ - ---------------- -- ------------------- ---- -- --- - ---- ----------- -------------------- -- --- -- ---
但是，使用 flat() 方法有一个问题，就是如果我们的数组中有嵌套数组，那么我们需要多次调用 flat() 方法才能将所有的嵌套数组展平。这时候，我们可以使用 flatMap() 方法来简化这个过程。下面的代码演示了如何使用 flatMap() 方法来实现上面的功能：
----- --- - ---- --- --- --- --- ---- ----- ------ - -------------------- -- ------------------- ---- -- --- - ---- ---- -------------------- -- --- -- ---
可以看到，使用 flatMap() 方法可以将代码简化了很多。
除了上面的例子，flatMap() 方法还可以用于处理嵌套数组、过滤数组等等。下面的代码演示了如何使用 flatMap() 方法来过滤数组：
----- --- - --- -- -- -- --- ----- ------ - ----------------- -- --- - - --- - - ----- - ---- -------------------- -- --- --
可以看到，我们只返回了偶数，使用 flatMap() 方法可以非常方便地实现这个功能。
总结
ES12 中的 Array.prototype.flatMap() 方法可以将一个数组映射到一个新的数组中，并将这些新的数组组合成一个新的数组。它可以简化代码，并且可以用于处理嵌套数组、过滤数组等等。在实际开发中，我们可以根据具体的需求来选择使用 map() 方法还是 flatMap() 方法，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/663e4f68d3423812e4c83a3d