在ES10版本中，新增了一种对于数组处理的API——flatMap()方法。这个方法其实是对Array.prototype.map()和Array.prototype.flat()方法的组合应用，它的作用在于将嵌套的数组打散并执行map()映射函数，最终将结果以一维的方式返回。flatMap()在实际项目中的应用十分广泛，可以帮助开发者轻松地处理嵌套数组。接下来，请跟随我一起了解一下flatMap()方法的使用。
1. 语法
flatMap()的语法如下：
let newArray = arr.flatMap(callback(element[, index[, array]])[, thisArg])
参数说明：
- callback：回调函数。它将产生一个新数组中的元素，可以接收三个参数element、index和array，分别表示当前元素、当前索引和原始数组。
- thisArg：用于调用callback的this值对象。
返回值：
一个新数组，每个元素是由调用callback函数的结果组成的，最终数组会被扁平化到一维。
2. 功能介绍
flatMap()方法主要实现两个功能：
（1）将嵌套的数组打散为一个新数组。
（2）对打散后的数组执行map()操作，返回一个新的数组。
举个例子，下面是一个嵌套数组：
let arr = [[1], [2], [3], [4, 5], [6, 7, 8]];
我们可以使用flatMap()将其打散：
let result = arr.flatMap((item)=>{
return item;
});
// result: [1, 2, 3, 4, 5, 6, 7, 8]flatMap()接收数组的每个元素，对它们执行操作并返回一个新的数组。在这个例子中，我们简单地返回了原数组中的每个元素。由于数组中有两个元素是数组，所以最终的结果是一个一维数组。
3. 优点
flatMap()方法的优点是可以用来处理嵌套的组件，使其变为一维。而且它比Promise.all()更可靠，因为它可以处理Resolve的Promise嵌套数组。
比如：
let proArr = Promise.resolve([[1, 2], [3, 4]]); proArr.then(arr=>arr.flatMap((val)=>val)) //结果[1, 2, 3, 4]
4. 示例代码
下面通过一个简单的例子，演示一下flatMap()方法的用法。
-- -------------------- ---- -------
--- --- - --- -- -- -- ---
--- ------ - ------------------ -- -
-- ----- - - --- -- -
------ ----- - -- ---- - ---
- ---- -
------ ---
-
---
-------------------- -- --- -- -- -- -- --在这个例子中，我们对数组进行了筛选，筛选出数组中的偶数，对于偶数我们返回它的前一个值和后一个值构成的数组，对于奇数则返回一个空数组，表示不处理。最终使用flatMap()方法，将数组打散并执行了map()函数的操作，将结果以一维的方式返回。
5. 总结
在ES10版本中，新增的flatMap()方法在实际开发中有着广泛的应用，它可以帮助我们轻松地处理嵌套的数组。在上面的文章中，我们详细介绍了flatMap()方法的语法和功能，以及它的优点和示例代码。相信大家已经了解了flatMap()方法的用法和作用了，希望对大家的前端学习有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649902f548841e98945f4f75