在ES9中，引入了新的Array.prototype.flat()方法，此方法能够将多维数组构造成一维数组。而又在此基础上，新增加了flatMap()方法，该方法将数组中的每个元素调用传入的函数并且将函数返回的结果拼接到一起构成新数组。与此同时，JavaScript中本身就存在的map()方法也有类似的效果。然而，flatMap()方法在使用上快捷优雅、有时比map()在性能上更优，可以极大地提升开发者的工作效率。
flatMap()与map()的区别
在简单的应用中，flatMap()与map()方法的差别不是很明显，特别是对于以下情况：
const arr1 = [1,2,3]; const arr2 = arr1.map(x => [x * 2]); const arr3 = arr1.flatMap(x => [x * 2]); console.log(arr2); console.log(arr3);
上述代码，arr2和arr3都为[2,4,6]。但是，当处理的数组嵌套多层时，flatMap()方法就体现出它快捷优雅的优势：
const arr4 = [1,2,3,[4,5]]; const arr5 = arr4.flatMap(x => x * 2); console.log(arr5);
上述代码，arr5即为[2,4,6,8,10]。这个结果是由将数组扁平化并处理，再重新组合而成，一步到位，而如果要使用map()方法来实现同样的效果，则需要配合使用filter()或reduce()等其他方法，在耗费更多时间的情况下实现同样的效果。
flatMap()与map()的性能对比
在比较性能方面，我们来做个简单的实验：
// javascriptcn.com 代码示例
const testArr = new Array(10000).fill(new Array(100).fill(1));
console.time("map");
testArr.map(arr => arr.map(x => x * 2));
console.timeEnd("map");
console.time("flatMap");
testArr.flatMap(arr => arr.map(x => x * 2));
console.timeEnd("flatMap");以上代码创建了10000个长度为100的数组，分别使用了map()和flatMap()进行处理，显然的，flatMap()优于map()方法运行了30-40倍之多！
flatMap()的使用
在使用中，flatMap()的回调函数会提取数组中每个元素得到的值并将它们扁平化到一个新数组上。我们伪代码地画出其执行流程：
[1, 2, 3].flatMap((x) => [x, x * 2]); // => [1, 2, 2, 4, 3, 6]
flatMap()的回调函数有三个参数，分别是元素的值、元素的索引、处理的数组。可以使用其中的任何一个参数，甚至是所有参数，但一定要按顺序放置。
[1, 2, 3].flatMap((value, index, array) => {
console.log(value, index, array);
return [value, index, array];
});
// => [1, 0, [1, 2, 3], 2, 1, [1, 2, 3], 3, 2, [1, 2, 3]]总结
ES9中新增加的flatMap()方法继承了map()方法的所有特性，但有着自己独特的优势。在处理数组时，它可以将多层嵌套的数组一次性扁平化，并且速度更快，提高了开发效率。在实际项目中，可以根据需求以及所处理的数组结构，灵活选用不同的方法，并且必要时配合使用其他方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653dff057d4982a6eb797ae5