在 ES10 中，一个非常实用的新特性就是 Array.flat() 方法。这个方法可以将嵌套的数组变为一个平铺的数组。本文将详细介绍 Array.flat() 的使用方法，并提供一些使用示例。
什么是 Array.flat() 方法
在 JavaScript 中，一个数组可以包含其他的数组。我们称之为嵌套数组。当我们需要对这个数组进行操作的时候，就需要将其变为一个平铺的数组。在以前，我们需要手动写代码来实现这一点。但是，ES10 提供了一个非常便捷的方法：Array.flat()。
Array.flat() 方法将所有的数组元素递归地转化为一个简单的一维数组。这个方法返回一个新数组，并没有改变原来的数组。
Array.flat() 的使用方法
下面是 Array.flat() 方法的基本格式：
array.flat(depth)
其中，array 是需要转换的数组，depth 是可选参数，表示递归展开的深度。默认值是 1。
我们来看下深度的概念。假设有一个嵌套数组：
const arr = [1, 2, [3, 4, [5, 6]]];
如果我们只需要展开一层，可以这样使用 flat() 方法：
arr.flat() // [1, 2, 3, 4, [5, 6]]
如果我们需要展开两层，可以这样使用：
arr.flat(2) // [1, 2, 3, 4, 5, 6]
自从 ES6 后，我们已经可以使用展开运算符 ... 来展开数组。那么，Array.flat() 有何优势呢？我们来看下以下例子：
const arr = [1, 2, , 3, 4, [5, 6, [7, 8]]]; const arr1 = [...arr]; const arr2 = arr.flat();
在以上例子中，展开运算符不能处理数组中的空位，空位将被忽略。而 flat 方法能够将空位转化为 undefined。另外，展开运算符也不能处理多层嵌套的数组，此时使用 flat() 方法会更为简便。
注意事项
使用 Array.flat() 方法时，需注意以下几点：
flat() 方法返回一个新数组，并没有改变原来的数组。
使用 flat() 方法可能会增加内存开销，尤其是在处理大型数组时。
函数的参数是一个可选参数，但是请注意，如果不提供 depth 参数，flat() 方法只能够展开一层。
数组中的空位会被转化为 undefined。
实际使用
下面是一些实际应用 Array.flat() 方法的例子：
1. 将多层嵌套的数组展开
const arr = [1, 2, , 3, 4, [5, 6, [7, 8]]]; const arr2 = arr.flat(2); // [1, 2, 3, 4, 5, 6, 7, 8]
2. 一次性移除多个数组元素
const arr = [1, 2, 3, 4, 5, 6, 7, 8]; const removed = arr.splice(1, 3, 'a', 'b', 'c'); const flatArr = arr.flat(); // [1, "a", "b", "c", 5, 6, 7, 8]
3. 对嵌套的数组进行映射
const arr = [1, 2, [3, 4]]; const mappedArr = arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6, 4, 8]
4. 删除数组中的空位
const arr = [1, , , 2, , 3]; const flatArr = arr.flat(); // [1, 2, 3]
总结
Array.flat() 方法是一个非常实用的特性，在处理多层嵌套的数组时非常便捷。使用时只需注意一些细节，包括内存使用、空位的处理等等，就能够轻松地将一个嵌套的数组变为一个平铺的数组。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649a1c4a48841e98946facff