JavaScript Array flatMap()

// defining an array
let numbers = [1, 2, 3, 4, 5];

// each element of the array is squared and later flattened
const resultingArray = numbers.flatMap((x) => [x ** 2]);

console.log(resultingArray);

// Output:
// [ 1, 4, 9, 16, 25 ]

flatMap() 语法

flatMap() 方法的语法是

arr.flatMap(callback(currentValue),thisArg)

这里，arr 是一个数组。

flatMap() 参数

flatMap() 方法可以接受 **两个** 参数

• callback - 在数组的每个元素上初始执行的 回调函数。它接收
  • currentValue - 从数组中传递的当前元素。
• thisArg (可选) - 执行 callback 时用作 this 的值。

flatMap() 返回值

• 使用 callback 映射完每个元素后返回一个新数组

示例 1：使用 flatMap() 方法

// defining an array
let numbers = [1, 2, 3, 4, 5];

// each element of the array is incremented by 1
// and later the array is flattened
let resultingArray = numbers.flatMap((element) => element + 1);

console.log(resultingArray);

输出

[ 2, 3, 4, 5, 6 ]

在上面的示例中，我们使用 flatMap() 方法将 numbers 数组的每个元素加 1。

((element) => element + 1) 是一个映射函数，它在 numbers 的每个元素上执行。

该方法返回一个展平的数组：[ 2, 3, 4, 5, 6 ]，即每个元素都加 1。

示例 2：使用 flat() 和 map() 代替 flatMap()

flatMap() 方法是 flat() 和 map() 方法的组合。我们可以使用组合版本，即 flatMap()，而不是使用这两个方法。

// defining an array
let numbers = [1, 2, 3, 4, 5];

// incrementing each element of array using map()
let afterMapping = numbers.map((element) => element + 2);

// flattening the array using flat()
let afterFlattening = afterMapping.flat();

console.log(afterFlattening); // [ 3, 4, 5, 6, 7 ]

// using flatMap() instead of flat() and map()
let after_flatMap = numbers.flatMap((element) => element + 2);

console.log(after_flatMap); // [ 3, 4, 5, 6, 7 ]

输出

[ 3, 4, 5, 6, 7 ]
[ 3, 4, 5, 6, 7 ]

在这里，我们首先在 numbers 数组中分别使用了 map() 和 flat() 方法。

然后我们使用了 flatMap() 方法，它首先 map() 数组，然后 flat()。

在这两种情况下，该方法都返回相同的数组：[ 3, 4, 5, 6, 7 ]。

另请阅读

• JavaScript Array flat()