JavaScript购物车总价计算函数异常问题求助

问题背景 #

开发沙发销售网站的学校项目，主体功能已完成，但购物车总价计算函数始终返回错误结果。需要从API获取商品价格，从localStorage获取商品名称、图片、颜色等信息，再计算总价。

示例异常：添加2件4499€的沙发 + 1件1849€的沙发，计算结果为5547€，正确结果应为10487€。

核心问题分析 #

当前代码的关键错误点：

1. displayTotalPrice在每个商品API请求完成后都会调用totalPriceCalculation，但每次传入的都是单个商品的价格对象，导致计算时所有商品都用当前这个价格来计算，而非各自的实际价格。
2. totalPriceCalculation函数逻辑错误：遍历购物车时，始终使用传入的单个product.price，而不是对应商品的价格。
3. 重复调用总价计算，每次都会覆盖之前的结果，最终只显示最后一个商品的计算结果（比如示例中最后处理的是1849€的商品，计算时用1849*(2+1)=5547€，正好匹配错误结果）。

修复方案 #

步骤1：重构价格获取与总价计算逻辑 #

先批量获取所有商品的价格，再统一计算总价，避免重复计算和单个价格覆盖问题。

修复后的代码 #

1. 从LocalStorage获取购物车信息（原代码保留，无修改）

function getCart() {
  let cart = localStorage.getItem("cart");
  if (cart === null || cart === "[]") {
    let emptyCart = document.querySelector("#cart__items");
    emptyCart.innerText = "Votre panier est vide";
    document.querySelector(".cart__order").style.display = "none";
    return [];
  } else {
    return JSON.parse(cart);
  }
}

2. 批量获取所有商品价格并计算总价

async function fetchAllProductPrices() {
  const cart = getCart();
  // 批量请求所有商品价格
  const pricePromises = cart.map(item => 
    fetch(`http://localhost:3000/api/products/${item.id}`)
      .then(res => res.json())
      .then(product => ({...item, price: product.price}))
  );
  // 等待所有请求完成
  const completeCartItems = await Promise.all(pricePromises);
  
  // 渲染所有商品
  completeCartItems.forEach(item => productDisplay(item));
  // 计算并展示总价
  calculateAndDisplayTotalPrice(completeCartItems);
  // 展示总数量
  displayTotalQuantity();
}

3. 重构总价计算函数

function calculateAndDisplayTotalPrice(completeCartItems) {
  const totalPrice = completeCartItems.reduce((sum, item) => {
    const quantity = parseInt(item.quantity, 10); // 替换eval，用parseInt更安全
    return sum + (item.price * quantity);
  }, 0);
  
  document.querySelector("#totalPrice").innerText = totalPrice;
}

4. 替换原completeCart函数

// 替换原completeCart函数
fetchAllProductPrices();

5. 优化总数量计算（替换eval）

function totalquantityCalculation() {
  let cart = getCart();
  let number = 0;

  cart.forEach((sumItem) => {
    number += parseInt(sumItem.quantity, 10); // 用parseInt替代eval，更安全
  });

  return number;
}

function displayTotalQuantity() {
  const AllItems = document.querySelector("#totalQuantity");
  AllItems.innerText = totalquantityCalculation();
  return AllItems;
}

6. 保留原商品展示相关函数（无修改）

function container(DisplayArticle) {
  document.querySelector("#cart__items").appendChild(DisplayArticle);
}

// 商品展示函数
function productDisplay(product) {
  const DisplayArticle = displayArticle(product);
  container(DisplayArticle);

// DOM操作相关函数：获取HTML元素的选择器
  const DisplayImage = displayImage(product); 
  const DisplayDescription = displayDescription(product);

// 删除和修改数量功能函数
  const DisplaySettings = settings(product);

  DisplayArticle.appendChild(DisplayImage);
  DisplayArticle.appendChild(DisplayDescription);
  DisplayArticle.appendChild(DisplaySettings);

  return DisplayArticle;
}

关键优化点 #

• 用Promise.all批量获取所有商品价格，避免多次重复计算总价
• 移除eval，改用parseInt处理数量，避免安全风险和潜在类型问题
• 统一在所有价格获取完成后计算总价，确保每个商品使用自身的正确价格
• 避免多次调用总价展示函数，防止结果被覆盖

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