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();// 使用 flatMapconst result2 = [1, 2, 3].flatMap(x => [x * 2]);// 两者结果相同:[2, 4, 6]
2. 过滤并转换元素
flatMap() 可以同时完成筛选和转换的工作:
3. 处理可能存在的元素
4. 展开对象数组中的一对多关系
性能优势
使用 flatMap() 相比分别调用 map() 和 flat() 有性能优势:
-
只需遍历数组一次
-
减少中间数组的创建
-
代码更加简洁
注意事项
-
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分以上成绩的对象数组