如何用 flatMap 清理数组中的无效数据并同步转换格式-js教程-PHP中文网

flatmap更合适因其一步完成过滤、转换、扁平化；map+filter需两次遍历且易误删假值，返回空数组[]才是标准跳过写法，注意兜底和promise场景不适用。

如何用 flatmap 清理数组中的无效数据并同步转换格式

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 判断，避免报错