如何通过动态filterObject过滤对象数组，满足多条件同时匹配需求

问题原因 #

你现有实现的核心问题如下：

• 逻辑不符合需求：使用||或运算符，而需求是要同时满足所有筛选条件，需要用与逻辑
• 未过滤不存在的筛选字段：如果filter中没有某个字段，filter.xxx会是undefined，对应的task.xxx === undefined绝大多数情况都为false，会导致筛选结果异常
• 依赖项缺失：useEffect的依赖数组没有加入data，data更新时不会触发重新筛选

可行实现方案 #

核心思路是先提取filter中所有实际存在的筛选字段，再逐个校验待筛选对象是否全部匹配这些字段的值：

useEffect(() => {
  // 源数据为空时直接返回
  if (!data) {
    setFilteredTasks([])
    return
  }
  // 无筛选条件时返回全部源数据
  if (!filter || Object.keys(filter).length === 0) {
    setFilteredTasks(data)
    return
  }
  // 拿到所有生效的筛选字段
  const validFilterKeys = Object.keys(filter)
  const filtered = data.filter(task => {
    // 所有筛选字段都匹配才保留当前对象
    return validFilterKeys.every(filterKey => {
      // 如果是UI输入的字符串类型值需要和数字类型字段匹配，可以统一转成字符串比较
      // return String(task[filterKey]) === String(filter[filterKey])
      return task[filterKey] === filter[filterKey]
    })
  })
  setFilteredTasks(filtered)
// 记得把data加入依赖数组，源数据更新时自动重筛
}, [data, filter])

代码说明 #

• Object.keys(filter)可以动态获取当前设置的所有筛选字段，不用硬编码level/objectId等字段，后续新增筛选字段也不用修改逻辑
• Array.every()方法天生符合“所有条件都满足才返回true”的需求，自动适配单筛选条件、多筛选条件的场景
• 支持任意数量的筛选字段，不需要手动新增判断分支

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