flatMap更合适因其一步完成过滤、转换、扁平化；map+filter需两次遍历且易误删假值，返回空数组[]才是标准跳过写法，注意兜底和Promise场景不适用。
flatMap 为什么比 map + filter 组合更合适
因为 flatMap 天然支持“映射后扁平化”，能一步完成「过滤掉无效项 + 转换结构 + 拉平嵌套」三件事；而 map 遇到要丢弃的项只能返回 null 或 undefined，后续还得接 filter(Boolean)，多一次遍历，还容易漏掉空数组、0、false 等假值误删。
常见错误现象：map 返回 [] 或 null，结果数组里出现空槽位或 null 元素，没真正“删掉”。
- 只对“有数据可转”的项返回单元素数组（如
[{ id, name }]），无效项返回空数组[] - 别在
flatMap回调里直接 return 对象 —— 那会变成[{…}, {…}]，没被扁平化 - 注意原始数据里可能有
null、undefined、空字符串、{}，得先显式判断再决定返不返回数组
处理含空值和嵌套结构的数组
比如 API 返回的 users 数组中混着 null、undefined、不完整对象，还要把 fullName 拆成 firstName/lastName：
const cleaned = users.flatMap(user => {
if (!user || typeof user !== 'object' || !user.id) return [];
return [{
id: user.id,
firstName: (user.fullName || '').split(' ')[0] || '',
lastName: (user.fullName || '').split(' ').slice(1).join(' ') || ''
}];
});
关键点：
-
return []是“跳过此项”的标准写法，不是return undefined - 拆分
fullName前必须兜底|| ''，否则split报Cannot read property 'split' of undefined - 如果原始结构是
[{ profile: { name: 'A' } }, null, { profile: {} }]，需加user.profile?.name判断，避免报错
flatMap 在 Promise 场景下不能直接用
flatMap 是同步方法，传入异步回调（比如 async (x) => await fetch(x)）只会返回一堆 Promise 对象，不会等它们 resolve，更不会扁平化 promise 结果。
错误用法：arr.flatMap(async x => (await api(x)).data || []) → 得到的是 [Promise, Promise, ...]，不是你想要的数据。
- 真要并发请求并清洗，用
Promise.all(arr.map(...))+ 后续flat().filter(...) - 若需串行或带错误处理，别硬套
flatMap，老实用for...of+push - 浏览器环境注意
flatMap不支持 IE，Node.js 需 ≥11.0
性能与边界情况提醒
当数组极大（>10 万项）且每项转换开销高时，flatMap 的函数调用和新建数组成本会明显；它内部仍是一次循环，但每次回调都 new 一个数组（哪怕空数组）。
- 如果只是简单过滤+字段重命名，
for循环手动push通常快 10%–20% -
flatMap对稀疏数组（[1,,3]）会自动跳过空槽，行为和map一致，无需额外处理 - 别忘了检查返回数组长度：如果所有项都被过滤掉，结果就是
[]，不是[undefined]或[null]
最易被忽略的一点：flatMap 只扁平一层，如果回调里不小心返回了二维数组（如 [[a], [b, c]]），结果会是 [a, b, c]；但若返回 [[[a]]]，第三层不会被展开 —— 这不是 bug，是设计如此。
