在 JavaScript 中，数组是非常常用的数据结构，而 ES2020 中新增了一个 Array 的方法 flat()，可以将嵌套的数组扁平化。该方法的使用非常方便，但是在实际开发中，我们需要注意一些坑点，本文将介绍这些坑点并给出详细的解决方法。
使用场景
首先了解一下 flat() 方法的使用场景。假设有如下的数组：
const arr = [[1, 2], [3, [4, 5]], 6];
如果我们想将这个嵌套的数组扁平化，可以使用 flat() 方法：
const flatArr = arr.flat(); // [1, 2, 3, 4, 5, 6]
其中，flat() 方法可以传入一个参数，表示要扁平化的层数。比如如果我们只想扁平化一层，可以这样写：
const flatArr = arr.flat(1); // [1, 2, 3, [4, 5], 6]
如果我们想扁平化所有层，可以传入 Infinity：
const flatArr = arr.flat(Infinity); // [1, 2, 3, 4, 5, 6]
坑点
在实际开发中，我们需要注意一些坑点，避免出现一些意外的结果。
坑点一：空位会被去除
在使用 flat() 方法时，需要注意空位会被去除。比如：
const arr = [1, , [2, 3]]; const flatArr = arr.flat(); // [1, 2, 3]
数组 arr 中有一个空位，使用 flat() 方法后，空位被去除了。
坑点二：不是数组会被跳过
在使用 flat() 方法时，需要注意数组中的非数组元素会被跳过。比如：
const arr = [1, [2, 3], 4, 5]; const flatArr = arr.flat(); // [1, 2, 3, 4, 5]
数组 arr 中有两个非数组元素 1 和 4、5，使用 flat() 方法时这些元素会直接被保留。
坑点三：flatten 的效率问题
在使用 flat() 方法时，需要注意 flatten 的效率问题。如果有多个嵌套的数组，使用 flat() 方法会导致多次创建新的数组，并且会占用大量的内存。下面是一个例子：
const arr = Array(100000).fill([1, 2, 3]); const flatArr = arr.flat(Infinity);
在这个例子中，我们创建了一个包含 100000 个子数组的数组，并使用 flat() 方法来扁平化这个数组。这个操作会创建 99999 个新数组，占用大量内存，效率非常低下。
解决方法
为了避免出现上述问题，我们可以采用一些解决方法来提高 flatten 的效率和减少内存占用。
解决方法一：使用循环代替 flat()
在遇到多个嵌套的数组时，使用 flat() 方法效率较低，我们可以使用循环的方式代替 flat() 方法。下面是一个使用循环代替 flat() 方法的示例代码：
// javascriptcn.com code example
function flatten(arr) {
const res = [];
for (let i = 0, len = arr.length; i < len; i++) {
const item = arr[i];
if (Array.isArray(item)) {
res.push(...flatten(item));
} else {
res.push(item);
}
}
return res;
}
const arr = Array(100000).fill([1, 2, 3]);
const flatArr = flatten(arr);在这个代码中，我们使用了递归的方式来遍历数组，如果遇到数组，就递归调用 flatten() 方法，直到遇到非数组元素，将其加入到结果数组中。使用这种方式可以减少创建新数组的次数和占用内存的空间。
解决方法二：使用 flatMap()
在 ES2019 中，新增了一个 Array 的方法 flatMap()，可以代替 map() + flat() 的方式来扁平化数组。下面是一个使用 flatMap() 方法的示例代码：
const arr = Array(100000).fill([1, 2, 3]); const flatArr = arr.flatMap(item => item);
在这个代码中，我们使用了 flatMap() 方法将数组扁平化，效率比使用 flat() 方法要高，也不会占用太多内存。
结论
在实际开发中，我们需要注意使用 flat() 方法时可能出现的一些坑点，避免出现一些意外的结果。如果有多个嵌套的数组，可以使用循环代替 flat() 方法或者使用 flatMap() 方法来提高 flatten 的效率和减少内存占用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6730177beedcc8a97c910b59