JavaScript Array.flat() 函数用法解析

JavaScript Array.flat() 函数用法解析

近年来，JavaScript 的 Array 全局对象引入了多项实用功能，为开发者处理数组提供了更多选择。这些新特性显著提升了开发效率，过去需要编写复杂自定义逻辑才能完成的数组操作，如今已内置支持。本文将重点介绍其中一项极具实用价值的功能：flat() 函数。

JavaScript的Array.flat()函数深入探讨

功能概述

功能概述

flat() 函数的核心作用是将一组数组元素合并并串联成一个全新的数组，并在操作完成后返回该新数组。由于该函数始终生成新数组，原始数组及其包含的任何独立嵌套结构均保持不变。因此，在调用此函数前，无需对原始数据进行任何预处理或保护措施。

该函数仅接受一个可选参数：depth（深度）。若原始数组包含多层嵌套结构，此参数决定了函数将多少层嵌套数组展平为单层。由于该参数可选，其默认值为 1。这意味着在函数执行完毕后，仅有一层嵌套数组会被展平到返回的新数组中。

没有参数的情况

没有参数的情况

了解基本行为后，我们通过具体示例观察 flat() 函数的实际表现。以下代码展示了未指定参数值时的处理结果：

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]]; var array2 = array1.flat(); // array2: [1, 2, 3, 4, [5, 6], [[7, 8]], [[[9, 10]]]]

当调用 flat() 函数且不传入参数值时，鉴于可选参数的默认机制，此调用等同于 flat(1)。这意味着原始数组中深度为 1 的嵌套数组将被完全展平，其所有元素被单独提取并串联至新数组。对于深度为 2 或更深的嵌套数组，其嵌套层级将减少 1 层，且这些数组中深度为 1 的单个元素也会被单独串联至新数组。具体而言，包含元素 3 和 4 的第一个数组被展平，这两个元素分别加入新数组；其余三个嵌套数组也被串联至新数组，但各自的嵌套深度均减少了一层。

正深度

正深度

以下示例演示了指定正数 depth 参数值时的行为：

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]]; var array2 = array1.flat(2); // array2: [1, 2, 3, 4, 5, 6, [7, 8], [[9, 10]]]

使用深度参数值 2 调用 flat() 函数。此时，原始数组中最大深度为 2 的所有嵌套数组将被完全展平，其内部所有元素被单独提取并串联至新数组。对于深度为 3 或更深的嵌套数组，其嵌套层级将减少 2 层，且这些数组中深度为 1 或 2 的单个元素也会被单独串联至新数组。结果显示，包含元素 3、4 以及 5、6 的前两个嵌套数组被完全展平，这四个元素分别加入新数组；剩余的两个嵌套数组也被串联至新数组，其嵌套深度均减少了 2 层。

无限深度

无限深度

以下示例演示了指定无限 depth 参数值（Infinity）时的行为：

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]]; var array2 = array1.flat(Infinity); // array2: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

使用 depth 参数值 Infinity 调用 flat() 函数。这意味着原始数组中无论嵌套多深的所有数组都将被完全展平，其内部所有元素被单独提取并串联至新数组。值得注意的是，当与 flat() 函数配合使用 Infinity 这类值时，若应用程序处理嵌套极深的数组，可能会因内存耗尽而引发问题。尽管此处使用 Infinity 旨在证明该值可与 flat() 函数配合使用，但为避免不可预知的错误，建议在实际应用中采用更小的有限参数值。

零深度

零深度

以下示例演示了将 depth 参数值指定为 0 时的行为：

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]]; var array2 = array1.flat(0); // array2: [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]]

使用深度参数值 0 调用 flat() 函数。此时，原始数组中包含的任何嵌套数组均不会被展平，新数组中各个数组元素及嵌套数组的组成结构与原始数组完全一致。

负深度

负深度

以下示例演示了指定负深度参数值时的行为：

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]]; var array2 = array1.flat(-Infinity); // array2: [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]]

使用 depth 参数值 -Infinity 调用 flat() 函数。由于负深度值在扁平化嵌套数组时缺乏实际意义，系统会将负深度参数值视为 0 进行处理。如前例所示，当指定深度参数值为 0 时，原始数组中没有任何数组被展平，新数组中各个数组元素和嵌套数组的组成与原始数组完全相同。

经验教训

经验教训

关于 flat() 函数，有几个关键点值得注意。首先，flat() 函数不会以任何方式修改原始数组中的普通元素或嵌套数组，因此在使用该函数前无需维护原始数组的状态。flat() 函数唯一会改变的数组是函数执行后返回的全新数组，该数组仅基于原始数组的内容构建。

其次，flat() 函数会移除原始数组中存在的所有空值（holes）。以下示例展示了这一功能的具体表现：

var array1 = [1, , 3, , 5]; var array2 = array1.flat(); // array2: [1, 3, 5]

尽管原始数组占据五个位置，且第二和第四个位置的值未定义（undefined），但 flat() 函数在返回的新数组中移除了这两个空位。因此，新数组仅包含三个元素，其值均不为 undefined。

最后，关于 flat() 函数的通用用途及其简化逻辑的作用。在没有 flat() 函数的情况下，若要合并数组中包含的所有项目，通常需编写自定义逻辑来迭代所有数组，逐个提取元素并放入新数组，同时还需处理可能存在的嵌套数组。此类逻辑往往较为繁琐且易出错，因此，利用如 flat() 这样的抽象内置函数来替代自定义实现，是更为稳妥的选择。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。