如何使用Vue.js 3组合式API计算数组对象的累计总价

你可以通过遍历数组并维护一个累计总价变量的方式实现需求，以下是几种实用的实现方案：

方案一：forEach遍历直接修改对象（最直观） #

这种方式直接在原数组的对象上添加totalPrice字段，适合不需要保留原数组的场景：

let cumulativeTotal = 0;
products.value.forEach(item => {
  cumulativeTotal += item.price;
  item.totalPrice = cumulativeTotal;
});

方案二：map生成新数组（不修改原对象） #

如果希望保留原数组的纯净性，可以用map生成包含totalPrice的新数组：

let cumulativeTotal = 0;
const updatedProducts = products.value.map(item => {
  cumulativeTotal += item.price;
  return {
    ...item, // 复制原对象的所有属性
    totalPrice: cumulativeTotal
  };
});
products.value = updatedProducts;

方案三：reduce一次性构建结果数组 #

利用reduce同时完成累计计算和数组构建：

products.value = products.value.reduce((resultList, currentItem) => {
  // 计算当前累计总价：取结果数组最后一项的totalPrice（没有则为0）加上当前商品价格
  const currentTotal = (resultList.length ? resultList[resultList.length - 1].totalPrice : 0) + currentItem.price;
  resultList.push({ ...currentItem, totalPrice: currentTotal });
  return resultList;
}, []); // 初始值为空数组

你之前代码的问题说明 #

你尝试的const totalPrice = products.price += products.price存在两个核心问题：

1. products是Vue的ref对象，必须通过.value访问数组内容；
2. products是数组，本身没有price属性，需要遍历数组中的每个对象来处理累计逻辑。

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