JS对象深度条件合并：基于vId合并两个HTTP请求返回数据

这个需求在日常开发里挺常见的，咱们可以通过先分组详情数据，再匹配合并的方式高效实现，避免嵌套循环带来的性能问题。下面用JavaScript一步步拆解：

步骤1：先把pDetails按vId分组 #

首先把pDetails数组转换成一个以vId为键、对应详情数组为值的对象，这样后续匹配时能直接通过vId快速查找，不用每次都遍历整个pDetails数组。

// 示例数据
const vehicles = [
  { vId: 1, color: 'green', passengers: [{ name: 'Joe', age: 22 }, { name: 'Jack', age: 32 }] },
  { vId: 2, color: 'blue', passengers: [{ name: 'Mary', age: 28 }] }
];

const pDetails = [
  { vId: 1, detail: 'tall' },
  { vId: 1, detail: 'fat' },
  { vId: 2, detail: 'sad' },
  { vId: 3, detail: 'happy' } // 这个vId在vehicles里不存在，会被自动忽略
];

// 分组后得到：{ '1': ['tall', 'fat'], '2': ['sad'], '3': ['happy'] }
const groupedDetails = pDetails.reduce((acc, item) => {
  if (!acc[item.vId]) {
    acc[item.vId] = [];
  }
  acc[item.vId].push(item.detail);
  return acc;
}, {});

步骤2：遍历vehicles并合并详情 #

接下来遍历vehicles数组，给每个车辆对象新增一个属性（比如叫details），从分组好的groupedDetails里取出对应vId的详情数组；如果没有匹配的vId，就设为空数组兜底。

// 生成新的合并数组（不修改原vehicles）
const mergedVehicles = vehicles.map(vehicle => {
  return {
    ...vehicle, // 保留原车辆的所有属性
    details: groupedDetails[vehicle.vId] || [] // 匹配详情，无则为空数组
  };
});

最终合并结果 #

运行上述代码后，mergedVehicles的结构如下：

[
  {
    vId: 1,
    color: 'green',
    passengers: [{ name: 'Joe', age: 22 }, { name: 'Jack', age: 32 }],
    details: ['tall', 'fat']
  },
  {
    vId: 2,
    color: 'blue',
    passengers: [{ name: 'Mary', age: 28 }],
    details: ['sad']
  }
]

补充小技巧 #

• 这种实现的时间复杂度是O(n + m)（n是vehicles长度，m是pDetails长度），比嵌套循环的O(n*m)高效很多，数据量大时优势明显。
• 如果想直接修改原vehicles数组而非生成新数组，把map换成forEach即可：

vehicles.forEach(vehicle => {
  vehicle.details = groupedDetails[vehicle.vId] || [];
});

内容的提问来源于stack exchange，提问作者rennyB