如何匹配两个对象数组的ID并为permitPeriod添加休假类型名称

核心思路 #

先将休假类型数组leaveTypes转换为以id为键、leaveType为值的映射对象，后续匹配时可直接通过键值对快速查找，比嵌套循环效率更高（嵌套循环时间复杂度O(n*m)，映射查找为O(n+m)），尤其适合数据量较大的场景。

代码实现（JavaScript） #

1. 示例数据（模拟接口返回及系统配置数据）

// 接口返回的原始休假记录数组
const permitPeriod = [
  { id: 1, permitPeriodType: 1, startDate: '2024-01-01', endDate: '2024-01-03' },
  { id: 2, permitPeriodType: 2, startDate: '2024-02-10', endDate: '2024-02-12' },
  { id: 3, permitPeriodType: 4, startDate: '2024-03-15', endDate: '2024-03-16' } // 模拟匹配不到的情况
];

// 公司录入的休假类型数组
const leaveTypes = [
  { id: 1, leaveType: '年假' },
  { id: 2, leaveType: '病假' },
  { id: 3, leaveType: '事假' }
];

2. 构建休假类型映射

// 将leaveTypes转为id->leaveType的映射对象
const leaveTypeMap = leaveTypes.reduce((acc, type) => {
  acc[type.id] = type.leaveType;
  return acc;
}, {});

3. 为休假记录新增名称字段

如果希望保留原数组不变，返回新数组（推荐，保持数据不可变性）：

const processedRecords = permitPeriod.map(record => ({
  ...record,
  permitPeriodName: leaveTypeMap[record.permitPeriodType] || '未知休假类型'
}));

如果需要直接修改原数组：

permitPeriod.forEach(record => {
  record.permitPeriodName = leaveTypeMap[record.permitPeriodType] || '未知休假类型';
});

代码说明 #

• 映射构建：通过reduce遍历leaveTypes，把每个类型的id作为键，leaveType作为值存入对象，后续查找时直接通过leaveTypeMap[id]获取名称，无需再次遍历数组。
• 字段新增：使用map创建新数组时，通过扩展运算符...record保留原字段，避免覆盖原有数据；添加兜底值'未知休假类型'，防止因permitPeriodType无匹配项导致显示undefined。

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