在 ES7 中，新增了一个 Array.prototype.flatMap 函数，该函数和 Array.prototype.map 函数类似，不同的是，它可以将嵌套的数组“展平”成一个新的数组，并且可以在展平之后对每一个元素进行操作。
在本文中，我们将深入探讨 Array.prototype.flatMap 函数的用法和它的实际应用场景。
语法
Array.prototype.flatMap 函数的语法如下：
array.flatMap(callback[, thisArg])
其中，callback 是一个需要执行的函数，它包含以下参数：
- currentValue：数组中当前正在处理的元素。
- index：数组中当前正在处理的元素的索引。
- arr：正在调用 flatMap 方法的数组。
这个函数必须返回一个新的数组，这个新数组将会成为 flatMap 方法的返回值。
如果提供了可选参数 thisArg，它将被用作回调函数中的 this 值。
示例
我们可以通过一个简单的示例来了解 flatMap 函数是如何工作的。假设我们有一个二维数组，每个内部数组都包含数值数据：
const arr = [[1, 2], [3, 4], [5, 6]];
我们可以使用 flatMap 函数将其展平为一个一维数组：
const flattenedArray = arr.flatMap(innerArr => innerArr); // 结果为：[1, 2, 3, 4, 5, 6]
可以看到，我们传递了一个函数 innerArr => innerArr 作为回调函数，这个函数的作用是告诉 flatMap 函数如何展平数组。因为这里我们只是将 innerArr 原样返回，所以最后得到的结果就是一个展平的一维数组。
我们还可以在展平之后对每一个元素进行操作。例如，我们可以将上面的示例再改变一下，将每个元素都乘以 2：
const flattenedArray = arr.flatMap(innerArr => innerArr.map(n => n * 2)); // 结果为：[2, 4, 6, 8, 10, 12]
可以看到，我们首先使用 innerArr.map(n => n * 2) 将每个内部数组中的元素都乘以 2，然后使用 flatMap 函数展平整个数组。
深度展平
如果我们的数组是“多维”的，也就是说它包含一些内部数组，而这些内部数组又包含一些内部数组，以此类推，那么我们可以使用 flatMap 函数进行“深度展平”。
例如，假设我们有一个包含多个内部数组的数组：
const arr = [1, [2, [3, 4]], 5];
这个数组包含三个元素，其中第二个元素是一个内部数组，而这个内部数组再包含一个内部数组。
我们可以使用 flatMap 函数进行深度展平，如下所示：
const flattenedArray = arr.flatMap(function deepFlatten(item) {
return Array.isArray(item)
? item.flatMap(deepFlatten)
: item;
});
// 结果为：[1, 2, 3, 4, 5]我们使用了一个名为 deepFlatten 的函数作为回调函数，该函数的作用是对数组进行深度展平。如果当前元素是一个数组，我们就再一次调用 deepFlatten 函数对这个数组进行展平，直到这个数组中的元素全部展平为止。
否则，我们就返回这个数组中的当前元素。这个过程将递归进行，直到我们将整个数组展平为止。
总结
Array.prototype.flatMap 函数是一个非常方便且强大的函数，可以帮助我们轻松地展平数组，并且在展平之后对每一个元素进行操作。不同于其他函数，它可以深度展平多维数组。
当需要操作多维数组数据时，我们可以使用 flatMap 函数将其展平为一维数组，然后再进行操作。如果需要对内部数组进行操作，我们也可以使用 flatMap 函数在展平之后进行操作。
ES7 中的 Array.prototype.flatMap 函数可以极大地简化我们的代码，让我们更容易处理数组数据。希望本文能够对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65938c32eb4cecbf2d847def