ES11 Array 的方法：flat() 和 flatMap()

在 ES11（也就是 ECMAScript 2020）中，JS 提供了两个新的数组方法：flat() 和 flatMap()。这两个方法在处理嵌套数组的情况下非常有用，可以大大减少代码量，提高开发效率。本文将详细介绍这两个方法的用法和优势，并提供示例代码以帮助读者更好地掌握。

flat() 方法

flat() 方法用于将嵌套的数组“展开”，并返回一个新的一维数组。它可以一次性将多层嵌套的数组展开为一个平面数组。其语法如下：

array.flat([depth]);

其中，array 表示要操作的数组，depth 表示展开的深度，默认值为 1，表示只展开一层。

下面是示例代码：

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

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

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

上面的代码中，arr1 是一个二维数组，通过调用 arr1.flat() 方法，将其展开为一个一维数组 [1, 2, 3, 4]。同样，arr2 是一个多层嵌套的数组，展开后得到 [1, 2, 3, [4, 5]]，arr3 通过传入深度为 2 的参数，将嵌套的数组全部展开为一个一维数组 [1, 2, 3, 4, 5]。

需要注意的是，flat() 方法会移除数组中的空元素、未定义元素、null元素和NaN元素等，即做到了简化与过滤。

flatMap() 方法

flatMap() 方法可以同时执行 map() 和 flat() 操作，并将结果展开为一个新数组。其语法如下：

array.flatMap(callback);

其中，callback 是一个针对每个元素执行的函数，返回值可以是单个元素或者一个由元素组成的数组。它与 map() 方法类似，但对于返回值是数组的情况，flatMap() 会自动将其展开为一个新数组。下面是示例代码：

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

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

上面的代码中，arr1 是一个一维数组，arr1.flatMap(x => [x * 2]) 相当于先执行了 map() 方法，将每个元素都乘以 2，得到 [2, 4, 6]，接着再执行 flat() 方法，将其展开为一个新数组。同理，arr1.flatMap(x => [[x * 2]]) 可以得到嵌套的数组 [[2], [4], [6]]。

需要注意的是，flatMap() 方法与 map() 方法不同的是，它会去除矩阵中的空元素，null元素和NaN元素等。这对于节省制造每个字节的空间和避免垃圾和资源消耗非常重要。

结论

本文介绍了 ES11 Array 的方法：flat() 和 flatMap()，它们可以很好地处理嵌套的数组，使代码变得更加简洁而高效。flat() 可以将多层嵌套的数组展开成一个一维数组，而 flatMap() 可以同时进行 map() 和 flat() 操作，并将结果展开为一个新数组。这两个方法的优势为开发者们带来了很好的指导和借鉴。

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