跳到主要内容

JavaScript 数组 flatMap() 方法

flatMap() 方法首先使用映射函数对数组的每个元素进行映射，然后将其展平成一个新数组。

示例​

// 定义一个数组
let numbers = [1, 2, 3, 4, 5];

// 数组的每个元素先平方然后展平
const resultingArray = numbers.flatMap((x) => [x ** 2]);

console.log(resultingArray);

// 输出：
// [ 1, 4, 9, 16, 25 ]

flatMap() 语法​

flatMap() 方法的语法为：

arr.flatMap(callback(currentValue), thisArg);

这里的 arr 是一个数组。

flatMap() 参数​

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

  • callback - 最初在每个数组元素上执行的函数。它接受以下参数：

  • currentValue - 从数组传递的当前元素。

thisArg（可选）- 执行 callback 时用作 this 的值。

flatMap() 返回值​

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

备注：

  • flatMap() 方法不会改变原始数组。
  • flatMap() 方法相当于 array.map().flat()。

示例 1：使用 flatMap() 方法​

// 定义一个数组
let numbers = [1, 2, 3, 4, 5];

// 数组的每个元素增加 1
// 然后展平数组
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() 来代替这两个方法。

// 定义一个数组
let numbers = [1, 2, 3, 4, 5];

// 使用 map() 增加数组的每个元素
let afterMapping = numbers.map((element) => element + 2);

// 使用 flat() 展平数组
let afterFlattening = afterMapping.flat();

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

// 使用 flatMap() 代替 flat() 和 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 数组 flat()

最后于 更新