在 ECMAScript (简称 ES) 的最新标准 ES10 中，新增加了一个非常实用的函数 flat()。这个函数可以代替循环实现数组扁平化的功能，让我们在编写前端代码时更加高效和简洁。
扁平化数组的概念
在编程中，扁平化数组这个概念经常被使用。所谓扁平化，就是将多维数组转化为一维数组，也就是将一个包含多个数组的数组展平成一个简单的数组。例如：
const arr = [1, 2, [3, 4, [5, 6]]]; // 将多维数组 arr 转化为一维数组 [1, 2, 3, 4, 5, 6]
手动实现扁平化数组的方法
在 ES10 新增的 flat() 函数之前，我们通常使用循环来手动实现扁平化数组的功能。例如：
-- -------------------- ---- -------
-------- ------------ -
----- ------ - ---
--- ---- - - -- --- - ----------- - - ---- ---- -
-- ----------------------- -
--------------------------------
- ---- -
--------------------
-
-
------ -------
-
----- --- - --- -- --- -- --- -----
----- ------- - ------------- -- --- -- -- -- -- --这里的 flatten() 函数采用递归的方式将多维数组转化为一维数组。当数组中某一项是数组时，就继续使用递归的方式将其转化为一维数组；当数组中某一项不是数组时，就将它 push 到结果数组中。
这种方法可以实现数组扁平化，但是比较繁琐且有一定的性能问题。
使用 flat() 函数实现数组扁平化
在 ES10 中，新增加的 flat() 函数可以代替循环实现数组扁平化的功能，让我们在编写前端代码时更加高效和简洁。
flat() 函数接受一个可选的深度参数。如果不传递深度参数，flat() 函数将扁平化所有数组。如果传递了深度参数，则只扁平化指定深度的数组。
例如，对于多维数组 arr，可以使用 flat() 函数进行数组扁平化：
const arr = [1, 2, [3, 4, [5, 6]]]; const flatArr = arr.flat(); // [1, 2, 3, 4, 5, 6]
这里使用了 flat() 函数将多维数组 arr 扁平化，无需使用循环或递归。
如果想要深度控制数组的扁平化，可以传递一个深度参数。例如，如果只想要将多维数组 arr 扁平化一层，则可以传递深度参数 1：
const arr = [1, 2, [3, 4, [5, 6]]]; const flatArr = arr.flat(1); // [1, 2, 3, 4, [5, 6]]
总结
ES10 中新增加的 flat() 函数可以代替循环实现数组扁平化的功能，通过这个函数，我们可以更加高效和简洁地编写前端代码。
注意，在使用 flat() 函数时需要考虑浏览器兼容性问题。在某些浏览器中，flat() 函数可能会返回 undefined，或者在使用 flat() 函数时需要传递参数，否则会抛出错误。因此，在项目中需要根据实际情况进行兼容处理。
附：示例代码
-- -------------------- ---- ------- -- ----------- -------- ------------ - ------ ----------- - -- --------------- -------- ----------------- ------ - ------ ---------------- - -- ---- ----- --- - --- -- --- -- --- ----- -- ------- ----- ------- - ------------- -- --- -- -- -- -- -- -- ----------------- ----- ------------ - ----------------- --- -- --- -- -- -- --- ---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648094c248841e9894009ff4