JavaScript如何实现返回各分组及其关联修读科目的名称

需求为返回所有分组信息，以及各分组所修读科目的对应完整信息。原有实现存在逻辑错误：subjects是存储所有科目的数组，不存在直接的id属性，代码既没有关联分组存储的科目ID，也没有获取到完整的科目对象，无法输出预期结果。

const groups = [
  {
    name: "1",
    subjects: [1, 2]
  },
  {
    name: "2",
    subjects: [1]
  },
]

const subjects = [
  {
    id: 1,
    name: "English",
  },
  {
    id: 2,
    name: "Mathematics",
  },
  {
    id: 3,
    name: "Physics",
  },
]

const groupsSubject = groups.map(group => {
  return {
    ...group,
    // 匹配当前分组下所有科目ID对应的完整科目信息
    subjects: group.subjects.map(subjectId => subjects.find(item => item.id === subjectId))
  }
})

• 外层通过map遍历分组数组，通过展开运算符保留分组原有属性
• 内层遍历当前分组存储的科目ID列表，通过Array.find从科目数组中匹配ID一致的完整科目对象，替换原有仅存ID的subjects字段
• 最终输出结构和预期示例完全匹配，每个分组下的subjects字段为对应科目的完整信息数组

性能优化提示：如果科目数据量较大，反复调用find会产生重复遍历开销，可以提前构建科目ID映射表提升匹配效率，实现如下：

// 预构建ID到科目对象的映射
const subjectMap = new Map(subjects.map(sub => [sub.id, sub]))
const groupsSubjectOptimized = groups.map(group => ({
  ...group,
  subjects: group.subjects.map(id => subjectMap.get(id))
}))

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