Vue JS购物车小计实现：用JavaScript forEach累加对象数组商品总价

嘿，我来帮你搞定这个购物篮的小计计算需求！你现在的核心需求是实现两个部分：每个商品的单项小计（price × qty），以及所有商品的总小计累加，还要能适配新增商品的情况，不用硬编码索引对吧？

第一步：计算每个商品的单项小计 #

你之前用forEach遍历数组的思路是对的，但可以直接在遍历过程中给每个商品的subTotal字段赋值，不用单独收集price。这样每个商品的小计会直接存在你的数据集里，后续渲染或者计算都很方便：

getSubTotal() {
  // 遍历每个商品，计算单项小计并更新到数据集
  this.dataSet.forEach(item => {
    item.subTotal = item.price * item.qty;
  });
}

执行这段代码后，你的dataSet里每个对象的subTotal就会变成对应的数值（比如第一个商品是49×1=49，第二个是29×1=29），而且不管以后新增多少商品，forEach都会自动遍历所有元素，完全不用修改代码适配新商品。

第二步：计算所有商品的总小计 #

如果需要把所有商品的小计累加得到总金额，用数组的reduce方法是最适合的——它专门用来处理累加、汇总这类需求，天生支持动态数组长度，完美解决硬编码索引的问题：

getTotal() {
  // 直接累加每个商品的price×qty，或者用已经计算好的subTotal
  const total = this.dataSet.reduce((accumulator, item) => {
    return accumulator + (item.price * item.qty);
    // 如果已经执行过第一步计算subTotal，也可以写成：accumulator + item.subTotal
  }, 0); // 0是累加的初始值
  return total;
}

更贴合Vue的优化方案：用计算属性实时更新 #

在Vue里，如果你希望小计能跟着商品数量/价格的变化自动更新，最好把总小计写成计算属性，这样Vue会自动监听dataSet的变化，实时更新结果，连手动调用函数都省了：

computed: {
  cartTotal() {
    return this.dataSet.reduce((sum, item) => {
      return sum + item.price * item.qty;
    }, 0);
  }
}

之后在模板里直接用{{ cartTotal }}就能显示实时的总小计，商品数量或价格变动时会自动刷新。

总结一下 #

• 用forEach给每个商品计算单项小计，更新数据集里的subTotal字段；
• 用reduce累加所有商品的金额，实现总小计；
• 用Vue的计算属性让总小计实时响应数据变化。

这样不管你新增多少商品，代码都能自动适配，完全不用硬编码索引~

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