如何高效提取嵌套数组中的所有值：如从对象数组的子数组中扁平化获取全部 job

本文详解如何正确遍历含嵌套数组的对象数组，解决 map 嵌套使用导致返回二维数组、变量作用域错误及逻辑中断等问题，并提供 flat()、flatMap()、forEach 等多种现代 JavaScript 方案。

本文详解如何正确遍历含嵌套数组的对象数组，解决 `map` 嵌套使用导致返回二维数组、变量作用域错误及逻辑中断等问题，并提供 `flat()`、`flatmap()`、`foreach` 等多种现代 javascript 方案。

在处理类似 people 这样的数据结构时——即一个对象数组，每个对象又包含一个字符串数组（如 jobs）——开发者常希望通过一次操作获取所有 job 的扁平化列表（如 ["waiter", "doctor", "singer", "actor", "nurse", "actor"]）。但初学者容易陷入两个典型误区：

1. 错误地依赖多层 map 却未扁平化结果：map 返回新数组，嵌套 map 会生成二维数组（如 [["waiter","doctor"], ["singer","actor"], ["nurse","actor"]]），而非期望的一维列表；
2. 混淆副作用与返回值：在 map 回调中修改外部变量（如 res.push()）虽能收集数据，但 map 本身仍会返回无意义的嵌套数组（因 person.jobs.map(...) 返回数组，且后续 return res 被忽略——因 return 后代码不执行）。

下面给出几种专业、简洁、可维护的解决方案：

✅ 推荐方案一：使用 flatMap()（ES2019+，最语义化）

const people = [  { name: "mike", jobs: ["waiter", "doctor"] },  { name: "nils", jobs: ["singer", "actor"] },  { name: "nils", jobs: ["nurse", "actor"] }];const allJobs = people.flatMap(person => person.jobs);console.log(allJobs); // → ["waiter", "doctor", "singer", "actor", "nurse", "actor"]

flatMap() = map() + flat(1)，天然适用于“映射并展平一级”的场景，代码简洁且意图明确。

✅ 推荐方案二：flat() 配合 map()（ES2019+，兼容性略广）

const allJobs = people.map(p => p.jobs).flat();

✅ 兼容方案：reduce()（支持旧环境，函数式风格）

const allJobs = people.reduce((acc, person) => [...acc, ...person.jobs], []);

✅ 明确可控方案：forEach()（适合需额外逻辑的场景）

const allJobs = [];people.forEach(person => {  person.jobs.forEach(job => allJobs.push(job));});

⚠️ 注意事项

• 避免在 map 中混用副作用（如 push）和返回值，易引发逻辑混乱；
• 若需去重，可在获取扁平数组后链式调用：[...new Set(allJobs)]；
• flatMap() 对空数组或 undefined 属性较敏感，生产环境建议增加防御性检查（如 person.jobs?.flat() ?? []）。

掌握这些方法，你不仅能正确提取嵌套值，更能写出更健壮、更易读的数据处理逻辑。