JavaScript 数组 flatMap() 方法

JavaScript flatMap() 语法

flatMap() 是 JavaScript 数组的一个方法，它会使用一个映射函数作用于数组的每个元素，然后将所有元素展平为一个新数组。

想要更好地理解 flatMap() 方法，小伙伴们应该先了解 flat() 方法是如何使用的：JavaScript 数组 flat() 方法。

语法：

arr.flatMap(callbackFn, thisArg)

说明：

flatMap() 方法可以接收以下 2 个参数。

• callbackFn（必选）：是一个回调函数，所有数组元素都会依次执行一次该函数。
• thisArg（可选）：回调函数 this 的值，默认值为 undefined。该参数一般不需要手动设置。

callbackFn 这个回调函数的形式如下：

function (element, index, array) {
    ……
}

callbackFn 回调函数接收 3 个参数，说明如下。

• element（必选）：表示当前处理的数组元素。
• index（可选）：表示当前处理的元素下标。
• array（可选）：表示当前数组对象（代表整个数组）。

需要清楚的是，flatMap() 可以看成是 flat() 和 map() 两个方法的结合。下面两种方式是等价的：

// 方式1
arr.flatMap(fn)

// 方式2
arr.map(fn).flat()

JavaScript flatMap() 摘要

JavaScript flatMap() 示例

接下来，我们通过一个简单的例子来讲解一下 JavaScript flatMap() 方法是如何使用的。

示例：flatMap() 基本用法

const arr = ["I love", "LeafCoding"];
// 使用 map：得到嵌套数组
const result1 = arr.map(x => x.split(" "));
console.log(result1); 

// 使用 flatMap：得到扁平数组
const result2 = arr.flatMap(x => x.split(" "));
console.log(result2);

运行结果如下。

[ [ 'I', 'love' ], [ 'LeafCoding' ] ]
[ 'I', 'love', 'LeafCoding' ]

分析：

在这个例子中，回调函数 x => x.split(" ") 会将每一个字符串元素切割成一个数组（例如 "I love" 变成了 ["I", "love"]）。

• 使用 map() 时：它会将回调函数返回的结果直接放入新数组中。因为回调函数返回的是数组，所以最终结果是一个二维数组（嵌套数组）：[ [ 'I', 'love' ], [ 'LeafCoding' ] ]。
• 使用 flatMap() 时：它不仅执行了映射逻辑，还在最后自动将结果 “压平” 了一层。因此，原本嵌套的子数组被展开，最终合并成了一个一维数组：[ 'I', 'love', 'LeafCoding' ]。