如何合并两个对象数组并为不存在的属性填充null值？

问题 #

我有两个对象数组：

• marks 数组包含带id和marks属性的对象
• user 数组包含带id、name、grade和result属性的对象

具体结构如下：

var marks = [
  { id: '1', marks: 70 },
  { id: '2', marks: 40 },
  { id: '3', marks: 95 },
  { id: '4', marks: 50 },
];

var user = [
  { id: '1', name: 'sam', grade: 1, result: 'Pass' },
  { id: '2', name: 'peter', grade: 2, result: 'Pass' },
  { id: '5', name: 'John', grade: 1, result: 'Fail' },
  { id: '6', name: 'anna', grade: 3, result: 'Fail' },
];

我需要合并这两个数组，规则是：

• 相同id的对象合并属性
• 未匹配到的属性填充null

期望得到的结果：

var result = [
  { id: '1', marks: 70, name: 'sam', grade: 1, result: 'Pass' },
  { id: '2', marks: 40, name: 'peter', grade: 2, result: 'Pass' },
  { id: '3', marks: 95, name: null, grade: null, result: null },
  { id: '4', marks: 50, name: null, grade: null, result: null },
  { id: '5', marks: null, name: 'John', grade: 1, result: 'Fail' },
  { id: '6', marks: null, name: 'anna', grade: 3, result: 'Fail' },
];

我尝试了以下代码，但达不到预期效果——它只基于第一个数组生成值，缺少未匹配属性的null填充：

marks.forEach((item) => map.set(item.id, item));
user.forEach((item) => map.set(item.id, { ...map.get(item.id), ...item }));
const mergedArr = Array.from(map.values());

请问该如何修改这段代码？

解决方法 #

你的代码问题在于：

1. 仅先把marks的对象存入Map，遇到user里新的id（比如5、6）时，直接存入的是user的原始对象，缺少marks: null
2. marks里的id没有对应user数据时，不会自动添加name、grade、result的null属性

下面提供两种可行的修改方案：

方案一：基于Map的完善版 #

先初始化所有id对应的完整结构（所有属性默认设为null），再用两个数组的实际值覆盖对应属性：

const map = new Map();

// 第一步：收集所有唯一id，初始化每个id的完整结构
[...marks, ...user].forEach(item => {
  if (!map.has(item.id)) {
    map.set(item.id, {
      id: item.id,
      marks: null,
      name: null,
      grade: null,
      result: null
    });
  }
});

// 第二步：覆盖marks数组的marks属性
marks.forEach(item => {
  const existing = map.get(item.id);
  map.set(item.id, {...existing, marks: item.marks});
});

// 第三步：覆盖user数组的name、grade、result属性
user.forEach(item => {
  const existing = map.get(item.id);
  map.set(item.id, {...existing, name: item.name, grade: item.grade, result: item.result});
});

const mergedArr = Array.from(map.values());

方案二：更直观的数组映射法 #

先收集所有唯一id，再逐个构建合并对象，适合数据量不大的场景：

// 收集两个数组里的所有唯一id
const allIds = [...new Set([...marks.map(m => m.id), ...user.map(u => u.id)])];

// 遍历每个id，构建合并后的对象
const result = allIds.map(id => {
  // 找到对应id的marks和user数据
  const markData = marks.find(m => m.id === id);
  const userData = user.find(u => u.id === id);
  
  return {
    id: id,
    marks: markData?.marks ?? null, // 有数据就取marks，否则设为null
    name: userData?.name ?? null,
    grade: userData?.grade ?? null,
    result: userData?.result ?? null
  };
});

两种方案都能生成你需要的结果，可根据实际数据规模选择。

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