如何在JavaScript中将两个同属性对象合并为数组值？

我有两个对象，其中OBJ2的键是OBJ1的projectID属性，需要将对应projectID的属性值合并为数组，具体示例如下：

示例数据 #

OBJ1 #

[
  { projectID: 1234, prop1: "apple", prop2: "banana", prop3: "choc" },
  { projectID: 8765, prop1: "apple", prop2: "banana", prop3: "choc" }
]

OBJ2 #

{
  "1234": { prop1: "gen", prop2: "home", prop3: "home" }, 
  "8765": { prop1: "gone", prop2: "done", prop3: "say" }
}

注：OBJ2实际是对象而非数组，因为数组不能用非连续数字作为索引，这里应为对象格式

尝试过的方法 #

我尝试过以下过滤函数：

Object.keys(OBJ2).forEach( s => OBJ1.filter(d => d.projectID === s) 

也试过用reduce方法映射这两个对象，但都未成功。

期望结果 #

[
  {
    projectID: 1234, 
    prop1: ["apple","gen"], 
    prop2:["banana","home"], 
    prop3:["choc","home"]
  },
  {
    projectID:8765, 
    prop1:["apple","gone"], 
    prop2:["banana","done"], 
    prop3:["choc","say"]
  }
]

解决方案 #

方法1：使用map遍历合并 #

直接遍历OBJ1的每个元素，匹配OBJ2中对应的项并合并属性：

const mergedResult = OBJ1.map(item => {
  // 将projectID转为字符串，匹配OBJ2的键
  const obj2Entry = OBJ2[item.projectID.toString()];
  // 若OBJ2无对应项，返回原对象（可按需调整逻辑）
  if (!obj2Entry) return item;

  return {
    projectID: item.projectID,
    prop1: [item.prop1, obj2Entry.prop1],
    prop2: [item.prop2, obj2Entry.prop2],
    prop3: [item.prop3, obj2Entry.prop3]
  };
});

方法2：使用reduce实现 #

如果需要更灵活的累加逻辑，也可以用reduce：

const mergedResult = OBJ1.reduce((resultList, currentItem) => {
  const obj2Entry = OBJ2[currentItem.projectID.toString()];
  const mergedItem = {
    projectID: currentItem.projectID,
    prop1: [currentItem.prop1, obj2Entry?.prop1 || currentItem.prop1],
    prop2: [currentItem.prop2, obj2Entry?.prop2 || currentItem.prop2],
    prop3: [currentItem.prop3, obj2Entry?.prop3 || currentItem.prop3]
  };
  resultList.push(mergedItem);
  return resultList;
}, []);

关键说明 #

• OBJ2的键是字符串类型，所以需要将currentItem.projectID（数字）转为字符串才能匹配
• map方法更适合这种一一对应的转换场景，代码更简洁
• 若OBJ2中可能不存在对应projectID的项，可通过obj2Entry?.prop1的可选链语法做容错处理

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