flatMap更适合边映射边过滤，因其映射返回空数组[]时自动丢弃（实现过滤），避免map+filter的两次遍历及假值误删问题。
flatMap 为什么比 map + flat 更适合边映射边过滤
flatMap 本质是先对每个元素执行一次 map，再对结果调用 flat(1)。关键在于：如果映射函数返回空数组 []，它就会被“抹掉”，不会留下 undefined 或 null 占位——这正是过滤的底层机制。
而 map 遇到条件不满足时通常得返回 undefined，后续还得接 filter(Boolean)，多一次遍历，也容易漏掉 0、'' 等假值误删。
- 返回
[]→ 被丢弃（有效过滤） - 返回
[x]或[a, b]→ 展开并合并 - 返回非数组（如
42或null）→ 会报错：TypeError: A value must be an array
过滤 null/undefined/空字符串节点的典型写法
常见场景：后端返回的列表里混着 null、undefined、空对象或空字符串，你想提取其中的 id 和 name，但跳过所有无效项。
const data = [
{ id: 1, name: 'Alice' },
null,
{ id: 2 },
'',
{ id: 3, name: 'Charlie' }
];
const result = data.flatMap(item => {
if (!item || typeof item !== 'object' || !item.id) return [];
return [{ id: item.id, name: item.name || 'Anonymous' }];
});
// → [{ id: 1, name: 'Alice' }, { id: 3, name: 'Charlie' }]
- 必须显式
return []，不能只写return（那会返回undefined） -
item.name || 'Anonymous'是安全取值，避免undefined进入结果 - 不要在回调里 throw 错误——
flatMap不捕获异常，整个调用会中断
flatMap 处理嵌套数组并去重过滤的陷阱
当原始数据本身含数组字段（比如 tags: string[]），你既要展开又要筛掉空 tag，容易误写成 item.tags?.filter(t => t) 再 map，其实一步就能搞定。
const posts = [
{ title: 'A', tags: ['js', ''] },
{ title: 'B', tags: null },
{ title: 'C', tags: ['ts', 'react', undefined] }
];
const allValidTags = posts.flatMap(post =>
Array.isArray(post.tags)
? post.tags.filter(tag => typeof tag === 'string' && tag.trim() !== '')
: []
);
// → ['js', 'ts', 'react']
-
post.tags?.filter(...)在tags是null时会报错，必须先用Array.isArray守卫 -
filter里只判断typeof tag === 'string'不够，' '（空格）也会通过，得加.trim() !== '' - 别试图在
flatMap回调里返回new Set(...)——Set不是数组，会触发TypeError
性能与兼容性提醒：不是所有场景都该用 flatMap
如果你只是简单过滤+映射（比如只取 id），filter().map() 通常更快，因为 flatMap 强制构造中间数组再展平，有额外内存开销。
- Chrome 69+/Firefox 62+/Safari 12+ 支持原生
flatMap；旧环境需 polyfill 或降级为reduce - Node.js 11+ 原生支持；Node.js 10 及更早需
core-js - 大数据量（>10k 元素）下，
flatMap的 GC 压力比两次单循环明显，可实测对比
真正需要 flatMap 的时刻，是你既要“一对多”映射（比如一个用户对应多个权限），又要同步剔除其中的脏数据——这时候少一次遍历，逻辑才真正干净。
