什么是 Array.prototype.flatMap？
Array.prototype.flatMap 是 ES7 （ ECMAScript 2016）中新增的数组方法，它的作用是将数组扁平化后，对每个元素执行一个指定的函数，然后将结果组成一个新的数组。
具体来说，flatMap 操作会对原数组中的每个元素执行一个指定的函数，然后将所有函数执行的结果按照顺序组成一个新的数组返回。
举个例子：
const arr = [1, 2, 3]; const result = arr.flatMap(x => [x, x * 2]); console.log(result); // [1, 2, 2, 4, 3, 6]
上面的例子中，flatMap 对数组 [1, 2, 3] 执行了一个函数 x => [x, x * 2]，这个函数的作用是对每个元素都返回一个数组，包含原始值和原始值乘以 2，最终得到的结果数组是 [1, 2, 2, 4, 3, 6]。
flatMap 的使用技巧
扁平化嵌套数组
一个常见的用例是扁平化嵌套数组。在 ES6 中，我们可以使用 Array.prototype.flat 方法来实现这样的需求。但在数组元素嵌套层次较深的情况下，使用 flat 很容易出现回调地狱的情况。
使用 flatMap 可以避免回调地狱，让代码更加简洁。
const arr = [[1, 2], [3, 4], [5, 6]]; const result = arr.flatMap(x => x); console.log(result); // [1, 2, 3, 4, 5, 6]
上面的例子中，我们将一个二维数组扁平化为一维数组。
移除数组中的空值
在实际项目中，我们有时需要相关的数据集中在一起，如下所示：
const userInfo = [
{ name: 'Mike', hobbies: ['reading', '', 'swimming'] },
{ name: 'John', hobbies: ['', 'running'] },
{ name: 'Marry', hobbies: ['hiking', 'traveling'] },
];如果我们需要将所有用户的爱好都合并到一个数组中，可以使用 flatMap。由于 flatMap 会忽略返回值中的空值，我们可以把空值直接去掉。
const hobbies = userInfo.flatMap(item => item.hobbies).filter(x => x); console.log(hobbies); // ["reading", "swimming", "running", "hiking", "traveling"]
上面的代码中，我们使用 filter 方法去掉了数组中的空值。
实现类似 SQL 的 join 操作
我们可以利用 flatMap 实现多个有关联的数组的联接操作，类似 SQL 中的 join 操作。
例如，我们有两个数组，一个包含学生的成绩信息，另一个包含学生的基本信息：
-- -------------------- ---- ------- ----- ------ - - - --- -- ------ -- -- - --- -- ------ -- -- - --- -- ------ -- -- -- ----- ---- - - - --- -- ----- ------ -- - --- -- ----- ------ -- - --- -- ----- ------- -- --
我们可以使用 flatMap 将这两个数组合并，然后按照学生 ID 进行联接。
const result = scores.flatMap(score => {
const studentInfo = info.find(item => item.id === score.id);
return { id: score.id, name: studentInfo.name, score: score.score };
});
console.log(result); // [{ id: 1, name: 'Mike', score: 85 }, { id: 2, name: 'John', score: 90 }, { id: 3, name: 'Marry', score: 95 }]总结
ES7 中新增的 Array.prototype.flatMap 方法可以用来在数组中执行指定操作，然后将结果组成一个新的数组。在实际项目中，可以使用 flatMap 来扁平化数组、移除数组的空值、实现类似 SQL 的 join 操作等。使用 flatMap 的好处是可以编写简洁的代码，避免回调地狱的情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c52640d20074f47a458f7a