JavaScript中如何按siteid字段匹配合并三个数组？

原写法问题 #

• 第一种写法完全依赖数组索引匹配，若三个数组的siteid顺序不一致、存在缺失项、或某数组为空时，会直接报错或输出错误结果，且合并后的结构不符合要求
• 第二种写法只是把siteS2的元素追加到siteS1末尾，没有按siteid匹配合并的逻辑，自然得不到目标结果

实现思路 #

1. 先把三个数组分别转为以siteid为键的映射对象，查找效率为O(1)，天然兼容空数组场景
2. 收集所有数组中出现过的siteid，避免某数组为空时遗漏数据
3. 遍历所有siteid，按需求结构组装数据即可

完整代码 #

// 1. 生成各数组的siteid映射
const s1Map = new Map(siteS1.map(item => [item.siteid, { Date: item.Date }]))
const s2Map = new Map(siteS2.map(item => [item.siteid, { Date: item.Date }]))
const formMap = new Map()
// 处理form数组，同siteid的data放到同一个数组里
form.forEach(item => {
  if (!formMap.has(item.siteid)) formMap.set(item.siteid, [])
  formMap.get(item.siteid).push(item.data)
})

// 2. 收集所有出现过的siteid
const allSiteIds = new Set([
  ...siteS1.map(i => i.siteid), 
  ...siteS2.map(i => i.siteid), 
  ...form.map(i => i.siteid)
])

// 3. 组装结果
const result = Array.from(allSiteIds).map(siteid => {
  return {
    siteS1: s1Map.get(siteid) || {},
    siteS2: s2Map.get(siteid) || {},
    form: formMap.get(siteid) || []
  }
})

console.log(result)

兼容说明 #

• 若siteS2/form为空数组，对应字段会自动返回空对象/空数组，不会抛出异常
• 三个数组的顺序不需要一一对应，只要siteid匹配就能正确合并
• 若同个siteid在form里有多个项，会自动聚合到同一个form数组中

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