flatMap更适合边映射边过滤，因其映射返回空数组[]时自动丢弃实现过滤，全程仅一次遍历且无中间数组；而map+flat(1)需两次遍历并额外分配内存。
flatMap 为什么比 map + flat(1) 更适合过滤后拍平
因为 flatMap 先执行映射函数，再自动执行一层 flat，而映射函数可以返回空数组（[]）来实现“过滤”，整个过程只遍历一次。如果用 map + flat(1)，即使 map 返回空数组，也要先构造再展开，多一次中间数组分配。
常见错误是误以为 flatMap 能直接过滤掉 undefined 或 null —— 它不会。你必须显式返回 [] 才能跳过该元素。
- 返回
[item]→ 保留该项 - 返回
[]→ 过滤掉该项（不占最终结果位置） - 返回
[a, b]→ 拍平插入两个元素 - 返回
item（非数组）→ 会被包装成[item]，等效于返回单元素数组
处理嵌套对象列表并按条件筛选子项
典型场景：一个用户列表，每个用户有 posts 数组，只想要所有「已发布且字数 > 100」的帖子，并拉成一维数组。
const users = [
{ id: 1, posts: [{ id: 101, published: true, content: 'a'.repeat(120) }] },
{ id: 2, posts: [{ id: 102, published: false, content: 'x' }, { id: 103, published: true, content: 'b'.repeat(50) }] }
];
<p>const publishedLongPosts = users.flatMap(user =>
user.posts.filter(post => post.published && post.content.length > 100)
);
// → [{ id: 101, ... }]，注意：这里没拍平，因为 filter 返回数组，flatMap 会把它当单个元素展开？错！
上面写法实际返回的是 [[{...}]] 的扁平化结果，但因 filter 返回的是数组，flatMap 会把整个数组当作一个映射结果再展开——所以没问题。但更清晰、更可控的写法是：
const publishedLongPosts = users.flatMap(user =>
user.posts.map(post =>
post.published && post.content.length > 100 ? post : null
).filter(Boolean)
);
❌ 不推荐。这又变回 map+filter，没利用好 flatMap 的过滤能力。✅ 正确姿势是：
const publishedLongPosts = users.flatMap(user =>
user.posts
.filter(post => post.published && post.content.length > 100)
.map(post => post) // 可省略，但显式返回确保是数组项
);
其实更简洁：直接在 flatMap 回调里做条件判断并返回数组：
const publishedLongPosts = users.flatMap(user =>
user.posts
.filter(post => post.published && post.content.length > 100)
);
因为 filter 返回数组，flatMap 自动展开它 —— 这就是复合转换的核心：过滤（子数组内）+ 拍平（跨用户）一步到位。
避免 map 中返回 undefined 导致意外的 [undefined] 入列
这是最常踩的坑：flatMap 对回调返回值做隐式数组包装。如果忘记 return，或条件分支漏写 return []，就可能把 undefined 当作 [undefined] 插入结果。
const arr = [1, 2, 3];
arr.flatMap(x => {
if (x > 2) return [x * 2]; // ✅
// ❌ 缺少 else 分支，x=1 和 x=2 时返回 undefined
});
// → [undefined, undefined, [6]] → 展开后是 [undefined, undefined, 6]
正确写法必须覆盖所有分支：
- 用三元表达式：
x > 2 ? [x * 2] : [] - 用 if + explicit return：
if (x > 2) return [x * 2]; return []; - 避免大括号块级作用域，改用箭头函数单表达式体
另外注意：flatMap 不会跳过 NaN、0、false 等 falsy 值 —— 它只看返回值是不是数组，以及数组内容。
与 reduce 实现同类逻辑的性能和可读性对比
有人用 reduce 手动拼接来模拟 flatMap：
arr.reduce((acc, x) => acc.concat(condition(x) ? [transform(x)] : []), []);
这样可行，但每次 concat 都创建新数组，时间复杂度 O(n²)，而 flatMap 是引擎优化的单次遍历 + 预估容量分配，性能明显更好。V8 中 flatMap 比等价 reduce 快 2–3 倍（尤其数据量 > 10k 时）。
可读性上，flatMap 明确表达了「对每个元素映射出零或多值，然后拉平」的意图；reduce 版本需要读者反推累积逻辑，容易出错。
兼容性需留意：flatMap 是 ES2019 特性，Node.js ≥ 11.0、Chrome ≥ 69、Firefox ≥ 62 支持。旧环境需 polyfill 或降级为 map + flat（如果 flat 也未支持，则用 Array.prototype.concat(...arr)）。
真正容易被忽略的是：flatMap 的“映射函数”里不能异步，它不支持 async 回调；需要并发拍平异步结果时，得用 Promise.all + flat 组合，而不是指望 flatMap 自己处理 await。
