如何在Vue中基于订单数据生成含多统计属性的JS供应商对象

在原订单遍历构建供应商统计哈希的流程基础上，同步完成所有维度指标的累计计算，无需额外多轮遍历订单数据，即可直接生成符合字段要求的供应商统计列表。

改造后的完整render函数代码 #

render() {
  const hash = {};
  this.orders.forEach(order => {
    const supplierName = order.supplier_name;
    // 初始化对应供应商的累计统计容器
    if (!hash[supplierName]) {
      hash[supplierName] = {
        orderCount: 0,
        totalItemCount: 0,
        totalQuantity: 0
      };
    }
    const currentStat = hash[supplierName];
    // 逐订单累加各维度统计值
    currentStat.orderCount += 1;
    // 累加当前订单的条目总数，对缺失items的场景做0值兜底
    currentStat.totalItemCount += order.items?.length || 0;
    // 累加当前订单下所有条目的quantity总和
    const currentOrderQuantity = order.items?.reduce((sum, item) => sum + (item.quantity || 0), 0) || 0;
    currentStat.totalQuantity += currentOrderQuantity;
  })
  // 映射为指定格式的供应商统计对象
  const suppliers = Object.keys(hash).map(name => {
    const stat = hash[name];
    return {
      name: name,
      num: stat.orderCount,
      numItems: stat.totalItemCount,
      quantity: stat.totalQuantity,
      averageNumItems: stat.totalItemCount / stat.orderCount
    }
  })
  console.log(suppliers);
}

实现要点说明 #

• 改造后的逻辑仅遍历一次订单数据就完成所有指标的累计，相比多轮遍历计算的方案性能更优。
• 累加环节对可能缺失的items、quantity字段做了兜底处理，遇到异常空数据时不会出现NaN计算结果、空引用报错。
• 最终生成的对象字段完全匹配要求：
  • name：供应商名称
  • num：对应供应商的总订单数
  • numItems：对应供应商名下所有订单的条目总数量
  • quantity：所有条目的quantity值累加总和
  • averageNumItems：每订单平均包含的条目数量
• 平均条目数的计算基于累计的准确订单数（只要进入统计的供应商，订单数至少为1，不存在分母为0的异常），计算结果稳定可靠。

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