在 ES11 中使用数组 flatMap：一个高效而优美的语法
在 ES11 中，新增了一个非常方便的数组函数——flatMap，让处理数组变得更加优美和高效。
flatMap 函数顾名思义，即是“flatten”（扁平化，即将多维数组变成一维数组）和“map”（映射）的组合。我们将在本文中深入解析 flatMap 函数的语法和使用方法，并提供示例代码和详细说明。
一、背景介绍和使用场景
在实际项目中，经常会遇到需要处理多维数组的情况，比如将数组中的每一项都进行一定的计算或者筛选，并将结果保存在新的数组中。在 ES6 中，我们使用 map 函数可以轻松实现这个功能，例如下面这段代码：
const arr = [[1, 2, 3], [4, 5], [6]]; const result = arr.map(item => item.filter(x => x > 2)); console.log(result); // [[3], [4, 5], []]
这段代码的作用是将 arr 数组中的每一项都进行一定的筛选，如果数组中的元素值大于 2，则将其保留，否则舍去，并将结果返回到 result 数组中。
但我们也许想要的是将筛选之后的元素扁平化，即将二维数组转化为一维数组。这一情况下，我们可以使用 flat 函数：
const arr = [[1, 2, 3], [4, 5], [6]]; const result = arr.map(item => item.filter(x => x > 2)).flat(); console.log(result); // [3, 4, 5]
这段代码的效果是将 map 筛选之后的结果使用 flat 函数进行扁平化，并存储到 result 数组中。但这种方法有一个缺陷，就是使用 flat 之后，无法再进行其他的 map 筛选操作。这时，我们就需要使用 flatMap 函数。
二、使用 flatMap 函数
flatMap 函数是 ES11 新增的一个函数，它既可以进行 map 操作，也可以进行 flatten 操作。我们直接看一下例子：
const arr = [[1, 2, 3], [4, 5], [6]]; const result = arr.flatMap(item => item.filter(x => x > 2)); console.log(result); // [3, 4, 5]
这段代码的效果和上面的示例代码一模一样，但是，flatMap 同时实现了 map 和 flatten 操作，这样，在第一次 map 操作之后，之后就可以进行更多的 map 和 filter 操作，而不需要使用 flat 函数。
关于 flatMap 函数的语法，其实跟 map 函数非常类似，唯一的区别就是 flatMap 外层函数应该返回一个数组，而 map 函数返回的是任意类型的值。例如：
const arr = [1, 2, 3]; const result = arr.flatMap(item => [item * 2]); console.log(result); // [2, 4, 6]
这段代码的作用是将 arr 数组中的每一项都乘以 2，并存储到 result 数组中。注意，这里的 flatMap 外层函数返回的是一个数组，而不是 map 函数中的任意类型的值。
三、总结
在实际的开发中，对于一些多维数组的操作，我们可以使用 flatMap 进行处理。flatMap 不仅实现了 map 操作，也实现了 flatten 操作，可以让处理数组的操作更加优雅和高效。
同时，flatMap 的语法也非常简单，只需要掌握其与 map 函数类似的语法，即可快速学习和应用。请结合实际情况，灵活应用 flatMap 函数，提高代码的可读性和执行效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b5608968c7c53b0ab05ad