在 JavaScript 中，一个常见的操作是将数组中的项转换为新的数组，然后再将结果合并成一个新的数组。在旧的代码版本中，我们经常使用 Array.map() 方法来完成这个操作。但是，如果中间的转换过程是嵌套数组，我们需要先使用 Array.map() 转换一次，再使用 Array.flat() 来将嵌套的数组拉平。这个过程十分繁琐。ES10 中新增的 Array.flatMap() 方法，可以大大简化这个过程。
Array.flatMap() 的含义
在 ES10 中，新增了 Array.flatMap() 方法，它可以在一个步骤中完成一系列操作。用于将一个数组映射为另一个数组，并通过在映射后的数组上调用一个提供的回调函数来将其扁平化。它的语法如下：
array.flatMap(function callback(currentValue[, index[, array]]) { // return element for new_array }[, thisArg])
该方法包含两个参数：一个回调函数和一个 thisArg 参数。
- 回调函数：该回调函数将应用于数组中的每个元素，并返回映射后的新元素。回调函数可以包含三个参数：currentValue、index 和 array。
- currentValue：必需，当前元素的值。
- index：可选，当前元素的索引。
- array：可选，正在处理的数组。 此回调函数必须返回一个数组。
- thisArg：可选，执行回调函数时要使用的 this 值。
实例演示
现在我们来看看实例演示。
首先，我们定义一个数组，里面装有两个嵌套数组：
const fruits = [ ['apple', 'banana', 'orange'], ['pear', 'kiwi'] ];
接下来，我们使用 Array.map() 和 Array.flat() 方法来将这个二维数组转换成一维数组：
const flattenedFruits = fruits.map(fruit => fruit.map(name => name.toUpperCase())).flat();
以上代码首先使用 Array.map() 将 fruits 数组转换成大写形式的二维数组，然后使用 Array.flat() 将这个二维数组扁平化，最终返回一个一维数组。这个过程需要两个方法才能完成。
接下来，我们将上面的代码使用 Array.flatMap() 方法来优化：
const flattenedFruits = fruits.flatMap(fruit => fruit.map(name => name.toUpperCase()));
我们使用 Array.flatMap() 对 fruits 数组进行了转换，将其转换成了大写形式的一维数组。这个过程只需要一个方法，代码变得更加简洁了。
总结
ES10 中新增的 Array.flatMap() 方法可以帮助我们在一步中完成数组的映射和扁平化操作，让代码更加简洁高效。在实际开发中，我们可以根据具体需求选择使用该方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649a3be148841e98947169c7
