导言
JavaScript 是世界上最流行的编程语言之一，它在不断演进和改进。在 ECMAScript 2019 标准中，新增了一个 Array.prototype.flatMap() 方法，使得数组平铺成为可能。本文将介绍这个方法的用法以及实现过程，并提供简单易懂的示例代码供读者实践。
方法介绍
Array.prototype.flatMap() 方法基于 map() 和 flat() 方法，它首先对数组的每个元素进行一次映射，然后将返回的新数组压缩成一个数组。具体而言，该方法对原数组的每个元素都调用一个提供的转换函数（callback），并使用 flat() 方法将结果降维一层。使用 flatMap() 方法可以避免在执行变换和压平的过程中创建一个临时数组。
方法语法
arr.flatMap(callback[, thisArg])
参数说明：
callback：要对数组每个元素执行的函数，这个函数可以有三个参数：当前元素值、当前索引、当前所属的数组。thisArg：执行callback的时候，可用作callback内this关键字的对象。
实践示例
在实际开发中，经常会出现需要对数组进行多级数据结构的操作。接下来，我们用一个实际的示例来介绍 flatMap() 方法如何实现数组的平铺。
示例 1：将数组中的嵌套子数组平铺
const arr = [[0, 1], [2, 3], [4, 5]]; // 使用 flat() 方法 const flatArr = arr.flat(); // [0, 1, 2, 3, 4, 5] // 使用 flatMap() 方法 const flatMapArr = arr.flatMap(it => it); // [0, 1, 2, 3, 4, 5]
上述代码中，我们定义了一个数组 arr，数组中包含三个子数组，每个子数组包含两个元素。我们可以使用 flat() 方法或者 flatMap() 方法将它们摊平成一个一维数组，但是在使用 flat() 方法时需要指定要降维几层，而使用 flatMap() 方法则简单很多。
示例 2：对数组元素进行多级操作
const arr = [1, 2, 3, 4]; // 对数组中的每个元素进行平方和开根操作 const res1 = arr.map(it => Math.sqrt(it * it)).reduce((acc, cur) => acc + cur); // 5 // 对数组中的每个元素进行平方和开根操作，使用 flatMap() 方法 const res2 = arr.flatMap(it => Math.sqrt(it * it)).reduce((acc, cur) => acc + cur); // 5
上述代码中，我们定义了一个数组 arr，数组中包含四个整数。我们要对数组中的每个元素进行平方和开根操作。使用 map() 方法可以很容易地实现这个功能，但是需要在最后使用 reduce() 方法求和。而使用 flatMap() 方法，则可以使代码更加简洁明了。
方法兼容性
flatMap() 方法是在 ECMAScript 2019 标准中新增的，因此不是所有浏览器都支持该方法。可以通过如下代码进行兼容性判断：
if (!Array.prototype.flatMap) {
Array.prototype.flatMap = function(callback) {
// TODO: 实现 fallback 代码
}
}总结
本文介绍了 ES10 中的 Array.prototype.flatMap() 方法及其用法。通过实例代码的介绍，读者应该已经掌握了使用该方法进行数组平铺的技巧。在实际开发中，我们可以合理地运用 flatMap() 方法，优化代码的逻辑和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d44e15b5eee0b525bd7d88