JS如何按多条件（含数值区间）正确筛选对象数组

原有代码问题 #

• 匹配逻辑错误：Array.filter回调中只要匹配任意一个筛选项就将当前项加入结果，没有校验所有筛选条件同时满足，导致结果不符合预期
• 缺失区间筛选逻辑：针对price这类[min, max]格式的区间筛选值，直接做相等判断，完全无法生效
• API使用错误：filter回调需要返回布尔值标记当前项是否保留，原有代码返回Set对象，不符合API的使用规范

示例基础数据 #

待筛选原始数组：

const fbdata =  [
  {"plage": 0, "camping": 0, "city": 1, "car": 1, "price": 100, "wifi":  "Yes"}, 
  {"plage": 1, "camping": 0, "city": 1, "car": 1, "price": 200, "wifi":  "Yes"}, 
  {"plage": 0, "camping": 0, "city": 1, "car": 0, "price": 300, "wifi":  "No"}
]

用户筛选条件对象：

const myfilter ={
  wifi: "Yes",
  price: [90, 150], // 数值区间：最小值90，最大值150
  car: 1,
}

可直接运行的正确实现 #

核心逻辑：遍历数组每一项时，逐项校验所有筛选规则，区分精确匹配和区间匹配两种场景，只有全部规则满足时才保留当前项。

const filterResult = fbdata.filter(item => {
  for (const key in myfilter) {
    const ruleValue = myfilter[key];
    // 跳过未设置的空筛选条件
    if (ruleValue === undefined || ruleValue === null) continue;

    const fieldValue = item[key];
    // 识别区间规则：筛选值为长度2的数组时，做闭区间范围校验
    if (Array.isArray(ruleValue) && ruleValue.length === 2) {
      const [min, max] = ruleValue;
      if (fieldValue < min || fieldValue > max) return false;
    } else {
      // 普通值做严格相等匹配
      if (fieldValue !== ruleValue) return false;
    }
  }
  // 所有筛选规则校验通过
  return true;
});

// 基于示例数据的运行结果：
// [{plage: 0, camping: 0, city: 1, car: 1, price: 100, wifi: 'Yes'}]

扩展提示 #

• 如果需要支持开区间、多值匹配、模糊搜索等其他筛选规则，只需要在条件判断分支中补充对应校验逻辑即可
• 如果筛选条件中存在空字符串、0这类有效值，可根据业务场景调整空条件的跳过规则

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