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

在过去的几年中，已经将许多有用的功能添加到Javascript Array全局对象中，这些功能为开发人员在编写可用于数组的代码时提供了多种选择。这些功能提供了许多优点，其中最值得注意的是，虽然在过去的一段时间里，开发人员必须实现自己的复杂逻辑来执行各种数组操作，但现在这些新功能已经不再需要这种自制的实现。本文将探讨的有用功能之一是 flat() 函数。

功能概述

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 参数值的情况：

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() 函数将删除原始数组中存在的所有空值。下面的示例演示了该功能的实际作用：

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

尽管原始数组占用了五个位置，而第二个和第四个位置的值未定义，但是 flat() 函数从函数完成后返回的新数组中删除了这两个数组项。结果，新数组只包含三个数组项，它们的值不为 undefined。

关于 flat() 函数要记住的第三件事，也是最后一件事，是它的一般用途，以及它如何有助于简化逻辑，如果没有一个可用的 flat()函数，要合并任何数组中包含的所有项目，通常的方法是编写自定义的逻辑来迭代所有的数组，从一个数组中单独拉出项目，然后把它们放到另一个数组中，可能会考虑到其中的嵌套数组。这样的逻辑往往比较混乱，而且容易出错，因此，通过使用抽象的内置函数（如 flat() 函数）来避免它的出现，是一个很好的选择。

@杭州程序员小张：

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

0/2000字