前言
在前端开发中，经常会遇到需要将多维数组扁平化操作的情况。在过去，我们通常会使用递归的方式进行操作，但是这样操作并不方便，代码也容易出现问题。在 ES10 中，新增了 flatMap() 方法，可以方便地进行多维数组扁平化操作。
flatMap() 方法简介
flatMap() 方法是在 ECMA 10 《ECMAScript® 2019 Language Specification》中正式引入的。该方法返回一个新数组，新数组的每个元素是通过调用一个指定的回调函数（使用 map() 方法）获得的，然后将结果扁平化为一个新数组。它可以替代使用 map() 和 flat() 连用的操作，且代码更加简洁易读。
flatMap() 方法的语法如下：
array.flatMap(callback[, thisArg])
其中，参数 callback 是用来生成新数组每个元素的函数，它可以接受三个参数：当前元素值、元素索引和原数组本身；参数 thisArg 则是 callback 中 this 的指向。
利用 flatMap() 进行数组扁平化操作
在利用 flatMap() 进行多维数组扁平化操作中，我们首先需要了解一下 flatMap() 方法回调函数的作用。
回调函数首先需要返回一个数组，flatMap() 方法会将所有返回的数组“浅”合并到新数组中，之后再将新数组进行“一级”扁平化操作。所以，如果需要进行多维数组扁平化操作，我们只需要在回调函数中返回数组，并在数组中递归调用回调函数即可。
为了更好地理解，下面是一份利用 flatMap() 进行多维数组扁平化操作的示例代码：
const arr = [1, 2, [3, 4], [5, [6, 7]]];
const flatArr = arr.flatMap(item => {
if (Array.isArray(item)) {
return item.flatMap(subItem => {
if (Array.isArray(subItem)) {
return subItem;
} else {
return [subItem];
}
});
} else {
return [item];
}
});
console.log(flatArr); // [1, 2, 3, 4, 5, 6, 7]在上述代码中，我们首先定义了一个数组 arr，其中包含多维数据。在利用 flatMap() 进行处理时，我们首先递归调用回调函数，然后在每次的递归中返回数组，最终扁平化整个多维数组并返回单个一维数组。
总结
通过使用 flatMap() 方法，我们可以非常简洁地实现多维数组的扁平化操作，有效避免使用递归操作时的代码复杂度和问题。在实际开发中，我们可以多加利用 flatMap() 方法，提升代码效率和阅读性，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65aace0aadd4f0e0ff461e47