如何基于动态生成的筛选数组对包含对象的主数组进行过滤

筛选逻辑说明 #

通常这种动态生成的筛选条件有两种常用匹配逻辑，可根据业务需求选择：

• OR逻辑：只要匹配任意一个筛选条件就保留对应数据，适合同分类多选筛选项场景
• AND逻辑：必须匹配所有筛选条件才保留对应数据，适合多维度交叉筛选场景

代码实现 #

OR逻辑实现 #

const filteredResult = codes.filter(item => {
  // 遍历所有筛选条件，只要有一个匹配就保留当前项
  return filter.some(filterItem => {
    const [filterKey, filterValue] = Object.entries(filterItem)[0]
    return item[filterKey] === filterValue
  })
})

// 示例输入下的输出：两个对象都会被保留，第一个匹配city=New York，第二个匹配age=20
console.log(filteredResult)

AND逻辑实现 #

const filteredResult = codes.filter(item => {
  // 遍历所有筛选条件，必须全部匹配才保留当前项
  return filter.every(filterItem => {
    const [filterKey, filterValue] = Object.entries(filterItem)[0]
    return item[filterKey] === filterValue
  })
})

// 示例输入下的输出：空数组，没有对象同时满足city=New York和age=20两个条件
console.log(filteredResult)

可选优化方案 #

如果筛选条件中可能出现同一字段的多个筛选值（比如同时选中多个城市），可以先对筛选条件按字段分组，减少重复判断，提升性能：

// 先把筛选条件按字段分组，得到结构如 { city: ['New York', 'Santa Monica'], age: ['20'] }
const groupedFilter = filter.reduce((acc, cur) => {
  const [field, value] = Object.entries(cur)[0]
  acc[field] = acc[field] || []
  acc[field].push(value)
  return acc
}, {})

// 过滤时同一字段下的多个值默认走OR匹配，不同字段之间走AND匹配
const filteredResult = codes.filter(item => {
  return Object.entries(groupedFilter).every(([field, allowedValues]) => {
    return allowedValues.includes(item[field])
  })
})

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