JavaScript实现嵌套数组多条件联合筛选（多分类过滤）

判定逻辑约定 #

先统一两个维度的筛选规则，避免逻辑偏差：

• 单个维度下未选中任何筛选项时，该维度不做拦截，所有门店默认通过该维度校验
• 单个维度下选中多个筛选项时，门店的对应分类数组只要命中任意一个选中值，即通过该维度校验
• 最终结果取两个维度的交集：同时通过美食分类、配送分类校验的门店才会被保留

过滤函数代码 #

假设你当前已经维护好两个选中状态数组：

• selectedFoodList：存储所有已选中的美食分类值
• selectedDeliveryList：存储所有已选中的配送分类值
  全量门店数据存在原始变量originStoreList中，直接用如下过滤逻辑即可：

const filteredResult = originStoreList.filter(store => {
  // 美食分类匹配判断
  const foodPass = selectedFoodList.length === 0
    ? true
    : selectedFoodList.some(foodCate => store.FoodCategory.includes(foodCate))

  // 配送分类匹配判断
  const deliveryPass = selectedDeliveryList.length === 0
    ? true
    : selectedDeliveryList.some(deliveryCate => store.DeliveryCategory.includes(deliveryCate))

  // 两个维度同时匹配才返回
  return foodPass && deliveryPass
})

特殊场景适配 #

如果你的分类字段存储的是带ID的对象结构（比如{cateId: 2, cateName: '奶茶饮品'}），只需要把includes判断换成字段值比对即可，参考示例：

// 按分类ID匹配的美食分类校验逻辑
const foodPass = selectedFoodList.length === 0
  ? true
  : selectedFoodList.some(selectedId => 
      store.FoodCategory.some(cateItem => cateItem.cateId === selectedId)
    )

配送分类的对象匹配逻辑和上述写法完全一致，替换对应字段名即可。

注意事项 #

• 不要在滚动、输入等高频触发事件里重复执行过滤逻辑，仅在分类标签选中状态变化、搜索关键词提交时触发计算即可，数据量较大时能明显减少性能消耗
• 如果需要加关键词搜索、营业状态筛选等其他条件，只需要在filter里新增对应维度的布尔判断，和现有逻辑做与运算即可，扩展性很强

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