本文介绍如何将一个对象数组与一个键值对字典（plain object）按公共字段（如 label）进行合并，生成包含所有属性的新数组，适用于 api 多源数据聚合场景。
本文介绍如何将一个对象数组与一个键值对字典（plain object）按公共字段（如 label）进行合并，生成包含所有属性的新数组，适用于 api 多源数据聚合场景。
在实际前端开发中，常需整合来自多个 API 的异构响应数据——例如，一个接口返回服务类型列表（数组），另一个返回各类型的统计信息（以 label 为 key 的映射对象）。此时，我们需要以 label 为关联键，将两者“横向拼接”，生成结构统一、字段完备的新数组。
核心思路是：遍历原始数组，对每个对象提取 label 值，作为键去字典中查找对应数据，再通过对象展开语法（{...o, ...counts[o.label]}）实现浅层合并。
以下是完整、可直接运行的实现示例：
const services = [
{ label: "Private", price: 5 },
{ label: "VIP", price: 5 }
];
const stats = {
"Private": { count: 34 },
"VIP": { count: 80 }
};
const merged = services.map(item => ({
...item,
...stats[item.label]
}));
console.log(merged);
// 输出：
// [
// { label: "Private", price: 5, count: 34 },
// { label: "VIP", price: 5, count: 80 }
// ]
✅ 优势说明：
- 简洁高效：仅一行 map + 展开运算符，语义清晰，时间复杂度为 O(n)；
- 安全可靠：若某 label 在 stats 中不存在（如网络异常导致缺失），stats[item.label] 返回 undefined，{...item, undefined} 不会报错，但该条目将缺少扩展字段（可配合空值检查增强鲁棒性）；
- 易于扩展：如需深度合并或处理嵌套字段，可替换为 Object.assign() 或引入 lodash.merge。
⚠️ 注意事项：
- 此方法执行浅合并，不递归处理嵌套对象。若 stats 中的值本身含同名属性（如也含 price），将被 services 中的值覆盖；
- 确保 stats 的 key 与 services[i].label 类型和大小写完全一致（JavaScript 对象 key 区分大小写）；
- 生产环境建议添加防御性判断，例如：
...stats[item.label] ?? {}
掌握这种基于键映射的数组增强模式，能显著提升多接口数据协同处理的开发效率与代码可维护性。
