本文介绍一种高效、可扩展的方式，将两个结构不同的 JSON 数组按关联键（如 "Pricing Reference Name" 与 "Part Num"）自动合并，无需硬编码字段名，适用于动态数据源场景。
本文介绍一种高效、可扩展的方式，将两个结构不同的 json 数组按关联键（如 `"pricing reference name"` 与 `"part num"`）自动合并，无需硬编码字段名，适用于动态数据源场景。
在实际前端开发中，我们常需整合来自不同来源（如多个 Excel 表导出的 JSON）的数据。例如，一个包含产品详细信息的数组（"Product Info"），和另一个包含价格信息的数组（"Company Pricing"），二者通过业务键（如 Pricing Reference Name ↔ Part Num）关联。目标是执行一次稳健的左连接（Left Join）：以产品信息为主表，将匹配的价格字段“无感”注入每条产品记录中，且不依赖预定义字段列表——因为字段可能随业务变化而增减。
核心思路是：空间换时间 + 解构赋值泛化。先将定价数据构建成 Map 索引（O(1) 查找），再遍历产品数组，对每项使用展开运算符 ... 合并匹配对象的所有自有属性。这种方式天然支持任意字段名，完全规避了手动遍历键名或编写冗长的 Object.assign() 列表。
以下是完整实现代码（兼容 Vue 3 Composition API 环境，如 useFetch 场景）：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
// 假设 response._data 已解析为上述结构的对象
const mergeProductsWithPricing = (data) => {
// 步骤 1：构建 Pricing Map，以 Part Num 为 key，整条定价对象为 value
const pricingMap = new Map(
data['Company Pricing'].map(item => [item['Part Num'], item])
);
// 步骤 2：主表映射 —— 对每个产品，合并其自身 + 匹配的定价数据（若存在）
return data['Product Info'].map(product => {
const pricingMatch = pricingMap.get(product['Pricing Reference Name']);
// 若未找到匹配项，pricingMatch 为 undefined，{...undefined} 无副作用，安全
return { ...product, ...(pricingMatch || {}) };
});
};
// 在 useFetch 的 onResponse 中调用：
onResponse({ response }) {
const mergedProducts = mergeProductsWithPricing(response._data);
products.value = mergedProducts; // now each product has all pricing fields too
isLoading.value = false;
});✅ 优势说明：
- 零字段硬编码：{ ...product, ...pricingMatch } 自动合并所有可枚举属性，新增字段（如 "MSRP CAD" 或 "In Stock"）无需修改代码；
- 高性能：Map 查找为 O(1)，整体复杂度 O(n + m)，远优于嵌套循环的 O(n×m)；
- 健壮容错：若某产品无对应 Pricing Reference Name，pricingMap.get() 返回 undefined，...(undefined || {}) 安全降级为空对象，不报错；
- 语义清晰：逻辑聚焦于“关联”与“组合”，而非字段搬运，符合函数式思维。
⚠️ 注意事项：
- 键名需严格一致（含空格、大小写），建议在数据接入层做标准化（如统一转为 kebab-case）；
- 若存在重复字段（如两个数组都有 "ID"），pricingMatch 的字段会覆盖 product 的同名字段（因展开顺序靠后），如有冲突需显式处理优先级；
- Map 是 ES6+ 特性，确保目标环境支持（现代浏览器及 Node.js ≥ 12 均兼容）。
通过该模式，你获得的不再是一个静态拼接结果，而是一个可长期维护、随数据演进而自适应的通用合并函数——真正实现“一次编写，持续生效”。
