本文介绍一种简洁高效的方法，使用 JavaScript 的 map() 和展开运算符，将键值对形式的统计对象（如计数映射）按公共字段（如 label）注入原始对象数组，实现结构化数据融合。
本文介绍一种简洁高效的方法，使用 javascript 的 `map()` 和展开运算符，将键值对形式的统计对象（如计数映射）按公共字段（如 `label`）注入原始对象数组，实现结构化数据融合。
在实际开发中，我们常需整合来自多个 API 的异构数据：例如一个接口返回服务类型列表（数组），另一个返回对应类型的聚合指标（对象字典）。此时，以共享字段（如 label）为桥梁进行数据关联，是典型且高频的需求。
以下是最推荐的解决方案——利用 Array.prototype.map() 遍历原始数组，并通过对象属性访问（counts[o.label]）动态合并字典中的补充字段：
const data = [
{ label: "Private", price: 5 },
{ label: "VIP", price: 5 }
];
const counts = {
"Private": { count: 34 },
"VIP": { count: 80 }
};
const result = data.map(item => ({ ...item, ...counts[item.label] }));
console.log(result);
// 输出：
// [
// { label: "Private", price: 5, count: 34 },
// { label: "VIP", price: 5, count: 80 }
// ]✅ 关键优势：
- 简洁安全：...counts[item.label] 在 item.label 不存在于 counts 时会扩展为 {}（无副作用），不会报错；
- 不可变操作：原数组 data 和字典 counts 均未被修改，符合函数式编程最佳实践；
- 可扩展性强：若 counts 中的值包含更多字段（如 { count: 34, active: true }），它们将自动一并合并。
⚠️ 注意事项：
- 确保 data 中每个 item.label 都是 counts 的有效键；若存在不匹配项，对应结果中将缺失 count 字段（可添加空值兜底：{ ...item, ...(counts[item.label] || {}) }）；
- 若需深度合并嵌套对象（而非浅层覆盖），应改用 Object.assign() 或专用库（如 Lodash 的 merge）；
- 对于超大数据量（>10k 条），可预先校验 counts 是否为普通对象，避免原型链污染风险。
总结：该模式以极简语法达成精准数据缝合，是前端数据聚合场景中的「黄金组合」——map + 展开运算符 + 字典查表，建议作为标准工具沉淀至团队通用工具库或代码片段中。
