JavaScript 中怎么使用 flatMap 遍历并展平嵌套数组-js教程-PHP中文网

flatmap是javascript中先映射再单层展平的数组方法，等价于map后接flat(1)，但性能更优、语法更简；它对每个元素执行回调并扁平化一层结果，支持返回数组或非数组值，空数组被跳过，不修改原数组。

javascript 中怎么使用 flatmap 遍历并展平嵌套数组

flatMap 是 JavaScript 中一个非常实用的数组方法，它把 map 和 flat(1) 合并成一步：先对每个元素执行映射函数（返回一个数组或任意值），再将所有结果**只展开一层**，合并成一个新数组。

基本用法：map + 一层展平

它等价于 arr.map(...).flat(1)，但更简洁、性能略好（避免中间数组）。

传入一个回调函数，类似 map，接收 item、index、array
回调函数返回值会被“扁平化一层”——如果返回数组，内部元素直接进入结果；如果返回非数组，就原样放入结果
不修改原数组，返回一个新数组

常见场景：处理含子数组的数据结构

比如后端返回的列表中每个项带一个 tags 数组，你想提取所有标签：

const posts = [
  { id: 1, tags: ['js', 'es6'] },
  { id: 2, tags: ['react', 'hooks'] },
  { id: 3, tags: [] }
];
<p>const allTags = posts.flatMap(post => post.tags);
// → ['js', 'es6', 'react', 'hooks']
</p>

注意：空数组 [] 映射后展开为“无元素”，不会插入 undefined 或空位。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

和 map + flat 的区别：只展平一层

如果映射结果是**多层嵌套数组**，flatMap 不会递归展开：

[1, 2, 3].flatMap(x => [[x * 2]]);
// → [[2], [4], [6]]   ← 只展开了外层数组，内部 [[2]] 变成 [2]，但 [2] 还是数组
<p>// 对比：
[1, 2, 3].map(x => [[x * 2]]).flat(2);
// → [2, 4, 6]         ← flat(2) 才能完全展平两层
</p>

需要深度展平请用 flat(Infinity) 或递归函数，flatMap 仅限一层。

返回非数组时的行为

回调返回字符串、数字、对象等非数组值，会直接作为单个元素加入结果：

['a', 'b'].flatMap(x => x + '1');
// → ['a1', 'b1']
<p>[1, 2].flatMap(x => x * 2);
// → [2, 4]</p><p>[1, 2].flatMap(x => [x, x * 2]);
// → [1, 2, 2, 4]
</p>

这个特性让它比单纯 flat().map() 更灵活——你不需要总返回数组。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南