flatmap是javascript中先映射后浅层扁平化一层的数组方法，等价于map().flat(1)，返回新数组；支持条件过滤、字符串拆分等场景，但仅扁平一层且不可指定深度。

flatMap 是 JavaScript 中一个非常实用的数组方法，它把 map 和 flat(1) 合并成一步：先对每个元素执行映射函数（返回一个数组或任意值），再将所有结果**浅层扁平化一层**，最后返回新数组。

基本用法：map + 浅层扁平一次

它等价于 arr.map(...).flat(1)，但更简洁、性能略优（避免中间数组）。

• 如果映射函数返回数组，这些数组会被展开一级；
• 如果返回非数组值（如数字、字符串、对象），会自动包装成单元素数组再展开，效果相当于保留原值；
• 不能替代深度扁平（flat(Infinity)），只处理第一层嵌套。

常见使用场景示例

✅ 展开子数组并转换

const arr = [[1, 2], [3, 4], [5]];
const result = arr.flatMap(sub => sub.map(x => x * 2));
// → [2, 4, 6, 8, 10]

先对每个子数组做 map（乘 2），再 flat 一层，省去显式调用 .flat()。

OpenGemini Next.js Bestpractice Builder

使用固定的 Next.js/Tailwind/Prisma 技术栈构建并记录独立 SaaS 项目，仅将 FastAPI 用于 Python 工作负载，并遵循严格的架构规范。

下载

✅ 过滤 + 映射（返回空数组可实现“删除”）

const words = ["hello", "world", "foo"];
const letters = words.flatMap(word => word.length > 4 ? word.split('') : []);
// → ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']

长度 ≤ 4 的单词返回空数组 []，扁平后不贡献任何元素，自然跳过 —— 相当于带条件的映射。

✅ 拆分字符串并统一处理

const sentences = ["a b", "c d e"];
const allWords = sentences.flatMap(s => s.split(' ').map(w => w.toUpperCase()));
// → ['A', 'B', 'C', 'D', 'E']

和 map + flat 的区别注意点

• flatMap 默认只扁平一层（即 flat(1)），不会递归；
• map 返回什么，flatMap 就扁平什么：返回 [1, [2, 3]]，结果是 [1, 2, 3]；返回 [[[1, 2]]]，结果是 [[1, 2]]（只剥掉最外层）；
• 不能传入 depth 参数（不像 flat(depth)），固定为 1；
• 空项（undefined、null）在映射中若未显式处理，可能被转为空数组或引发问题，建议明确返回值。

遍历映射？其实它本身不遍历，但可配合 forEach 等

flatMap 返回新数组，不修改原数组，也不自带“遍历执行副作用”的能力。如果目标是「边映射边执行操作（如 console.log）」，应直接用 forEach 或 for...of；若需「先映射扁平，再遍历结果」，可以链式调用：

data
  .flatMap(item => item.children || [])
  .forEach(child => console.log(child.name));