JS实现对象数组匹配所有过滤条件才被筛选的逻辑修正方法

原有逻辑问题 #

• 遍历过滤器时只要命中任意一个条件就直接返回真值，本质是「或」逻辑，没有要求所有筛选条件同时成立
• 多余实现了遍历数据对象key匹配筛选字段的逻辑，拿到的itemKey是数组类型，和字符串类型的filterType做相等判断本身存在逻辑漏洞，这部分逻辑完全冗余

修正后代码 #

var data = [
    {"id": 1, "area": 965, "bedrooms": 1, "floor": 3, "price": 2200},
    {"id": 2,"area": 1065, "bedrooms": 2, "floor": 6, "price": 2726},
    {"id": 3,"area": 401, "bedrooms": 2, "floor": 4, "price": 2726},
    {"id": 4,"area": 699, "bedrooms": 3, "floor": 8, "price": 1232},
    {"id": 5,"area": 661, "bedrooms": 1, "floor": 9, "price": 1277},
    {"id": 6,"area": 412, "bedrooms": 1, "floor": 12, "price": 518},
    {"id": 7,"area": 925, "bedrooms": 2, "floor": 10, "price": 2509},
];

// 待应用的筛选规则
var filters = [
    {highValue: 9, lowValue: 4, type: "floor"},
    {highValue: 700, lowValue: 400, type: "area"},
];

var filteredData = data.filter(function(item){
    // 所有筛选规则全部满足时才保留当前条目
    return filters.every(function(filter) {
        const fieldValue = item[filter.type];
        return fieldValue >= filter.lowValue && fieldValue <= filter.highValue;
    });
});

console.log(filteredData);
// 执行后仅返回id为3、4、5的三条数据，匹配预期

逻辑说明 #

• 用Array.every()遍历筛选规则数组，该方法只有当所有规则校验都返回真值时，最终结果才为真，天然适配多条件同时成立的「与」筛选需求
• 移除冗余的对象key遍历逻辑：筛选规则中已经通过type字段明确指定了要校验的属性名，直接通过item[filter.type]即可取到对应字段的值，不需要额外遍历匹配
• 只要当前数据有任意一条筛选规则不满足范围要求，every方法会立刻返回假值，当前数据就会被过滤掉，不会出现误匹配的问题

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