如何从嵌套数组中提取所有值（JavaScript 扁平化技巧）-js教程-PHP中文网

如何从嵌套数组中提取所有值（JavaScript 扁平化技巧）

本文详解如何正确提取对象数组中每个元素内嵌数组的所有值，指出常见错误（如双重 map 返回结构混乱、变量作用域误用），并提供 foreach 嵌套遍历、flatmap 等多种可靠方案。

本文详解如何正确提取对象数组中每个元素内嵌数组的所有值，指出常见错误（如双重 map 返回结构混乱、变量作用域误用），并提供 foreach 嵌套遍历、flatmap 等多种可靠方案。

在 JavaScript 中，当数据结构为“对象数组，且每个对象包含一个字符串数组（如 jobs）”时，开发者常希望通过一次操作获取全部嵌套值（例如所有职业名称）。但初学者容易陷入两个典型误区：

❌ 错误示例 1：map 内部返回嵌套数组，未合并

const iterate = people.map(person => {
  return person.jobs.map(job => job); // → 返回 [[ "waiter", "doctor" ], [ "singer", "actor" ], [ "nurse", "actor" ]]
});
console.log(iterate); // 仍是三维结构，非期望的一维扁平数组

此处 map 对每个 person 返回其 jobs 数组，结果是二维数组，而非所有 job 的集合。

❌ 错误示例 2：副作用与作用域混淆

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

let res = [];
const iterate = people.map(person => {
  person.jobs.forEach(job => res.push(job)); // ✅ 修改外部 res
  return res; // ❌ 每次 map 迭代都返回当前累积的 res（导致重复项 + 返回值混乱）
});
console.log(iterate); // 输出 [ ["waiter","doctor"], ["waiter","doctor","singer","actor"], ["waiter","doctor","singer","actor","nurse","actor"] ]

问题在于：map 本意是纯函数式映射，却混入了外部变量修改；且每次迭代都返回不断增长的 res，最终结果是冗余的中间状态数组。

✅ 正确解法一：使用 forEach 双重遍历（清晰、易懂）
适合逻辑明确、可读性优先的场景：

const people = [
  { name: "mike",  jobs: ["waiter", "doctor"] },
  { name: "nils",  jobs: ["singer", "actor"] },
  { name: "nils",  jobs: ["nurse", "actor"] }
];

const allJobs = [];
people.forEach(person => {
  person.jobs.forEach(job => allJobs.push(job));
});
console.log(allJobs); 
// → ["waiter", "doctor", "singer", "actor", "nurse", "actor"]

✅ 正确解法二：使用 flatMap（ES2019+，函数式推荐）
简洁、声明式、无副作用，一行解决：

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

flatMap 先对每个元素执行 map（返回数组），再自动将结果数组扁平化一层——完美匹配此场景。

✅ 正确解法三：reduce + 扩展运算符（兼容旧环境）
兼容性好，语义明确：

const allJobs = people.reduce((acc, person) => [...acc, ...person.jobs], []);
console.log(allJobs); 
// → ["waiter", "doctor", "singer", "actor", "nurse", "actor"]

? 注意事项：