ES10 中使用 flat() 来展开数组：让你的代码更加简洁

在开发过程中，处理多维数组是很常见的需求。在 ES10 中，新加入的 flat() 方法可以让你更加轻松地展开多维数组。

flat() 方法的作用

flat() 方法可以将多维数组展开为一维数组。它接受一个可选参数，表示要展开数组的深度。默认值为 1，即只展开一层。

使用 flat() 方法来展开多维数组

下面的代码演示了如何使用 flat() 方法来展开一个多维数组：

const arr = [1, 2, [3, 4]];
const flatArr = arr.flat();
console.log(flatArr);  // [1, 2, 3, 4]

上面的代码中，数组 arr 包含两个数字和一个子数组。使用 flat() 方法将子数组展开后得到了一维数组 flatArr。

使用 flat() 方法展开多维数组深度

如果要展开的数组的深度超过默认值 1，可以在调用 flat() 方法时传递一个数字参数，表示要展开的深度。下面的代码展示了如何展开一个深度为 2 的多维数组：

const arr = [1, 2, [3, [4, 5]]];
const flatArr = arr.flat(2);
console.log(flatArr);  // [1, 2, 3, 4, 5]

上面的代码中，数组 arr 包含两个数字和一个深度为 2 的子数组。使用 flat() 方法将子数组展开后得到了一维数组 flatArr。

flat() 方法的注意点

需要注意的是，flat() 方法会将子数组中的 undefined、null、NaN 和空位全部删除。下面的代码展示了删除 undefined 的效果：

const arr = [1, 2, [undefined, 4]];
const flatArr = arr.flat();
console.log(flatArr);  // [1, 2, 4]

如果想要保留这些值，可以使用 flatMap() 方法来替代 flat() 方法。

总结

通过使用 ES10 中新增的 flat() 方法，我们可以更加轻松地展开多维数组，使我们的代码更加简洁，减少了不必要的循环。但需要留意的是，不要因为使用 flat() 方法而忽略了需要保留的特殊值。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6495687348841e989429929c