如何将嵌套分组的对象数组转换为每项带groupName的一维对象数组

问题原因 #

你的代码存在两个核心问题：

• 外层map遍历后你直接返回了原数组的item，内层types.map生成的加了groupName的新对象数组完全没有被使用，处理结果直接丢失
• 即使你返回了内层map的结果，外层map也会生成二维数组，不符合你需要的一维数组结构

解决方案 #

推荐使用Array.prototype.flatMap实现，该方法会先执行map逻辑，再自动将返回的数组打平一层，刚好匹配你的需求：

const resultData = data.flatMap(group => {
  return group.types.map(typeItem => ({
    ...typeItem,
    groupName: group.groupName
  }))
})

如果运行环境不支持flatMap，可以用以下两种兼容写法实现：

1. map + flat组合写法

const resultData = data.map(group => {
  return group.types.map(typeItem => ({
    ...typeItem,
    groupName: group.groupName
  }))
}).flat()

2. reduce写法

const resultData = data.reduce((acc, group) => {
  const processed = group.types.map(typeItem => ({
    ...typeItem,
    groupName: group.groupName
  }))
  return acc.concat(processed)
}, [])

以上任意一种写法运行后，得到的resultData都和你需要的目标结构完全一致。

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