如何将for循环生成的calculatedPrice存入数组并计算购物车总价

你代码的核心问题是把totalPrice数组的定义放在了for循环内部——每次循环都会重新创建一个空数组，导致之前的元素被清空，自然每次只能存当前的calculatedPrice，数组长度永远是1。

修正后的代码 #

function getNumberWithCommas(number) {
  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}

var price = [
  6599, 7659, 899, 569, 899, 279, 219, 1797, 3999, 2769, 599, 1349, 2149, 219,
  219, 519, 2499, 2949, 5149, 7689, 15999,
];

// 把数组声明移到循环外部，确保整个循环共用同一个数组
var totalPrice = [];

for (let i = 0; i < price.length; i++) {
  var productPrice = document.createElement("span");
  productPrice.className = "price";
  productPrice.setAttribute("id", `price-id-${i}`);
  var calculatedPrice = price[i] * quantities[i];
  productPrice.textContent = `R$ ${getNumberWithCommas(calculatedPrice)},00`;
  precoTotalDiv.appendChild(productPrice);
  
  // 直接往外部的数组中添加元素
  totalPrice.push(calculatedPrice);
}

// 计算购物车总价
var cartTotal = totalPrice.reduce((sum, current) => sum + current, 0);
// 格式化并输出总价
console.log(`购物车总价：R$ ${getNumberWithCommas(cartTotal)},00`);

关键说明 #

1. 数组声明位置：将totalPrice = []移到循环外，确保所有循环迭代都往同一个数组里存值，不会被重置。
2. 总价计算：用数组的reduce方法快速累加所有元素，第二个参数0是累加的初始值，避免数组为空时出错。
3. 遍历优化：把循环条件改成i < price.length，自动适配数组长度，避免因手动写固定次数导致的元素遗漏或越界问题。

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