在 ECMAScript 2020 中，新增了一个非常实用的 Array 方法，即 Array.flat()。该方法可以将多维数组扁平化为一维数组，简化了数组操作的过程，同时也提高了代码的可读性和可维护性。本文将详细介绍 Array.flat() 方法的使用与场景，并给出示例代码。
什么是 Array.flat() 方法？
Array.flat() 方法是一个用于将多维数组扁平化为一维数组的方法。该方法可以接收一个可选参数，表示扁平化的深度。如果不传入该参数，则默认为 1，即只扁平化一层。如果传入参数为 Infinity，则表示完全扁平化。
Array.flat() 方法的使用
下面是 Array.flat() 方法的基本使用方法：
const arr = [1, 2, [3, 4]]; const flatArr = arr.flat(); console.log(flatArr); // 输出 [1, 2, 3, 4]
上面的代码中，我们定义了一个包含一个二维数组的数组 arr，并使用 flat() 方法将其扁平化为一维数组 flatArr。在执行 flat() 方法之后，原数组 arr 并没有发生改变，而是返回了一个新的扁平化后的数组 flatArr。
我们也可以传入一个数字作为参数，表示扁平化的深度：
const arr = [1, 2, [3, [4, 5]]]; const flatArr = arr.flat(2); console.log(flatArr); // 输出 [1, 2, 3, 4, 5]
上面的代码中，我们定义了一个包含一个三维数组的数组 arr，并使用 flat(2) 方法将其扁平化为一维数组 flatArr。在执行 flat(2) 方法之后，数组 arr 中的每个元素都被展开了两层，最终得到了一个扁平化的一维数组 flatArr。
如果我们传入 Infinity 作为参数，则表示完全扁平化：
const arr = [1, 2, [3, [4, 5]]]; const flatArr = arr.flat(Infinity); console.log(flatArr); // 输出 [1, 2, 3, 4, 5]
上面的代码中，我们定义了一个包含一个三维数组的数组 arr，并使用 flat(Infinity) 方法将其完全扁平化为一维数组 flatArr。在执行 flat(Infinity) 方法之后，数组 arr 中的每个元素都被展开了无数层，最终得到了一个扁平化的一维数组 flatArr。
Array.flat() 方法的场景
Array.flat() 方法可以应用于许多场景，下面是一些常见的应用场景：
1. 合并多个数组
如果我们有多个数组需要合并，可以使用 Array.flat() 方法将它们合并为一个一维数组：
const arr1 = [1, 2]; const arr2 = [3, 4]; const arr3 = [5, 6]; const flatArr = [arr1, arr2, arr3].flat(); console.log(flatArr); // 输出 [1, 2, 3, 4, 5, 6]
2. 处理嵌套的数据
如果我们有一个嵌套的数据结构，需要对其中的数据进行处理，可以使用 Array.flat() 方法将其扁平化为一维数组，然后进行处理：
-- -------------------- ---- -------
----- ---- - -
-
--- --
----- -------
-------- ----------- -----------
--
-
--- --
----- --------
-------- --------- ----------
-
--
----- ----------- - ------------- -- ---------------------
-------------------------
-- -- ----------- ----------- -------- ----------上面的代码中，我们定义了一个包含嵌套数据的数组 data，其中每个元素包含一个 hobbies 属性，表示该元素的爱好。我们使用 map() 方法将每个元素的 hobbies 属性提取出来，并使用 flat() 方法将它们扁平化为一个一维数组 flatHobbies。
3. 处理树形数据
如果我们有一个树形数据结构，需要对其中的数据进行遍历，可以使用递归和 Array.flat() 方法将其扁平化为一维数组，然后进行遍历：
-- -------------------- ---- -------
----- ---- - -
-
--- --
----- -------
--------- -
-
--- --
----- --------
--------- -
-
--- --
----- -----
-
-
-
-
--
-
--- --
----- ------
--------- -
-
--- --
----- -------
-
-
-
--
-------- -------------- -
----------------- -- -
-----------------------
-- --------------- -
-------------------------------
-
---
-
---------------
-- -- ----- ------ ---- ---- -----上面的代码中，我们定义了一个包含树形数据的数组 data，其中每个元素包含一个 children 属性，表示该元素的子节点。我们使用递归和 flat() 方法将树形数据扁平化为一个一维数组，并使用 forEach() 方法对其进行遍历。
总结
本文介绍了 ECMAScript 2020 中新增的 Array.flat() 方法的使用与场景，并给出了示例代码。Array.flat() 方法可以将多维数组扁平化为一维数组，简化了数组操作的过程，同时也提高了代码的可读性和可维护性。在实际开发中，我们可以根据具体的场景来灵活运用该方法，提高代码的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65cae3f9add4f0e0ff4b88f5