JS如何判断数值是否匹配多维数组区间 实现商品价格筛选

问题根源 #

之前的校验逻辑存在两个核心错误：

• 判断顺序错误：遍历选中区间时，只要当前区间不匹配就直接判定商品不符合条件，忽略了后续其他区间可能匹配的情况
• 循环终止逻辑错误：jQuery的each方法中，普通return只会跳过当前循环项，无法终止整个遍历流程，也不能直接返回最终匹配结果

实现思路 #

对单个商品做区间匹配时，遵循以下流程即可覆盖多区间同时选中的场景：

1. 先给当前商品初始化匹配标记，默认值为false（未命中任何选中区间）
2. 遍历所有用户选中的价格区间，只要商品价格命中任意一个区间，就把匹配标记改为true，同时直接终止剩余区间的遍历（减少无意义的性能消耗）
3. 所有区间判断完成后，再根据匹配标记统一控制商品显隐：标记为true则展示商品，为false则隐藏商品

区间边界建议统一规则：针对给出的预设区间[[0, 500], [500, 1000], [1000, 2000], [2000, 10000]]，推荐使用左闭右开判定规则——价格大于等于区间最小值、小于区间最大值时判定命中，避免500、1000这类端点值同时命中两个区间。如果业务要求端点值归属于特定区间，直接调整判断符号即可。

完整代码 #

补全后的可直接运行逻辑如下：

var checkedItems = [];   
var checkboxes = document.querySelectorAll('input[name=price]:checked');
var products = document.getElementsByClassName("products");

// 收集所有选中的价格区间
$(checkboxes).each(function( index ) {
    var box = this;
    checkedItems[index] = [Number(box.dataset.min), Number(box.dataset.max)];
});

// 无选中项时默认展示所有商品
if (checkedItems.length === 0) {
    $(products).show();
    return;
}

// 遍历商品执行筛选
$(products).each(function() {
    var product = this;
    var price = Number(product.dataset.price);
    let isMatched = false;

    // 遍历选中区间做匹配
    for (let i = 0; i < checkedItems.length; i++) {
        const [min, max] = checkedItems[i];
        // 左闭右开判断，可根据业务需求调整>=、<=符号
        if (price >= min && price < max) {
            isMatched = true;
            break;
        }
    }

    // 控制商品显隐
    isMatched ? $(product).show() : $(product).hide();
});

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