ES10 增加了一些非常有用的新特性。其中之一是 Array.prototype.flat() 方法。该方法返回一个新数组，该数组是原始数组中所有子数组中的所有元素的平坦化版本。但是，在新特性中引入了一个问题。这个问题在实践中很常见，因此也很重要。
Array.flat() 新特性与应用
在 ES10 中引入了 Array.flat() 方法，此方法支持将多维数组转换为一维数组。例如，如果我们有一个多维数组：
const arr = [[1,2], [3,[4,5]]];
那么运行以下代码将获得一个平面的数组：
const flatArr = arr.flat(); // [1,2,3,4,5]
这是一个强大的特性，而且非常实用。在实际开发中，我们经常需要处理复杂的多维数组，使用这个新特性能够大大提升我们的效率。
问题
但是，新特性的实现中存在一个问题。该问题涉及到数组深度的限制。在实际应用中，我们经常需要处理大型数组，同时子数组中嵌套子数组也可能比较深层。在这种情况下，可能会达到新特性中的深度限制，而导致flat()方法无法正常工作。
具体而言，问题在于 ES10 规定了 flat() 方法只能处理“二级”多维数组，也就是说可以处理的子数组最深只能有两层，而不包括更深的子数组。
例如，如果我们有一个多维数组，其中嵌套了三个数组：
const arr = [1, [2, [3]]];
使用 flat() 方法无法将其中的所有子数组都合并为一个一维数组。而是只能处理前两个层级，并返回以下结果：
arr.flat(); // [1, 2, [3]]
因此，当我们需要处理三级及以上的多维数组时，我们需要使用其他方法来实现目标。
解决方法
幸运的是，我们可以很容易地解决这个问题。ES10 新增了 flat() 方法的一个可选参数，用于指定处理的深度。该参数的取值可以是任意正整数，也可以是Infinity。如果指定了 Infinity 值，将会处理多维数组的所有层级。
例如，要将上述三层多维数组转换为一维数组，我们可以执行以下代码：
arr.flat(Infinity); // [1, 2, 3]
这样，我们就可以通过指定深度来应对任何级别的多维数组。
示例代码
下面是一个使用 flat() 方法的示例代码，它可以处理所有级别的多维数组，并将所有元素平坦化：
const flatten = (arr, depth = 1) => {
return depth > 0 ?
arr.reduce((acc, val) =>
Array.isArray(val) ? acc.concat(flatten(val, depth - 1)) : acc.concat(val), [])
: arr.slice();
};该函数接受一个数组和一个可选的深度参数，返回一个平面的数组。如果没有指定深度参数，则默认为1。如果指定了深度参数，则返回已达到指定深度的平面数组。
例如，以下代码将数组平化到所有深度：
flatten([1, 2, [3, [4, [5]]]], Infinity); // [1, 2, 3, 4, 5]
总结
在本文中，我们学习了 ES10 新特性 Array.flat() 方法，以及其在处理多维数组上的应用。我们也发现了一个在实践应用中的问题，即方法的深度限制。但是，我们也发现了一个解决方法，通过使用 flat() 方法中的可选参数指定深度来解决该问题。
通过深入学习 Array.flat() 方法，我们可以更好地理解多维数组的平面化处理，并展示了如何解决深层多维数组的限制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650022f495b1f8cacde55784