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