在Angular中实现学生与教师数组的一对一关联方法

可以通过数组的map和find方法实现，或者先构建教师ID映射表来提升性能，以下是两种可行方案：

方案一：基础遍历关联 #

直接遍历学生数组，为每个学生匹配对应的教师信息：

const student: any = [{name:'shariful', id:'1',teacherId:'1'},{name:'Hasan', id:'2',teacherId:'2'},{name:'sohag', id:'3',teacherId:'2'}];
const teacher: any = [{name:'Robi',id:'1'},{name:'Aktarujaman',id:'2'}];

const needResult = student.map(stu => {
  // 根据teacherId找到对应的教师
  const matchedTeacher = teacher.find(t => t.id === stu.teacherId);
  // 合并学生信息和教师姓名，可选转换teacherId类型以匹配示例格式
  return {
    ...stu,
    teacherId: parseInt(stu.teacherId, 10),
    teacherName: matchedTeacher?.name || '' // 处理无匹配的边界情况
  };
});

方案二：构建映射表优化性能 #

如果数据量较大，先将教师数组转为ID-姓名的映射对象，避免每次find遍历整个教师数组：

const student: any = [{name:'shariful', id:'1',teacherId:'1'},{name:'Hasan', id:'2',teacherId:'2'},{name:'sohag', id:'3',teacherId:'2'}];
const teacher: any = [{name:'Robi',id:'1'},{name:'Aktarujaman',id:'2'}];

// 构建教师ID到姓名的映射表
const teacherMap = teacher.reduce((map, t) => {
  map[t.id] = t.name;
  return map;
}, {} as Record<string, string>);

const needResult = student.map(stu => ({
  ...stu,
  teacherId: parseInt(stu.teacherId, 10),
  teacherName: teacherMap[stu.teacherId] || ''
}));

说明 #

• 两种方案都能生成目标格式的needResult，方案二更适合数据量较大的场景；
• parseInt(stu.teacherId, 10)为可选操作，用于将字符串类型的teacherId转为数字，匹配示例中的格式；
• 添加|| ''是为了处理学生teacherId无对应教师的情况，避免出现undefined。

内容的提问来源于stack exchange，提问作者Shariful Hasan Sohag