JavaScript 的 flat() 与 flatMap()

在 JavaScript 中,数组是使用最广泛的数据结构之一。当处理嵌套数组时,它们会变得非常复杂。两个在处理嵌套数组方面特别有用的数组方法是 flat() 和 flatMap()。这些方法在 ES2019 中被引入,为扁平化数组和映射数组然后扁平化结果提供了优雅的解决方案。本文将深入探讨 flat() 和 flatMap() 的细节、区别和实际应用,以及示例代码。

flat() 方法

flat() 是什么?

flat() 方法使用递归将所有子数组元素合并到指定深度的新数组中。

var newArray = arr.flat([depth]);

• arr:要扁平化的数组。
• depth(可选):深度级别,指定嵌套数组结构应该被扁平化的深度。默认为 1。

示例 1:基本用法

let nestedArray = [1, [2, 3], [4, [5, 6]]];
let flattenedArray = nestedArray.flat();

console.log(flattenedArray); // 输出:[1, 2, 3, 4, [5, 6]]

示例 2:指定深度

let nestedArray = [1, [2, [3, [4, 5]]]]; 
let flattenedArray = nestedArray.flat(2);

console.log(flattenedArray); // 输出:[1, 2, 3, [4, 5]]

flatMap() 方法

flatMap() 是什么?

flatMap() 方法首先使用映射函数映射每个元素,然后将结果扁平化到一个新数组中。它与后跟深度为1的 flat 调用的 map 完全相同。

var newArray = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // 返回 newArray 的元素,在执行某些操作之后
}[, thisArg]);

• callback:生成新数组中的元素的函数,接受三个参数:
• currentValue:数组中正在处理的当前元素。
• index(可选):数组中正在处理的当前元素的索引。
• array(可选):调用了 flatMap 的数组。
• thisArg(可选):执行 callback 时使用的值作为 this。

示例 1:基本用法

let arr = [1, 2, 3, 4];
let mappedAndFlattened = arr.flatMap(x => [x, x * 2]);

console.log(mappedAndFlattened); // 输出:[1, 2, 2, 4, 3, 6, 4, 8]  

示例 2:扁平化嵌套数组

let nestedArray = [[1], [2, 3], [4]];
let flattenedArray = nestedArray.flatMap(x => x);

console.log(flattenedArray); // 输出:[1, 2, 3, 4]

比较 flat() 和 flatMap()

使用场景

• 使用 flat()时,你需要扁平化嵌套数组,而不转换元素。
• 使用 flatMap() 时,你需要先转换元素,然后扁平化结果。

性能

• flatMap() 可以比单独的 map() 后跟 flat() 更高效,因为它只遍历数组一次。

局限性

• flatMap() 只能扁平化一层。对于更深层次的扁平化,你仍然需要使用 flat()。

理解 flat() 和 flatMap() 及其区别对于在 JavaScript 中高效操作数组特别是处理复杂的嵌套数据结构至关重要。与传统的循环方法相比,这些方法提供了一种更具可读性和简洁性的方法。