ES10 中新增了 Array.flat() 方法，它可以将嵌套的数组展平为一维数组。在前端开发中，Array.flat() 有很多应用场景，比如处理多维数组数据、向后台传递扁平化的数据等。接下来，本文将详细介绍 Array.flat() 方法的使用方法、应用场景以及示例代码。
语法
Array.flat() 方法的语法如下：
const newArray = arr.flat(depth);
其中，depth 参数是可选的，表示要展平的深度，默认为 1。
实例
下面看一个实例：
const arr = [1, 2, [3, 4, [5, 6]]]; const flatArr = arr.flat(2); console.log(flatArr); // [1, 2, 3, 4, 5, 6]
在上面的例子中，arr 数组有三个元素，其中第三个元素是一个嵌套的数组。通过调用 flat() 方法，我们将 arr 数组展平为一维数组 flatArr，并将深度设置为 2（即展平两层）。
应用场景
处理多维数组数据
处理多维数组数据是 Array.flat() 方法的一个常见应用场景。当我们从后台拿到一些多维数组数据时，使用 Array.flat() 可以将其展平为一维数组，方便我们处理和使用。
比如下面的例子：
const multiArr = [1, 2, [3, 4, [5, 6]], [7, 8]]; const flatArr = multiArr.flat(Infinity); console.log(flatArr); // [1, 2, 3, 4, 5, 6, 7, 8]
在上面的例子中，我们将 multiArr 数组展平为一维数组 flatArr，并将深度设置为 Infinity，表示展平所有层次。
向后台传递扁平化的数据
有些后台接口需要我们以扁平化的格式传递数据，这时候使用 Array.flat() 可以将嵌套的对象或数组转换为扁平化的数据，方便我们发送请求。
比如下面的例子：
-- -------------------- ---- -------
----- --- - -
----- ------
---- ---
-------- -
--------- ------------
----- -----------
--
-------- -------- ------- --------
--
----- ------- - ---
----- ---- - ------ ---- -- -
-- ------- ---- --- --------- -
------------ - -----
- ---- -
-------------------------------- -- -
------------------------ --------------
---
-
--
---------------------------- -- -
--------- ----------
---
---------------------
-- ------ ------ ---- --- ----------------- ------------ ------------- ----------- ---------- ------- ---------- ------- ---------- -------在上面的例子中，我们将 obj 对象通过 flat() 方法展开为 flatObj 对象，其中所有嵌套的属性都转换为了扁平化的字符串形式。这样，我们就可以将 flatObj 作为请求参数发送给后台接口。
遍历多维数组
Array.flat() 方法还可以帮助我们遍历多维数组：
const arr = [[1, 2], [3, 4], [5, 6]]; arr.flat().forEach(item => console.log(item)); // 1 2 3 4 5 6
在上面的例子中，我们将 arr 数组展平为一维数组，并使用 forEach() 方法遍历每一个元素。
总结
本文介绍了 ES10 中新增的 Array.flat() 方法，它可以将嵌套的数组展平为一维数组，具有处理多维数组数据、向后台传递扁平化的数据和遍历多维数组等多种应用场景。在实际工作中，我们可以结合具体的场景使用 Array.flat() 方法，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ca20435ad90b6d0419c9c9