基于重量计算运费的ES6 JavaScript代码问题求助

核心问题 #

1. 字符串比较导致匹配失败：shippingPrices中的weight是字符串类型，传入getShippingPrice的参数是totalWeight.toFixed(2)生成的字符串。字符串比较按字符顺序进行，比如"10.00"会被判定为小于"8.00"（第一个字符"1"的ASCII码小于"8"），导致find方法找不到符合条件的元素，最终返回undefined。
2. 运费匹配逻辑不符合需求：原函数的匹配逻辑因字符串比较错误，无法正确匹配你预期的阶梯运费规则。

修复代码 #

以下是修正后的代码，解决了字符串比较问题，并适配你描述的需求（重量落在两个阈值之间时，使用对应较低阈值的运费）：

var shippingPrices = [{"price":"1.25","weight":"1.00"},{"price":"4.00","weight":"5.00"},{"price":"6.25","weight":"10.00"}];

window.addEventListener('load',() => {
    let productPrice = Number(document.getElementById('price').value);
    let productWeight = Number(document.getElementById('weight').value);
    let quantity = document.querySelector('[name="quantity"]');

    function updatePrice(quantity){
        return Number(quantity) * productPrice;
    }

    function updateWeight(quantity){
        return Number(quantity) * productWeight;
    }

    function getShippingPrice(weight) {
        const targetWeight = Number(weight);
        // 筛选所有重量≤目标重量的阈值，取其中重量最大的项
        const eligiblePrices = shippingPrices.filter(item => Number(item.weight) <= targetWeight);
        if (eligiblePrices.length > 0) {
            return eligiblePrices.reduce((prev, curr) => 
                Number(prev.weight) > Number(curr.weight) ? prev : curr
            ).price;
        }
        // 重量为0时返回最轻运费
        return shippingPrices[0].price;
    }

    if(quantity) {
        function calculateAndLog() {
            let total = updatePrice(quantity.value);
            let totalWeight = updateWeight(quantity.value);
            let totalShipping = getShippingPrice(totalWeight);

            console.log("total " + total.toFixed(2));
            console.log("poids total " + totalWeight.toFixed(2));
            console.log("prix poids " + totalShipping);
        }

        // 初始化计算
        calculateAndLog();
        // 监听数量变化
        quantity.addEventListener('change', calculateAndLog);
    }
});

关键修改点 #

• 统一数字类型：将商品价格、重量及运费计算中的所有重量值转为数字，彻底避免字符串比较错误。
• 阶梯运费匹配逻辑：先筛选出所有能覆盖当前重量的阈值（重量≤总重），再从中选出重量最大的阈值，对应你需要的阶梯运费（比如3kg匹配5kg的运费，8kg也匹配5kg的运费）。
• 代码复用：把计算和日志输出逻辑封装到calculateAndLog函数中，减少重复代码。

可选逻辑调整 #

如果你的需求是重量超过5kg后使用10kg的运费，只需修改getShippingPrice函数为：

function getShippingPrice(weight) {
    const targetWeight = Number(weight);
    // 筛选所有重量≥目标重量的阈值，取其中重量最小的项
    const eligiblePrices = shippingPrices.filter(item => Number(item.weight) >= targetWeight);
    if (eligiblePrices.length > 0) {
        return eligiblePrices.reduce((prev, curr) => 
            Number(prev.weight) < Number(curr.weight) ? prev : curr
        ).price;
    }
    // 重量超过10kg时返回最高运费
    return shippingPrices[shippingPrices.length - 1].price;
}

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