在 JavaScript 中，数组扁平化是一种非常常见的需求，它可以将多维嵌套的数组转化为一维数组，简化代码实现，提高代码可读性和可维护性。ES10 中新增了 flat() 方法，它可以一次性将多维数组扁平化成为一维数组。本文将深度剖析ES10的 flat() 方法实现原理和用法。
什么是数组扁平化
在 JavaScript 中，数组扁平化指的是将多维嵌套的数组转换成一维数组，例如：
const arr = [1, [2, [3, [4]]]]; const flattenArr = arr.flat(Infinity); console.log(flattenArr); // [1, 2, 3, 4]
在上面的例子中，我们定义了一个嵌套数组，使用 flat() 方法将多维数组扁平化成为一维数组，输出结果为：[1,2,3,4]。
flat() 方法
ES10 中新增了 flat() 方法，它的语法格式如下：
array.flat(depth);
其中，array 代表要扁平化的原始数组，depth 代表要扁平化的深度，即扁平化嵌套数组的层数，它的取值有以下几种：
- 如果不传参，默认值为1，只能扁平化一层；
- 如果传入 Infinity，则无论多少维都能进行完全扁平化；
- 如果传入的是 0，则不进行任何操作，原样返回原数组；
flat() 方法如何实现数组扁平化
flat() 方法通过递归遍历数组来实现数组扁平化。在实现的过程中，将原数组中的每一项遍历，如果该项是数组，就递归将其扁平化，如果该项不是数组，就将其存储在结果数组中。
因为 flat() 方法默认只能扁平化一层，所以实现时需要通过递归来解决多层嵌套的问题，代码示例如下：
-- -------------------- ---- -------
-------------------- - -------------- - -- -
----- ------ - ---
----------------- -- -
-- -------------------- -- ----- - -- -
------------------------------ - ----
- ---- -
------------------
-
---
------ -------
-在上面的代码中，我们自定义了 flat() 方法，如果当前项是数组，并且要扁平化的深度大于0，就递归调用 flat() 方法，实现多层嵌套数组的扁平化。如果当前项不是数组，就将其存储到结果数组中。最后，我们返回结果数组。
终极示例：从二维数组中获取最大值
下面我们将通过一个终极示例来演示 flat() 方法的实际应用，我们将从一个二维数组中获取最大值。如果没有 flat() 方法，我们需要使用两个嵌套的循环来进行遍历：
const arr = [[1, 2], [3, 4], [5, 6]];
let max = -Infinity;
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < arr[i].length; j++) {
max = Math.max(max, arr[i][j]);
}
}
console.log(max); // 6使用 flat() 方法后，我们可以简化代码实现，直接将多维数组扁平化成为一维数组，然后使用 Math.max() 方法获取最大值：
const arr = [[1, 2], [3, 4], [5, 6]]; const flattenArr = arr.flat(); const max = Math.max(...flattenArr); console.log(max); // 6
在上面的示例代码中，我们首先使用 flat() 方法将二维数组扁平化成为一维数组，然后使用 Math.max() 方法获取最大值。可以看到，使用 flat() 方法可以简化代码实现，提高代码可读性和可维护性。
总结
本文深度剖析了 ES10 的 flat() 方法实现原理和用法，通过示例代码演示了 flat() 方法的实际应用，可以看出 flat() 方法在数组扁平化方面具有很大的优势和便利性。我们建议在进行数组扁平化操作时应尽量使用 flat() 方法，以提高代码效率，简化代码实现，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648295fb48841e98941f8b65