本文介绍如何在 javascript 中将一个对象数组与另一个以 id 为键的映射对象进行精准合并，使同名属性（如 prop1、prop2）的值组成新数组，适用于项目数据增强、配置叠加等场景。
本文介绍如何在 javascript 中将一个对象数组与另一个以 id 为键的映射对象进行精准合并，使同名属性（如 prop1、prop2）的值组成新数组，适用于项目数据增强、配置叠加等场景。
在实际开发中，我们常遇到需要将结构互补的数据源进行关联合并的需求：例如主数据列表（OBJ1）携带基础业务字段，而扩展数据（OBJ2）以 projectID 为键提供补充信息。目标不是简单拼接，而是将同名属性的值配对合并为数组——这要求精确匹配、类型安全且可扩展。
核心思路是：遍历主数组（originalArray），对每个元素提取 projectID，再从映射对象（additionalData）中查找对应条目，最后构造新对象，将各 propX 字段合并为 [原值, 新值] 数组。
以下是完整实现：
function mergeObjects(originalArray, additionalData) {
return originalArray.map(item => {
const projectId = item.projectID;
const additionalProps = additionalData[projectId] || {};
return {
projectID: projectId,
prop1: [item.prop1, additionalProps.prop1],
prop2: [item.prop2, additionalProps.prop2],
prop3: [item.prop3, additionalProps.prop3],
};
});
}
✅ 关键细节说明：
- 使用
map()保持函数式编程风格，返回全新数组，不修改原始数据； - 添加
|| {}防御性处理：若additionalData中缺失某projectID，避免undefined.prop1报错，此时对应数组项将为[原值, undefined]，便于后续校验； -
additionalData必须为普通对象（非数组），且键应为字符串（如"1234"），因Object的键自动转为字符串；若后端返回数字键，请统一转为字符串或使用Map替代（见下文进阶建议）。
? 示例数据（已修正格式）：
const originalArray = [
{ projectID: 1234, prop1: "apple", prop2: "banana", prop3: "choc" },
{ projectID: 8765, prop1: "apple", prop2: "banana", prop3: "choc" }
];
const additionalData = {
"1234": { prop1: "gen", prop2: "home", prop3: "home" },
"8765": { prop1: "gone", prop2: "done", prop3: "say" }
};
console.log(mergeObjects(originalArray, additionalData));
// 输出符合预期的嵌套数组结构
⚠️ 注意事项：
- 若属性数量较多（如
prop1至prop10），硬编码易出错。可改用Object.keys()动态遍历公共属性（需确保两对象属性名完全一致）； - 若
additionalData是由 API 返回的数字键对象（如{ 1234: {...} }），在严格模式下可能被解析为数组索引，建议显式转换键名：Object.keys(additionalData).reduce((acc, key) => ({ ...acc, [String(key)]: additionalData[key] }), {})； - 更健壮的方案是使用
Map：const map = new Map(Object.entries(additionalData))，再通过map.get(String(projectId))获取，避免字符串隐式转换风险。
总结：该方案简洁、可读性强，兼顾健壮性与扩展性。掌握此类合并逻辑，能高效应对多源数据融合场景，是前端数据处理的核心技能之一。
