如何合并两个对象数组并保证userid唯一？求正确实现方案

需求说明 #

合并两个对象数组，需满足：

• userid属性唯一，不可重复
• 缺失的name或role属性用null填充
• 最终结果按userid升序排列

输入数据 #

const first = [
  { userid: 2, name: "Velen" },
  { userid: 56, name: "Illidan" },
  { userid: 23, name: "Muradin" },
  { userid: 12, name: "Sylvanas" },
  { userid: 44, name: "Cenarius" },
  { userid: 4, name: "Gul'Dan" },
];

const second = [
  { userid: 2, role: "Mage" },
  { userid: 4, role: "Worlock" },
  { userid: 56, role: "Demon Hunter" },
  { userid: 66, role: "Druid" },
  { userid: 87, role: "Shaman" },
  { userid: 12, role: "Hunter" },
];

期望输出 #

[
    { name: 'Velen',    role: 'Mage',       userid: 2 },
    { name: "Gul'Dan",  role: 'Worlock',    userid: 4 },
    { name: 'Sylvanas', role: 'Hunter',     userid: 12 },
    { name: 'Muradin',  role: null,         userid: 23 },
    { name: 'Cenarius', role: null,         userid: 44 },
    { name: 'Illidan',  role: 'Demon Hunter', userid: 56 },
    { name: null,       role: 'Druid',      userid: 66 },
    { name: null,       role: 'Shaman',     userid: 87 }
]

原解法问题分析 #

你之前的代码存在几个关键问题：

• 错误通过索引匹配元素：排序后直接用数组索引关联两个数组的元素，但两个数组的userid并不完全一一对应，会导致属性匹配错误。
• 破坏原有userid关联：代码中直接修改原数组的userid为另一个数组对应索引的userid，完全打乱了数据的对应关系。
• 遗漏独有元素：没有处理只在其中一个数组中存在的userid，导致最终结果丢失部分数据。

正确实现方法 #

核心思路是用键值对结构（对象或Map）以userid为键存储合并后的对象，遍历两个数组填充对应属性，最后提取值并排序。

方法一：使用普通对象 #

const solution = (firstArr, secondArr) => {
  const merged = {};

  // 处理第一个数组，初始化name属性，role设为null
  firstArr.forEach(item => {
    merged[item.userid] = {
      userid: item.userid,
      name: item.name,
      role: null
    };
  });

  // 处理第二个数组，填充role属性；若userid不存在则创建新对象，name设为null
  secondArr.forEach(item => {
    if (merged[item.userid]) {
      merged[item.userid].role = item.role;
    } else {
      merged[item.userid] = {
        userid: item.userid,
        name: null,
        role: item.role
      };
    }
  });

  // 将对象值转为数组，并按userid升序排序
  return Object.values(merged).sort((a, b) => a.userid - b.userid);
};

console.log(solution(first, second));

方法二：使用Map（更直观） #

const solution = (firstArr, secondArr) => {
  const map = new Map();

  // 初始化第一个数组的元素
  firstArr.forEach(({ userid, name }) => {
    map.set(userid, { userid, name, role: null });
  });

  // 处理第二个数组的元素
  secondArr.forEach(({ userid, role }) => {
    if (map.has(userid)) {
      map.get(userid).role = role;
    } else {
      map.set(userid, { userid, name: null, role });
    }
  });

  // 转为数组并按userid升序排序
  return Array.from(map.values()).sort((a, b) => a.userid - b.userid);
};

console.log(solution(first, second));

以上两种方法都能正确合并数组，保留所有唯一userid，填充缺失属性为null，并按userid升序排列，完全符合期望输出。

内容的提问来源于stack exchange，提问作者Rio0o.dev