在 ECMAScript 2019（也称为 ES10）中，新增了一个非常实用的 Array 方法：Array.flatMap()。该方法可以让开发者轻松地将嵌套的数组拍平（也称为 “扁平化”），并通过一个函数来处理每个数组元素。
简介
Array.flatMap() 方法首先对原始数组使用 map() 方法来处理每一个元素，并将结果组合在一起，最后将结果扁平化为一个新数组。该方法的语法如下：
const newArr = arr.flatMap(callback(currentValue[, index[, array]]) {
// return element for newArr
}[, thisArg])其中，callback 参数是一个函数，该函数接受以下参数：
- currentValue：已经被遍历的当前元素
- index（可选）：当前元素的索引
- array（可选）：整个原始数组
flatMap() 方法与 map() 方法不同的是，它可以在回调函数中返回嵌套的数组。该方法会将这些嵌套的数组连接在一起，从而形成一个新的扁平化数组。
示例
假设我们有一个数组，每个元素都是一个名称的字符串列表，如下所示：
const arr = [ ['apple', 'banana', 'cherry'], ['blackberry', 'blueberry', 'raspberry'], ['kiwi', 'mango', 'papaya'] ];
我们可以使用 Array.flatMap() 方法将这些嵌套的数组拍平，并通过一个回调函数来创建一个新的数组。回调函数可以选择返回一个或多个数组元素，也可以返回一个嵌套的数组：
const flatArr = arr.flatMap(fruits => {
return fruits.map(fruit => {
return fruit.toUpperCase()
})
})
// ['APPLE', 'BANANA', 'CHERRY', 'BLACKBERRY', 'BLUEBERRY', 'RASPBERRY', 'KIWI', 'MANGO', 'PAPAYA']在上面的示例中，回调函数返回一个对每个水果名称执行 toUpperCase() 方法后的数组。由于这是一个扁平化数组，所以我们没有使用任何 flattening 的库来处理该数组。
深入理解
使用 Array.flatMap() 方法可以更方便地与高阶函数一起使用，比如 Array.filter() 或 Array.reduce()。下面是一个使用 Array.filter() 的示例：
-- -------------------- ---- -------
----- ------- - --- -- -- --- --- --- ----
----- ------- - -------
---------- -- -
-- -- - - --- -- -
------ --- - - ---
- ---- -
------ ---
-
--
--------- -- -- - - ---
-- - -- -- -- --- --- --- -- -在上面的示例中，我们首先使用数组的 flatMap() 方法，然后使用数组的 filter() 方法来仅包含偶数数值，然后将序列中的每个元素分别复制一次。
请注意，在回调函数中返回空数组[]以从扁平化数组中删除元素。这个技巧非常有用，因为如果我们仅仅省略偶数的倍数，而不是删除它们的倍数，结果可能会出现问题。
总结
Array.flatMap() 方法是一个非常实用的 ECMAScript 2019 特性。使用该方法，我们可以轻松地将嵌套的数组拍平，并通过一个函数来处理每个数组元素。此外，Array.flatMap() 还允许我们使用数组中的高阶函数，如 Array.filter() 和 Array.reduce()。
在使用 Array.flatMap() 方法时，我们需要特别注意回调函数的返回值。回调函数需要始终返回一个数组（可以是空数组[]），否则扁平化数组不会正确工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64688329968c7c53b08b38b9