介绍
ES10 (ECMAScript 2019) 添加了两个新的数组方法 flat() 和 flatMap()，它们可以更方便地处理多维数组。
flat() 方法接收一个可选的 depth 参数，表示要展平的层数。默认值为 1，即只展平一层。
flatMap() 方法则相当于先使用 map() 方法处理数组，然后再使用 flat() 方法展平结果数组。
语法
// flat() 方法 arr.flat([depth]); // flatMap() 方法 arr.flatMap(callback[, thisArg]);
arr：要处理的数组。depth：要展平的层数。默认值为 1。callback：映射函数，接收三个参数currentValue，index，arr。thisArg：执行callback时使用的this值。
使用示例
下面给出一个多维数组的例子：
const arr = [ 1, [2, 3], [4, [5, 6]], [[[7, 8], 9], 10] ];
flat() 方法
要展平这个多维数组，可以使用 flat() 方法：
console.log(arr.flat()); // [1, 2, 3, 4, [5, 6], [[7, 8], 9], 10]
默认情况下，flat() 方法只展平一层。如果要展平多层，可以传递一个整数作为 depth 参数：
console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6, [7, 8], 9, 10]
如果不确定要展平的层数，可以使用 Infinity：
console.log(arr.flat(Infinity)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
注意，flat() 方法不会改变原数组，而是返回一个新数组。
flatMap() 方法
flatMap() 方法是 map() 方法和 flat() 方法的组合，可以直接对多维数组进行映射和展平。
例如，将原数组中每个元素加 1，再展平得到一个新数组：
const arr2 = arr.flatMap(x => x + 1); console.log(arr2); // [2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
flatMap() 方法接收一个映射函数 callback，它的返回值可以是一个数组或另一个类数组对象。flatMap() 会将这些值展平到一个新数组中，并返回这个新数组。
const arr3 = arr.flatMap(x => [x * 2]); console.log(arr3); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
除了映射函数 callback，flatMap() 方法还接收一个可选的 this 值参数。
例如，将原数组中的每个字符串转为小写，再用逗号连接起来：
const arr4 = ['Hello', 'WORLD'].flatMap(function(x) {
return x.toLowerCase().split('');
}, ',');
console.log(arr4); // ['h', 'e', 'l', 'l', 'o', ',', 'w', 'o', 'r', 'l', 'd']指导意义
flat() 和 flatMap() 方法可以大大简化对多维数组的处理。它们可以减少冗余的代码，使代码更易读、更易懂。
在实际项目中，我们经常需要处理二维数组、树形结构等多层嵌套的数据，这时使用 flat() 和 flatMap() 方法可以大大提高代码的效率和可维护性。
总结
ES10 中添加了 flat() 和 flatMap() 两个数组方法，可以更方便地处理多维数组。
flat() 方法用于展平数组，可以传递一个可选的 depth 参数，表示要展平的层数。
flatMap() 方法则相当于使用 map() 和 flat() 两个方法的组合，可以先进行映射，再进行展平。它接收一个映射函数 callback 和一个可选的 this 值参数。
在实际项目中，使用这两个方法可以减少冗余的代码，使代码更易读、更易维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d47257b5eee0b525bfd977