如何用Array.prototype.flatMap在映射数据的同时过滤掉无效节点-js教程-PHP中文网

flatMap更适合边映射边过滤，因其映射返回空数组[]时自动丢弃（实现过滤），避免map+filter的两次遍历及假值误删问题。

如何用array.prototype.flatmap在映射数据的同时过滤掉无效节点

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']