ES12 中的数组扁平化方法详解

在前端开发中，我们经常需要处理多层嵌套的数组，而数组扁平化就是把嵌套的多层数组展开成一维数组的过程。ES12 中新增了数组扁平化的方法，这篇文章将会对这些方法进行详细介绍。

一、flat() 方法

flat() 方法用于返回一个扁平化后的数组。默认只会展开一层，可以传入一个参数来指定展开的层数。

示例代码：

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

在上面的代码中，我们将数组 arr 中的多层嵌套进行了扁平化，并且指定了要展开的层数为 2，结果变成了一维数组。

需要注意的是，flat() 方法会把数组中的 null 和 undefined 值强制转换为空数组。

二、flatMap() 方法

flatMap() 方法是 flat() 方法的升级版，它对每个元素进行一次操作，然后对返回的结果进行扁平化，最后返回一个新的数组。

示例代码：

const arr = [1, 2, 3];
const flatMapArr = arr.flatMap(item => [item * 2]);
console.log(flatMapArr); // [2, 4, 6]

在上面的代码中，我们对数组 arr 中的每个元素都乘以 2，然后返回一个新的一维数组。

三、flat​MapDeep() 方法

flatMapDeep() 方法是 flatMap() 方法的扩展版，它会将多层嵌套数组进行扁平化。与 flat() 方法不同的是，flatMapDeep() 方法针对所有的嵌套层级都有效。

示例代码：

const arr = [1, 2, [3, 4, [5, 6]]];
const flatMapDeepArr = arr.flatMapDeep(item => [item * 2]);
console.log(flatMapDeepArr); // [2, 4, 6, 8, 10, 12]

在上面的代码中，我们对多层嵌套的数组进行了扁平化操作，并且对每个元素都乘以 2，最终得到了一个新的一维数组。

四、总结

ES12 中的数组扁平化方法可以很方便地处理多层嵌套的数组，让代码更加简洁明了。

其中，flat() 方法可以指定展开的层数，flatMap() 方法可以对每个元素进行操作，flatMapDeep() 方法可以扁平化多层嵌套数组。

在实际使用中，我们可以根据实际需求选用不同的方法，提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65460f617d4982a6ebfd6267