ES12 中的 Array.prototype.flatMap 方法的介绍与应用实践

在 ES6 中，我们已经学习了 Array.prototype.map() 方法，它可以将数组中的每个元素映射到一个新的数组中。但是，如果我们想要将每个元素映射到多个元素，并将这些元素组合成一个新的数组，我们该怎么办呢？这时候，ES12 中的 Array.prototype.flatMap() 方法就派上用场了。

介绍

Array.prototype.flatMap() 方法可以将一个数组映射到一个新的数组中，并将这些新的数组组合成一个新的数组。具体来说，它会先使用 map() 方法将每个元素映射到一个新的数组中，然后将这些新的数组展平成一个新的数组。

flatMap() 方法的语法如下：

arr.flatMap(callback(currentValue[, index[, array]])[, thisArg])

其中，callback 是一个函数，它的参数和 map() 方法的 callback 参数一样，currentValue 是当前处理的元素，index 是当前处理元素的索引，array 是原始数组。

应用实践

我们来看一个简单的例子，假设我们有一个二维数组，每个子数组都包含一些数字，我们想将这些数字相加并返回一个新的数组。我们可以使用 map() 方法来实现这个功能，然后使用 flat() 方法将结果展平。这个过程可以用下面的代码来实现：

const arr = [[1, 2], [3, 4], [5, 6]];
const result = arr.map((subArr) => subArr.reduce((acc, cur) => acc + cur, 0)).flat();
console.log(result); // [3, 7, 11]

但是，使用 flat() 方法有一个问题，就是如果我们的数组中有嵌套数组，那么我们需要多次调用 flat() 方法才能将所有的嵌套数组展平。这时候，我们可以使用 flatMap() 方法来简化这个过程。下面的代码演示了如何使用 flatMap() 方法来实现上面的功能：

const arr = [[1, 2], [3, 4], [5, 6]];
const result = arr.flatMap((subArr) => subArr.reduce((acc, cur) => acc + cur, 0));
console.log(result); // [3, 7, 11]

可以看到，使用 flatMap() 方法可以将代码简化了很多。

除了上面的例子，flatMap() 方法还可以用于处理嵌套数组、过滤数组等等。下面的代码演示了如何使用 flatMap() 方法来过滤数组：

const arr = [1, 2, 3, 4, 5];
const result = arr.flatMap((num) => num % 2 === 0 ? [num] : []);
console.log(result); // [2, 4]

可以看到，我们只返回了偶数，使用 flatMap() 方法可以非常方便地实现这个功能。

总结

ES12 中的 Array.prototype.flatMap() 方法可以将一个数组映射到一个新的数组中，并将这些新的数组组合成一个新的数组。它可以简化代码，并且可以用于处理嵌套数组、过滤数组等等。在实际开发中，我们可以根据具体的需求来选择使用 map() 方法还是 flatMap() 方法，以达到更好的效果。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663e4f68d3423812e4c83a3d