JS实现类电商多条件级联数组过滤异常排查

问题根因 #

当前筛选逻辑选第二个商品返回空数组，核心是三个逻辑漏洞：

• 二级筛选复用了上一次筛选后的缓存数组filtrada作为数据源，没有每次筛选都先重置到一级筛选的初始结果集，多次筛选后数据集被不断裁剪，很容易出现匹配不到值的情况
• 状态字段匹配直接做全等比对，但前端控件传的状态值是布尔类型（已售/未售对应true/false），原始数组里的status存的是文本内容，值类型不匹配会导致状态筛选失效
• 用扩展运算符遍历this.search对象的写法兼容性差，如果search里存在非选择控件的属性，会生成无效筛选条件，打断正常匹配逻辑

修复后完整代码 #

严格按照「先一级筛选、后二级筛选」的顺序执行，每次筛选都从原始全量数据重新计算，不缓存中间裁剪后的数据集：

this.filtered2 = function() {
  // 第一步：从原始全量数组跑一级筛选（年份、月份、合作方）
  const firstLevelRes = partners.filter(item => {
    // 规则：选了值就匹配，没选就默认放行
    const matchYear = this.search.ano?.value ? item.ano === this.search.ano.value : true
    const matchMonth = this.search.mes?.value ? item.mes === this.search.mes.value : true
    const matchPartner = this.search.parceiro?.value ? item.parceiro === this.search.parceiro.value : true
    return matchYear && matchMonth && matchPartner
  })

  // 第二步：基于一级筛选结果跑二级筛选（商品名、订单状态）
  return firstLevelRes.filter(product => {
    // 商品名匹配
    const matchItem = this.search.item_venda?.value
      ? product.item_venda === this.search.item_venda.value
      : true

    // 状态匹配：先做类型映射，统一比对规则
    let matchStatus = true
    const selectedStatus = this.search.status?.value
    if (selectedStatus !== '' && selectedStatus !== undefined) {
      // 约定：筛选值true对应已完成状态"CONCLUIDA"，false对应支付异常状态
      const isPaid = product.status === 'CONCLUIDA'
      matchStatus = isPaid === Boolean(selectedStatus)
    }

    return matchItem && matchStatus
  })
}

适配规则说明 #

• 所有筛选条件统一遵循选了才校验、不选就放行的逻辑，和电商平台品牌、属性、状态叠加筛选的交互完全一致：选品牌就只出该品牌商品，再选状态就只出该品牌下符合状态的商品，取消某个筛选条件就自动放开对应限制
• 禁止用上一次筛选后的结果作为下一次筛选的数据源，必须每次都从原始全量数据开始逐级计算，避免筛选条件变更时数据集被之前的筛选逻辑裁剪，导致返回空结果
• 不同存储类型的字段要先做规则映射再比对，不要依赖==的隐式类型转换，避免出现非预期的匹配结果

内容的提问来源于stack exchange，提问作者Gilmar Ribeiro dos Santos