在前端开发中，经常需要操作数组数据。而在 ES10 中，新增了一个非常实用的数组方法——Array.prototype.flat()，用于将嵌套的数组扁平化，即将多维数组转换为一维数组。这个方法可以帮助我们更方便地处理数组数据，从而提高开发效率。
什么是扁平化？
在介绍Array.prototype.flat()方法之前，我们先来了解一下什么是扁平化。扁平化指的是将多维数组转换为一维数组，例如将二维数组：
[[1, 2, 3], [4, 5, 6], [7, 8, 9]]
转换为一维数组：
[1, 2, 3, 4, 5, 6, 7, 8, 9]
Array.prototype.flat()方法的使用
Array.prototype.flat()方法用于将嵌套的数组扁平化，可以接收一个参数，表示要扁平化的层数。如果不传参数，默认扁平化一层。
下面是Array.prototype.flat()方法的示例代码：
const arr1 = [1, 2, [3, 4]]; console.log(arr1.flat()); //[1, 2, 3, 4] const arr2 = [1, 2, [3, [4, 5]]]; console.log(arr2.flat()); //[1, 2, 3, [4, 5]] const arr3 = [1, 2, [3, [4, 5]]]; console.log(arr3.flat(2)); //[1, 2, 3, 4, 5]
在上面的示例代码中，arr1和arr2分别是一维数组和二维数组，通过Array.prototype.flat()方法将其扁平化为一维数组。而arr3是一个嵌套了两层的数组，我们将其扁平化两层，得到的结果是一维数组。
免疫代码的好习惯
在编写代码时，为了提高代码的可读性和可维护性，我们应该养成良好的编码习惯。对于数组的扁平化操作，我们可以采用以下两种方式来免疫代码：
使用递归函数
可以使用递归函数来实现数组的扁平化。递归函数的思路是：遍历数组中的每一项，如果该项是数组，则递归调用函数，直到将所有的数组扁平化为一维数组。
下面是使用递归函数实现数组扁平化的示例代码：
function flat(arr) {
return arr.reduce((acc, val) => {
return Array.isArray(val) ? acc.concat(flat(val)) : acc.concat(val);
}, []);
}
const arr = [1, 2, [3, [4, 5]]];
console.log(flat(arr)); //[1, 2, 3, 4, 5]在上面的示例代码中，我们定义了一个flat()函数，用于递归地将数组扁平化。flat()函数使用Array.prototype.reduce()方法遍历数组中的每一项，如果该项是数组，则递归调用flat()函数，直到将所有的数组扁平化为一维数组。
使用扩展运算符
在 ES6 中，新增了扩展运算符...，可以将数组展开为一个参数序列。因此，我们可以使用扩展运算符来实现数组的扁平化。
下面是使用扩展运算符实现数组扁平化的示例代码：
-- -------------------- ---- -------
-------- --------- -
----- -------------- -- --------------------- -
--- - ------------------
-
------ ----
-
----- --- - --- -- --- --- -----
----------------------- ----- -- -- -- --在上面的示例代码中，我们定义了一个flat()函数，使用while循环和扩展运算符...将数组扁平化。while循环判断数组中是否还存在数组项，如果存在，则使用扩展运算符...将数组展开为一个参数序列，再使用[].concat()方法将参数序列合并为一个新数组，直到将所有的数组扁平化为一维数组。
总结
通过本文的介绍，我们了解了 ES10 中新增的Array.prototype.flat()方法，并使用示例代码演示了其用法。同时，我们也介绍了两种免疫代码的好习惯，即使用递归函数和使用扩展运算符。希望本文对大家学习和使用数组扁平化操作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ffd613d10417a222b13b85