前端开发中，数组操作是非常常见的操作。在 ECMAScript 2021 中，新增了一个非常实用的数组操作方法：Array.prototype.flatMap。它可以一次性完成推平数组和映射操作的结合，能够更加方便地处理各种数据，提高开发效率。
为什么需要 flatMap 方法
我们通常在处理数组时需要完成两个操作：
- 推平数组：将嵌套的数组打平成一个一维数组；
- 映射操作：对于数组中的每个元素进行一定的操作，返回一个映射后的新数组。
在之前的版本中，我们往往需要使用 Array.prototype.flatMap 和 Array.prototype.map 来分别完成这两个操作。例如：
----- --- - --- -- --- ----- ------ - ------------------- -- ------- ----- - ---- -- --- -- -- -- -- --
这段代码实现了一个非常简单的功能：将数组 arr 映射成一个新数组，新数组中的每个元素是原数组中的元素和元素的两倍。如果在这个过程中需要将嵌套的数组推平，我们需要再使用 flatMap 方法，例如：
----- --- - ---- --- --- ---- ----- ------ - ------------------- -- ------------- -- - - ---- -- --- -- -- --
显然，这种方式过于繁琐，代码的可读性和可维护性都不够好。因此，为了方便开发人员进行数组操作，我们需要推广 flatMap 方法。
flatMap 方法的使用
flatmap 方法接收一个参数 - callback 函数，它可以接收以下参数：
- currentValue：当前被遍历的元素。
- index（可选）：当前元素的索引。
- array（可选）：当前元素所属的数组对象。
我们来看看如何使用 flatMap 方法。
示例 1
----- --- - --- -- --- ----- ------- - ------------------- -- ------- ----- - ---- --------------------- -- --- -- -- -- -- --
上述代码中，我们将数组 arr 映射成一个新数组，新数组中的每个元素是原数组中的元素和元素的两倍。
示例 2
----- --- - ---- ------ ---- ----- ------- - ------------------- -- ------------- -- - - ---- --------------------- -- --- -- -- --
上述代码中，数组 arr 中包含两个一维数组 [1, 2] 和 [3, 4]。在 flatMap 方法中，我们对数组 arr 的每个嵌套数组都执行了 map 操作，将其中的元素乘以 2，最终将得到一个一维数组。
示例 3
----- --- - --- -- -- - - - - -- --- ----- ------- - ------------------- -- --------- --------------------- -- --- -- -- -- --
上述代码中，数组 arr 包含了三个元素和四个空位置。flatmap 方法会自动跳过数组中的空位。
flatMap 方法的注意事项
1. 只能展开一层
flatMap 方法只能展开一层嵌套数组，如果需要展开更多的层，请自行编写递归函数。
2. 需要返回一个数组
在使用 flatMap 方法时，回调函数必须返回一个数组。
如果返回的是一个非数组对象，它将被自动转换为包含在单个元素数组中，例如：
----- --- - --- -- --- ----- ------- - ------------------- -- ------- --------------------- -- --- -- --
回调函数返回的是原始类型，而不是数组，因此 flatMap 方法会将其包装在数组中。
总结
在 ECMAScript 2021 中，新增加的 flatMap 方法可以让我们更加便捷、高效地处理数组，极大提高了开发效率。其具有真正的实用性，能够更加方便的处理各种数据。
因此，在实际的项目开发中，我们应该充分利用 flatMap 方法，降低代码的复杂度和维护难度，同时还可以提高开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ed3f26f6b2d6eab3762e62