在 ES7 中，新增了一个非常方便实用的 Array 新方法：Array.prototype.flat( )。它可以将一个多维数组的所有子数组里的元素按一定的深度，展开成一个新的一维数组。本文将介绍这个方法的详细信息，包括如何使用和一些使用上应注意的地方。
一、基本使用
Array.prototype.flat( ) 方法接收一个可选参数，表示要展开的深度，默认为 1，即只展开一层。如果参数值大于数组嵌套的深度，则返回一个与原数组相同的新数组。示例如下所示：
const arr1 = [1, 2, [3, 4]]; console.log(arr1.flat()); // [1, 2, 3, 4] const arr2 = [1, [2, [3, [4]]]]; console.log(arr2.flat()); // [1, 2, [3, [4]]] const arr3 = [1, [2, [3, [4]]]]; console.log(arr3.flat(2)); // [1, 2, 3, [4]]
二、展开多维数组
除了展开一层之外，它也可以展开一个多维数组，只需传入 Infinity（或任意大于等于嵌套深度的值）作为参数即可。示例如下：
const arr4 = [[1, 2], [3, 4], [[5, 6]]]; console.log(arr4.flat()); // [1, 2, 3, 4, [5, 6]] console.log(arr4.flat(2)); // [1, 2, 3, 4, 5, 6] console.log(arr4.flat(Infinity)); // [1, 2, 3, 4, 5, 6]
三、移除空项
如果展开的子数组里有空项，它会将其删除。示例如下：
const arr5 = [1, 2, , 4, 5]; console.log(arr5.flat()); // [1, 2, 4, 5]
四、结合 map 和 reduce，实现平铺并修改某些元素
由于 flat( ) 方法只是将多维数组展开为一维数组，如果你需要对展开后的数组进行一些操作，可以结合 map 和 reduce 方法，实现平铺并修改某些元素。示例如下：
const arr6 = [1, 2, [3, 4], [[5, 6]]];
console.log(
arr6
.flat(Infinity)
.map((item) => item * 2)
.reduce((res, item) => res + item)
); // 42五、注意事项
（1）平铺深度不能太大
由于平铺的深度会直接影响到数组展开的数量，若平铺深度太大，对性能会有较大的影响，因此对于大规模或嵌套深度较大的数组建议使用其他方法。
（2）仅能处理数组
仅能处理数组，若传入非数组对象，将会抛出 TypeError 错误。
（3）IE 和 safari 不支持该方法
Array.prototype.flat( ) 方法是 ES7 规范新增的，不属于 ECMAScript 标准，因此在老版本的浏览器中不支持，在需要使用该方法的前端项目中需要有所注意。
六、总结
本文介绍了 ES7 中新增的 Array.prototype.flat( ) 方法的基本使用、展开多维数组、移除空项、结合 map 和 reduce 等使用技巧，并结合了一些代码示例对这些使用方式进行阐述。在前端开发中，对于需要处理多维数组的情况，该方法将会非常方便实用，但也需要注意方法用法和引入兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c5bdc968c7c53b0eb35c7