如何获取JavaScript嵌套数组的值？示例代码为何无预期结果？

第一段代码问题解析 #

这段代码的目标应该是提取所有jobs并整合成一维数组，但实际输出是二维数组，且存在无效代码：

• 提前返回导致后续代码无效：在people.map的回调中，先执行了return person.jobs.map(...)，后面的return res;永远不会被执行，而且res变量根本没有定义。
• map的特性导致二维数组输出：map方法会返回与原数组长度相同的新数组，这里people.map会把每个person.jobs的数组直接返回，最终得到的是二维数组[["waiter","doctor"],["singer","actor"],["nurse","actor"]]，而非预期的一维数组。

第二段代码问题解析 #

这段代码试图用外部数组res收集所有jobs，但输出结果不符合预期：

• 提前返回导致return res无效：同样，people.map的回调里先执行了return person.jobs.map(...)，后续的return res;永远不会执行。
• map的返回值并非预期的res数组：person.jobs.map(job => res.push(job))中，res.push返回的是数组的新长度，但回调函数没有显式返回值，所以每个person.jobs.map会生成由undefined组成的数组（比如[undefined, undefined]）。最终iterate变量是这些数组的集合：[[undefined,undefined],[undefined,undefined],[undefined,undefined]]，虽然res确实被正确填充为一维数组，但你打印的是iterate而非res，自然看不到预期结果。

正确的实现方式 #

如果要得到所有jobs的一维数组，推荐使用flatMap：

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

或者用reduce：

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

内容的提问来源于stack exchange，提问作者learncode