ES9 中新的 Array flat() 方法示例-JavaScript中文网-JavaScript教程资源分享门户

JavaScript 的 ES9 中增加了一个新的 Array 方法 flat()。这个方法可能听起来比较新奇，但是它在处理复杂嵌套数组时非常有用，能够让我们在代码中更加高效地处理数据。

什么是 flat() 方法

flat() 方法是一个用于将多维嵌套数组转换成一维数组的方法。这个方法就是将数组的所有元素都展开成一个新的单一数组，可以控制深度以及去除空项等参数。

在 Array 中使用 flat() 方法很容易，只要调用数组的 flat() 方法即可：

const arr = [1, 2, [3, 4]];
const flattened = arr.flat();
console.log(flattened); // [1, 2, 3, 4]

这里我们将一个数组 [1, 2, [3, 4]] 调用了 flat() 方法，返回的结果是一个展开后的数组 [1, 2, 3, 4]。

如果我们有一个更加深度的嵌套数组，我们可以使用 flat() 方法的 depth 参数来指定要展开的深度。

例如，以下是一个多维数组示例，并且我们将调用 flat() 方法并设置 depth 参数为 2：

const arr = [1, 2, [3, 4, [5, 6]]];
const flattened = arr.flat(2);
console.log(flattened); // [1, 2, 3, 4, 5, 6]

在这个例子中，我们将一个三维数组展开到了二维，因此我们得到了一个扁平的二维数组。

需要注意的是，如果我们的数组中有空项，这些空项默认会被删除。不过我们可以使用 flat() 方法的 filter 参数来控制这个行为。

以下是一个带有空项的示例：

const arr = [1, 2, , 4, , 6];
const flattened = arr.flat();
console.log(flattened); // [1, 2, 4, 6]

在这个例子中，我们用逗号占位符创建了一些空项。这时候我们调用 flat() 方法返回的数组中，空项会被删除。

但是我们可以传递一个函数作为 filter 参数用于过滤这些空项。

const arr = [1, 2, , 4, , 6];
const flattened = arr.flat(item => item !== undefined);
console.log(flattened); // [1, 2, 4, 6]

在这种情况下，我们提供了一个函数来过滤空项。这个函数的参数是数组的每一个元素，如果它返回 true，那么元素将被保留在数组中，否则就删除。

flat() 方法在嵌套数组中提取所有元素的值非常有用。例如，当我们需要使用 map() 或 filter() 方法时，我们通常需要在嵌套数组中使用两个或更多嵌套层，然后才能获取所需的值。

但是使用 flat() 方法，我们可以简化这个处理过程，将多维数组转换成一维数组，使得对数据的处理更加高效。

下面是一个在多位数组中使用 flat() 和 map() 方法的示例：

const arr = [1, 2, [3, 4, [5, 6]]];
const flattened = arr.flat().map(num => num * 2);
console.log(flattened); // [2, 4, 6, 8, 10, 12]

在这个示例中，我们首先展开多维数组，然后使用 map() 方法对其中的每个元素进行处理，最后得到了新的一维数组。

flat() 方法是 ES9 中一个很有用并且易于使用的新特性，在处理嵌套数组时非常方便。我们通过使用 flat() 方法，可以将复杂的数据结构转换为简单的一维数组，使得处理数据更加高效。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654ca6ea7d4982a6eb616388