ES10 Array 中的.flat() 方法详解及使用注意事项

在 ES10 中，JavaScript 新增了一个非常实用的数组方法——Array.prototype.flat()。这个方法可以把嵌套多层的数组“扁平化”，即将其转换为一维数组。本文将为大家详细讲解.flat()方法的使用和注意事项，帮助大家更好地了解和运用这个方法。

什么是.flat()方法？

.flat() 方法可以将多维数组转换为一维数组，其语法如下：

arr.flat([depth]);

这里的depth表示要扁平化后的最大深度，数字类型，可以省略，默认为1。

如何使用.flat()方法？

下面我们通过一个简单的示例来了解如何使用.flat()方法：

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

在这个示例中，我们首先定义了一个包含嵌套数组的一维数组。然后使用flat()方法将其转换为一维数组，最后打印输出。在控制台中，我们可以看到最终输出的一维数组为：

[1, 2, 3, 4]

我们也可以通过传递depth参数来实现多层嵌套数组的扁平化。如下示例代码：

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

在这个示例中，我们传递了depth参数2，表示要扁平化到两层深度。最终输出的一维数组为：

[1, 2, 3, 4, 5]

注意事项

1. flat()方法会递归处理数组，但是它不会递归处理非数组值。如果传递一个非数组参数，或者参数中包含非数组值，则它们会原样输出。

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

在这个示例中，我们定义了一个多层嵌套的包含非数组值的数组，进行flat()方法扁平化处理后，最终输出的一维数组为：

[1, 2, [3, [4, 5]], 6]

可以看到，传递的depth参数对于非数组值是没有任何影响的。

1. flat()方法并不会改变原始数组，而是返回一个新的扁平化后的数组。

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

在这个示例中，我们定义了一个多层嵌套的数组，使用flat()方法扁平化后，它并不会改变原始数组arr的值。最终输出的arr数组和flat()方法返回的数组flatArr不同。

[1, 2, 3, 4, 5]
[1, 2, [3, [4, 5]]]

1. 如果扁平化的结果中包含空数组，会自动去除。

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

在这个示例中，我们定义了一个多层嵌套的包含空数组的数组，使用flat()方法扁平化后，它会去除结果中的空数组。最终输出的一维数组为：

[1, 2, 3, 4, 5, 6, 7]

总结

.flat()方法可以非常方便地将多维数组扁平化为一维数组，大大简化了代码的处理。但是在使用.flat()方法时，需要注意以上提到的几个注意事项，尤其是要注意它的返回值不会改变原始数组的值。希望本文能够对大家了解和应用.flat()方法有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c49a7a83d39b4881812b60