ECMAScript 2019 中的 Array.prototype.flatMap 方法：详解和应用场景

在 ECMAScript 2019 中，新增了一个名为 Array.prototype.flatMap 的方法，这个方法可以让我们更加方便地操作数组，尤其是在进行数组中嵌套的操作时，能够减少很多代码量。本文将详细介绍 flatMap 方法的使用方法以及应用场景，希望对大家有所帮助。

什么是 Array.prototype.flatMap 方法

Array.prototype.flatMap 方法首先会对数组中的每个元素执行一个映射函数（与 map 方法类似），然后将所有的结果展平成一个新的数组。与 Array.prototype.map 方法不同的是，flatMap 方法返回的数组是扁平化的，即如果嵌套了多层数组，flatMap 方法会将所有的子数组都展开到同一层级中。

Array.prototype.flatMap 方法的语法如下所示：

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

接收一个 callback 函数作为参数，这个函数会在数组的每个元素上执行一次，并返回一个新的数组，之后会将这个新数组展平成一维数组。

flatMap 方法的应用场景

flatMap 方法可以帮助我们在处理多层嵌套数组时更加方便地进行操作。下面我们来看一些具体的实际应用场景。

1. 多层嵌套数组的展开

假设我们有一个多层嵌套的数组，我们想要将其中的每个元素都提取出来放到新数组中，可以使用 flatMap 方法，如下所示：

const arr = [[1, 2], [3, 4], [5, 6]];
const flatArr = arr.flatMap(item => item);
console.log(flatArr); // [1, 2, 3, 4, 5, 6]

2. 对每个元素进行字符串操作

当我们想要对数组中的每个元素进行字符串操作时，可以使用 flatMap 方法，如下所示：

const arr = [1, 2, 3, 4];
const strArr = arr.flatMap(item => String(item).split('')); 
console.log(strArr); // ["1", "2", "3", "4"]

3. 对多个数组进行组合操作

当我们需要对多个数组进行组合操作时，可以使用 flatMap 方法，如下所示：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

const result = arr1.flatMap(item1 => arr2.flatMap(item2 => arr3.map(item3 => `${item1}-${item2}-${item3}`))); 
console.log(result); // ["1-4-7", "1-4-8", "1-4-9", "1-5-7", "1-5-8", "1-5-9", "1-6-7", "1-6-8", "1-6-9", "2-4-7", "2-4-8", "2-4-9", "2-5-7", "2-5-8", "2-5-9", "2-6-7", "2-6-8", "2-6-9", "3-4-7", "3-4-8", "3-4-9", "3-5-7", "3-5-8", "3-5-9", "3-6-7", "3-6-8", "3-6-9"]

总结

flatmap 方法是在 ECMAScript 2019 中新增的一个有用的方法，通过对多层嵌套数组进行扁平化操作，能够帮助我们更加便捷的处理数组。在实际应用中，我们可以通过 flatMap 方法简化代码，并提高代码的可读性和可维护性。

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