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