Javascript购物车满额折扣功能实现问题咨询

• 类型未统一转换：从localStorage读取的cartCost是字符串类型，未提前转为数字就做数值比较，会出现非预期的比较结果；同时未处理cartCost为null的边界情况，直接调用parseInt会生成NaN导致逻辑崩溃。
• 条件判断逻辑错误：调整后的代码使用||（逻辑或）作为区间判断运算符，例如cartCost >= 50 || cartCost <= 75会覆盖所有数值（任意数字要么≥50要么≤75，两个条件永远满足一个），导致折扣逻辑乱触发。
• 执行顺序错误：先计算折扣再更新购物车金额，折扣判断用的是上一次的购物车金额，自然无法匹配本次加减商品后的最新金额。
• 存储逻辑错误：将折扣后的金额直接存入localStorage，后续计算会基于折扣后的值继续叠加，导致原始金额统计错误，折扣属于展示层逻辑，原始购物车金额需要独立存储。

核心调整思路：优先完成本次商品加减的原始金额更新，再基于最新原始金额计算对应折扣，原始金额独立存储避免逻辑污染。

function totalCost(product, action) {
    // 读取原始购物车金额，提前转为数字，空值默认设为0
    let originCartCost = parseInt(localStorage.getItem('totalCost')) || 0;
    let finalCost = 0;

    // 第一步：更新原始购物车金额
    if (action === "decrease") {
        // 兜底避免金额出现负数
        originCartCost = Math.max(originCartCost - product.price, 0);
    } else {
        originCartCost += product.price;
    }
    // 存储未折扣的原始金额
    localStorage.setItem('totalCost', originCartCost);
    console.log("原始购物车金额：", originCartCost);

    // 第二步：按优先级计算折扣，高门槛折扣优先判断
    if (originCartCost >= 200) {
        finalCost = originCartCost - 50;
        console.log('触发满200减50折扣，折扣后金额：', finalCost);
    } else if (originCartCost >= 50) {
        finalCost = originCartCost - 20;
        console.log('触发满50减20折扣，折扣后金额：', finalCost);
    } else {
        finalCost = originCartCost;
        console.log('未达到折扣门槛，应付金额：', finalCost);
    }

    // 返回折扣后金额供页面渲染使用
    return finalCost;
}

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