如何在JavaScript中合并键名不同、通过角色ID关联的两个对象数组

思路说明 #

• 优先推荐用Map做中间映射的方案，时间复杂度为O(n+m)（n为obj1长度，m为obj2长度），数据量大时性能优势明显
• 小数据量场景也可以直接用Array.find实现，写法更简洁

代码实现 #

方案1：Map映射（推荐） #

// 将obj2转换为id到name的映射表
const roleMap = new Map(this.state.obj2.map(role => [role.id, role.name]));

// 遍历obj1合并得到obj3
const obj3 = this.state.obj1.map(user => ({
  ...user,
  roleName: roleMap.get(user.roleId) || '未知角色'
}));

方案2：直接查找（适合小数据量） #

const obj3 = this.state.obj1.map(user => {
  const matchedRole = this.state.obj2.find(role => role.id === user.roleId);
  return {
    ...user,
    roleName: matchedRole ? matchedRole.name : '未知角色'
  }
})

两种方案最终输出的obj3都和要求的结构完全一致，兜底的未知角色可以根据业务需要调整或者删除。

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