介绍
ES10 (ECMAScript 2019) 添加了两个新的数组方法 flat() 和 flatMap()，它们可以更方便地处理多维数组。
flat() 方法接收一个可选的 depth 参数，表示要展平的层数。默认值为 1，即只展平一层。
flatMap() 方法则相当于先使用 map() 方法处理数组，然后再使用 flat() 方法展平结果数组。
语法
-- ------ -- ------------------ -- --------- -- ---------------------- ----------
arr：要处理的数组。depth：要展平的层数。默认值为 1。callback：映射函数，接收三个参数currentValue，index，arr。thisArg：执行callback时使用的this值。
使用示例
下面给出一个多维数组的例子：
----- --- - - -- --- --- --- --- ---- ----- --- --- --- --
flat() 方法
要展平这个多维数组，可以使用 flat() 方法：
------------------------ -- --- -- -- -- --- --- ---- --- --- ---
默认情况下，flat() 方法只展平一层。如果要展平多层，可以传递一个整数作为 depth 参数：
------------------------- -- --- -- -- -- -- -- --- --- -- ---
如果不确定要展平的层数，可以使用 Infinity：
-------------------------------- -- --- -- -- -- -- -- -- -- -- ---
注意，flat() 方法不会改变原数组，而是返回一个新数组。
flatMap() 方法
flatMap() 方法是 map() 方法和 flat() 方法的组合，可以直接对多维数组进行映射和展平。
例如，将原数组中每个元素加 1，再展平得到一个新数组：
----- ---- - ------------- -- - - --- ------------------ -- --- -- -- -- -- -- -- -- --- ---
flatMap() 方法接收一个映射函数 callback，它的返回值可以是一个数组或另一个类数组对象。flatMap() 会将这些值展平到一个新数组中，并返回这个新数组。
----- ---- - ------------- -- -- - ---- ------------------ -- --- -- -- -- --- --- --- --- --- ---
除了映射函数 callback，flatMap() 方法还接收一个可选的 this 值参数。
例如，将原数组中的每个字符串转为小写，再用逗号连接起来：
----- ---- - --------- ---------------------------- - ------ -------------------------- -- ----- ------------------ -- ----- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
指导意义
flat() 和 flatMap() 方法可以大大简化对多维数组的处理。它们可以减少冗余的代码，使代码更易读、更易懂。
在实际项目中，我们经常需要处理二维数组、树形结构等多层嵌套的数据，这时使用 flat() 和 flatMap() 方法可以大大提高代码的效率和可维护性。
总结
ES10 中添加了 flat() 和 flatMap() 两个数组方法，可以更方便地处理多维数组。
flat() 方法用于展平数组，可以传递一个可选的 depth 参数，表示要展平的层数。
flatMap() 方法则相当于使用 map() 和 flat() 两个方法的组合，可以先进行映射，再进行展平。它接收一个映射函数 callback 和一个可选的 this 值参数。
在实际项目中，使用这两个方法可以减少冗余的代码，使代码更易读、更易维护。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64d47257b5eee0b525bfd977