flatmap是javascript中先映射后扁平一层的原生方法，天然支持“映射即过滤”：保留项返回单元素数组，丢弃项返回空数组，一次遍历、语义清晰、性能更优。
flatMap 是 JavaScript 中一个非常实用的数组方法，它把 map 和 flat(1) 合并成一步：先对每个元素执行映射函数（返回任意结构的值，通常是数组），再将结果**自动扁平一层**。这个特性让它天然适合“过滤 + 映射”的组合操作——尤其是当你映射后想丢掉某些项（比如返回空数组 []）时，flatMap 会自动跳过它们，比 map().filter() 更简洁、更高效。
用 flatMap 实现“映射后过滤”的核心技巧
关键在于：在映射函数中，对**要保留的项返回单元素数组（如 [newItem]），对要丢弃的项返回空数组（[]）**。因为 flatMap 会把所有返回值拼接起来，而空数组展开后不贡献任何元素。
- ✅ 想保留某项 → 返回
[transformedValue] - ❌ 想过滤掉某项 → 返回
[] - ⚠️ 不要返回原始值（如
item）或非数组（如null），否则会被当作单个元素展开，可能出错
常见场景示例
假设我们有一个用户列表，想提取所有有邮箱且邮箱合法的用户的用户名大写形式：
const users = [
{ name: 'Alice', email: 'alice@example.com' },
{ name: 'Bob', email: '' },
{ name: 'Charlie', email: 'charlie@valid.org' },
{ name: 'Diana', email: null }
];
const validUserNames = users.flatMap(user => {
if (user.email && /\S+@\S+\.\S+/.test(user.email)) {
return [user.name.toUpperCase()]; // ✅ 保留：包装成数组
} else {
return []; // ❌ 过滤：空数组，不产生元素
}
});
// → ['ALICE', 'CHARLIE']
再比如从嵌套结构中提取并筛选：获取所有状态为 active 的标签（tags），去重并转为小写：
const posts = [
{ title: 'A', tags: ['JS', 'Web'] },
{ title: 'B', tags: ['JS', 'Node'], status: 'active' },
{ title: 'C', tags: ['CSS'], status: 'draft' },
{ title: 'D', tags: ['React'], status: 'active' }
];
const activeTags = [...new Set(
posts
.flatMap(post => post.status === 'active' ? post.tags : [])
.map(tag => tag.toLowerCase())
)];
// → ['js', 'node', 'react']
对比 map + filter：为什么 flatMap 更优雅？
传统写法需要两遍遍历，逻辑割裂：
// ❌ 冗余：先 map 出一堆可能无效的数据，再 filter 清洗 users .map(u => u.email && isValid(u.email) ? u.name.toUpperCase() : null) .filter(name => name !== null); // ✅ flatMap：一次遍历，语义清晰，“映射即过滤” users.flatMap(u => u.email && isValid(u.email) ? [u.name.toUpperCase()] : [] );
不仅代码更短，性能也略优（尤其大数据量时），而且避免了中间出现 null/undefined 等占位符，逻辑更干净。
注意事项和边界情况
-
flatMap只扁平**一层**，不会递归展开深层嵌套（如[[[1]]]→[[1]]） - 如果映射函数返回非数组（如字符串
'hello'），它会被当作“类数组”展开为字符数组：['h','e','l','l','o']—— 通常这不是你想要的，务必用[...]显式包装 - 它不修改原数组，返回新数组，符合函数式编程习惯
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
