如何在不显式列出字段的情况下合并两个 JSON 数组（基于键的左连接）-js教程-PHP中文网

如何在不显式列出字段的情况下合并两个 JSON 数组（基于键的左连接）

本文介绍一种高效、可扩展的方式，将两个结构不同的 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 场景）：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

// 假设 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 || {}) 安全降级为空对象，不报错；
语义清晰：逻辑聚焦于“关联”与“组合”，而非字段搬运，符合函数式思维。

⚠️ 注意事项：