ZetCode

JavaScript flat 方法

最后修改于 2025 年 4 月 4 日

在本文中,我们将展示如何使用 JavaScript 中的 flat 方法来扁平化数组。

数组扁平化

数组扁平化是将嵌套数组的维度降低的过程。flat 方法创建一个新数组,将所有子数组元素递归地连接到其中,直到指定的深度。

当处理嵌套数组并且需要一个单层数组时,此方法很有用。flat 方法不会修改原始数组,而是返回一个新的扁平化数组。

默认情况下,flat 只扁平化一层深度。你可以指定一个 depth 参数来控制要扁平化的层数。要扁平化所有层,请使用 Infinity 作为 depth 参数。

基本 flat 示例

以下示例演示了 flat 方法的基本用法。

main.js
const arr = [1, 2, [3, 4]];
const flattened = arr.flat();

console.log(arr);        // Original array unchanged
console.log(flattened);  // New flattened array

我们创建一个嵌套数组并将其扁平化。原始数组保持不变。flat() 方法返回一个新的数组,其中移除了一个嵌套级别。

$ node main.js
[ 1, 2, [ 3, 4 ] ]
[ 1, 2, 3, 4 ]

扁平化多层嵌套

flat 方法可以接受一个 depth 参数来控制扁平化级别。

main.js
const arr = [1, [2, [3, [4, 5]]];
const flattened = arr.flat(2);

console.log(flattened);

我们扁平化一个具有多层嵌套的数组。depth 参数为 2,表示我们扁平化两层深度。结果仍然包含一个嵌套级别。

$ node main.js
[ 1, 2, 3, [ 4, 5 ] ]

完全扁平化一个数组

要完全扁平化一个数组,无论嵌套深度如何,请使用 Infinity。

main.js
const deeplyNested = [1, [2, [3, [4, [5]]]]];
const fullyFlattened = deeplyNested.flat(Infinity);

console.log(fullyFlattened);

我们使用 Infinity 作为 depth 参数来扁平化所有嵌套级别。这适用于原始数组的嵌套深度。

$ node main.js
[ 1, 2, 3, 4, 5 ]

Flat 结合空槽

flat 方法在扁平化时会移除数组中的空槽。

main.js
const arr = [1, 2, , 4, 5];
const flattened = arr.flat();

console.log(flattened);

当扁平化一个包含空槽的数组时,结果中会移除这些空槽。此行为不同于简单地复制数组。

$ node main.js
[ 1, 2, 4, 5 ]

将 flat 与 map 结合使用

flat 方法经常与 map 结合用于复杂的转换。

main.js
const arr = [1, 2, 3];
const result = arr.map(x => [x * 2]).flat();

console.log(result);

我们首先将每个元素映射到一个新数组,然后扁平化结果。这种模式非常常见,以至于有一个单独的 flatMap 方法用于此。

$ node main.js
[ 2, 4, 6 ]

来源

数组 flat - 语言参考

在本文中,我们演示了如何使用 flat() 方法来扁平化 JavaScript 中的数组。

作者

我叫 Jan Bodnar,是一位充满激情的程序员,拥有丰富的编程经验。自 2007 年以来,我一直在撰写编程文章。到目前为止,我撰写了超过 1,400 篇文章和 8 本电子书。我拥有超过十年的编程教学经验。

列出 所有 JS 数组函数。