flatMap()：map + flat 的组合拳，简化 JavaScript 数组处理逻辑

JavaScript , , , ,

JavaScript 中的 flatMap() 方法是数组处理的一把利器，它巧妙地结合了 map() 和 flat()
的功能，让代码更简洁、更优雅。

什么是 flatMap()？

flatMap() 方法首先对数组的每个元素执行映射函数（类似 map() ），然后将结果扁平化一层（类似 flat(1)
）。这个”二合一”的操作使得处理嵌套数组结构变得更加简单。

基本语法

const newArray = array.flatMap(callback(currentValue, index, array) {  
// 返回处理后的元素  
}, thisArg);
  • callback ：对每个元素执行的函数
  • thisArg ：（可选）执行 callback 时用作 this 的值

使用场景与示例

1. 扁平化嵌套数组结构

// 传统方法  
const result1 = [1, 2, 3].map(x => [x * 2]).flat();  
// 使用 flatMap  
const result2 = [1, 2, 3].flatMap(x => [x * 2]);  
// 两者结果相同：[2, 4, 6]

2. 过滤并转换元素

flatMap() 可以同时完成筛选和转换的工作：

3. 处理可能存在的元素

4. 展开对象数组中的一对多关系

性能优势

使用 flatMap() 相比分别调用 map() 和 flat() 有性能优势：

  1. 只需遍历数组一次
  2. 减少中间数组的创建
  3. 代码更加简洁

注意事项

  • flatMap() 只会将结果扁平化一层
  • 如果需要多层扁平化，仍需使用 flat(depth)
  • IE 浏览器不支持此方法，需要使用 polyfill

实际应用案例

文本分析

数据处理管道

const userData = [  
  { name: "Alice", scores: [85, 90, 92] },  
  { name: "Bob", scores: [75, 80] },  
  { name: "Charlie", scores: [95, 85, 90, 100] }  
];  
  
const highScores = userData  
  .flatMap(user =>  
    user.scores.map(score => ({ name: user.name, score }))  
  )  
  .filter(item => item.score >= 90);  
// 结果是所有90分以上成绩的对象数组