JavaScript拆解嵌套数组生成新数组时无法获取jobTitle问题

问题根因 #

Array.prototype.forEach() 方法没有返回值，执行后永远返回 undefined，你将 item.job.forEach(item => item.jobTitle) 的执行结果直接赋值给 jobTitle，自然无法获取到预期的属性值。

修复方案 #

方案1：沿用forEach写法

如果确认每个元素的job数组永远只有1个元素，直接取数组下标为0的元素属性即可：

const newArray = [];
data.forEach(item => {
  newArray.push({
    name: item.name,
    jobTitle: item.job[0].jobTitle
  })
})
console.log(newArray);

如果要兼容job数组为空的场景，可以加可选链兜底，避免运行时报错：

jobTitle: item.job[0]?.jobTitle ?? ''

方案2：使用map方法（更推荐）

数组转换类的需求更适合用map方法实现，代码更简洁：

const newArray = data.map(item => ({
  name: item.name,
  jobTitle: item.job[0].jobTitle
}))
console.log(newArray);

两种方案运行后都可以输出你预期的结果：

[
  { name: 'Emma', jobTitle: 'Teacher' },
  { name: 'Charlotte', jobTitle: 'programmer' },
  { name: 'Amelia', jobTitle: 'Doctor' }
]

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