如何按元素名称匹配规则对两个itemDistribution数组合并求和

业务规则 #

合并两个不同接口返回对象内的itemDistribution数组，判定逻辑为：

• 数组元素的name字段完全匹配时，累加对应元素的quantity数值
• 仅在单个对象中存在的name分类，直接保留其原始quantity值
• 最终输出结构与原始数组元素结构保持一致

参考输入 #

原始对象1 #

{
  cancelTenders: 1,
  closeTenders: 7,
  itemDistribution: [
    { name: "Mobile", quantity: 18472.8 },
    { name: "Laptop", quantity: 20117.535000000003 },
    { name: "Tablet", quantity: 2609.75 },
    { name: "Watch", quantity: 6205 }
  ]
}

原始对象2 #

{
  cancelTenders: 0,
  closeTenders: 0,
  itemDistribution: [
    { name: "Mobile", quantity: 26290.65 },
    { name: "Laptop", quantity: 11844.774 },
    { name: "Tablet", quantity: 416.8 }
  ]
}

实现方案 #

• 采用Map做中间值存储，以name作为Map的唯一键，避免双层循环遍历的性能损耗
• 合并两个对象的itemDistribution数组做单次遍历，累计对应name的quantity值
• 累加过程中用toFixed控制小数精度，规避JS浮点数运算的精度异常问题（比如示例中出现的20117.535000000003这类冗余精度值）
• 遍历完成后将Map转换为数组，即为最终合并结果

可直接运行的实现代码：

// 定义待合并的两个接口对象
const sourceObj1 = {
  cancelTenders: 1,
  closeTenders: 7,
  itemDistribution: [
    { name: "Mobile", quantity: 18472.8 },
    { name: "Laptop", quantity: 20117.535000000003 },
    { name: "Tablet", quantity: 2609.75 },
    { name: "Watch", quantity: 6205 }
  ]
}

const sourceObj2 = {
  cancelTenders: 0,
  closeTenders: 0,
  itemDistribution: [
    { name: "Mobile", quantity: 26290.65 },
    { name: "Laptop", quantity: 11844.774 },
    { name: "Tablet", quantity: 416.8 }
  ]
}

/**
 * 合并两个对象的itemDistribution数组
 * @param {Object} objA 第一个接口返回对象
 * @param {Object} objB 第二个接口返回对象
 * @returns {Array} 合并后的分类数值数组
 */
function mergeItemDist(objA, objB) {
  const itemMap = new Map()
  // 单次遍历两个数组合并累计
  ;[...objA.itemDistribution, ...objB.itemDistribution].forEach(item => {
    const prevQuantity = itemMap.get(item.name)?.quantity ?? 0
    itemMap.set(item.name, {
      name: item.name,
      quantity: +(prevQuantity + item.quantity).toFixed(3)
    })
  })
  return Array.from(itemMap.values())
}

// 执行合并
const mergedDistribution = mergeItemDist(sourceObj1, sourceObj2)

最终输出结果 #

数组存储的原生数值结构（用于后续运算）：

[
  { name: "Mobile", quantity: 44763.45 },
  { name: "Laptop", quantity: 31962.309 },
  { name: "Tablet", quantity: 3026.55 },
  { name: "Watch", quantity: 6205 }
]

注：如果需要匹配示例里带千分位逗号的展示效果，可在页面渲染阶段对quantity值做格式化处理，不改动底层存储的数值类型

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