JavaScript | 数组.flatMap()

在 JavaScript 中，flatMap() 是一个数组方法，用于将原始数组的每个元素应用于提供的函数，然后将结果压平成一个新数组。它将对原始数组中的每个元素执行一个映射函数，并将映射结果合并为一个新数组。

语法

array.flatMap(callback[, thisArg])

• callback：一个用来生成新数组元素的回调函数，可以有三个参数：currentValue（当前元素的值）、index（当前元素的索引）和 array（调用 flatMap() 方法的数组本身）。
• thisArg（可选）：执行回调函数时使用的 this 值。

返回值

flatMap() 方法返回一个新数组，其元素是原始数组经过提供的回调函数处理后的结果。如果回调函数返回的是一个数组，则会将该数组的元素逐个添加到新数组中，而不是将整个数组添加到新数组中。

示例

const arr = [1, 2, 3, 4, 5];

const mappedArray = arr.flatMap((num) => [num * 2]);
console.log(mappedArray);
// Output: [2, 4, 6, 8, 10]

在上面的示例中，我们将 flatMap() 方法应用于原始数组 [1, 2, 3, 4, 5]。回调函数 (num) => [num * 2] 接收原始数组中的每个元素，并将其乘以 2。由于回调函数返回一个包含一个元素的数组，所以新数组将包含每个元素乘以 2 的结果。

与 map() 方法的区别

flatMap() 和 map() 方法相似，它们都返回一个新数组，并且在每个元素上应用回调函数。然而，flatMap() 方法在回调函数的结果是数组时，会将该数组打平，而 map() 方法不会。

下面是一个 map() 方法的示例：

const arr = [1, 2, 3, 4, 5];

const mappedArray = arr.map((num) => [num * 2]);
console.log(mappedArray);
// Output: [[2], [4], [6], [8], [10]]

如上所示，map() 方法返回了一个包含每个元素乘以 2 结果的数组，而不是一个由这些结果组成的一维数组。但是，flatMap() 方法会将这些结果打平为一个一维数组。

总结

flatMap() 方法是 JavaScript 数组方法之一，它提供了一种轻松将原始数组转换为新数组的方式。通过为每个原始元素调用回调函数，并将其结果合并到一个新数组中，我们可以使用 flatMap() 方法执行复杂的变换操作。

注意：flatMap() 是 ES2019 新增的方法，可能无法在所有环境中正常运行。如果需要在老版本的 JavaScript 中使用类似功能，建议使用 map() 和 reduce() 等其他方法来实现同样的效果。