在 ES11（也就是 ECMAScript 2020）中，JS 提供了两个新的数组方法：flat() 和 flatMap()。这两个方法在处理嵌套数组的情况下非常有用，可以大大减少代码量，提高开发效率。本文将详细介绍这两个方法的用法和优势，并提供示例代码以帮助读者更好地掌握。
flat() 方法
flat() 方法用于将嵌套的数组“展开”，并返回一个新的一维数组。它可以一次性将多层嵌套的数组展开为一个平面数组。其语法如下：
--------------------
其中，array 表示要操作的数组，depth 表示展开的深度，默认值为 1，表示只展开一层。
下面是示例代码：
----- ---- - --- -- --- ---- ------------------------- ----- -- -- -- ----- ---- - --- -- --- --- ----- ------------------------- ----- -- -- --- --- ----- ---- - --- -- --- --- ----- -------------------------- ----- -- -- -- --
上面的代码中，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() 操作，并将结果展开为一个新数组。其语法如下：
------------------------
其中，callback 是一个针对每个元素执行的函数，返回值可以是单个元素或者一个由元素组成的数组。它与 map() 方法类似，但对于返回值是数组的情况，flatMap() 会自动将其展开为一个新数组。下面是示例代码：
----- ---- - --- -- --- -------------------------- -- -- - ----- ----- -- -- ----- ---- - --- -- --- -------------------------- -- --- - ------ ------- ---- ----
上面的代码中，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