JavaScript购物车discount折扣功能重复扣减总金额问题咨询

现存问题 #

• 核心问题1：没有做折扣已使用的校验，每次调用discountCart方法都会执行扣减逻辑，重复调用就会反复扣减总金额
• 核心问题2：折扣条件判断误用了逻辑或||，导致条件判断完全失效：cartCost >= 50 || cartCost <= 75 这个条件对所有数值都会成立（所有数字要么大于等于50，要么小于等于75），任何金额都会触发减20的逻辑，第二个折扣分支永远不会执行
• 问题3：从localStorage取出的cartCost是字符串类型，未提前做数字转换就做大小比较，可能出现隐式类型转换异常
• 问题4：折扣计算基于当前存储的总金额做扣减，如果之前已经扣过折扣，会导致后续计算的折扣档次错误

修复步骤 #

1. 新增discountApplied标识存储在localStorage中，标记折扣是否已被使用，调用折扣方法时先校验标识，已使用则直接终止逻辑
2. 将条件判断的||替换为逻辑与&&，保证只有金额在对应区间才会触发对应折扣
3. 优先将取出的总金额转换为数字类型再做计算和判断
4. 购物车商品变动时重置折扣使用标识，保证商品调整后折扣可以重新生效
5. 增加边界判断，避免折扣后总金额出现负数

修复后参考代码 #

调整后的totalCost方法 #

function totalCost(product, action) {
    let cartCost = localStorage.getItem('totalCost');
    // 购物车商品变动，重置折扣使用状态
    localStorage.setItem('discountApplied', 'false');
    
    console.log("My cartCost is", cartCost);
    console.log(typeof cartCost );
    if(action == "decrease") {
        cartCost = parseInt(cartCost);
        localStorage.setItem('totalCost',cartCost - product.price);
    } else if(cartCost != null) {
        cartCost = parseInt(cartCost);
        localStorage.setItem("totalCost", cartCost + product.price);
    } else {
        localStorage.setItem("totalCost", product.price);
    }
}

调整后的discountCart方法 #

function discountCart() {
    // 校验折扣是否已使用
    const discountApplied = localStorage.getItem('discountApplied') === 'true';
    if (discountApplied) return;

    let cartCost = parseInt(localStorage.getItem('totalCost'));
    // 金额非法直接返回
    if (isNaN(cartCost) || cartCost <= 0) return;

    let finalCost = cartCost;
    // 修正条件判断，如需保留原50-75、200-250的区间可自行调整判断条件
    if (cartCost >= 50 && cartCost <= 75) {
        finalCost = cartCost - 20;
        console.log('discount 20!', finalCost);
    } else if (cartCost >= 200 && cartCost <= 250){
        finalCost = cartCost - 50;
        console.log('discount 50!', finalCost);
    } else {
        // 不符合折扣条件直接返回
        return;
    }
    // 避免折扣后金额为负
    finalCost = Math.max(finalCost, 0);
    localStorage.setItem("totalCost", finalCost);
    // 标记折扣已使用
    localStorage.setItem('discountApplied', 'true');
}

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