如何通过循环实现JavaScript多条件链式过滤，避免重复调用函数

你可以通过Array.prototype.reduce自动遍历所有过滤维度实现链式过滤，无需手动逐个传入key、调用多次过滤函数，严格交集的过滤逻辑保持不变，后续新增过滤维度也不需要调整过滤逻辑：

const venues = [
  {
    name: 'test1',
    categories: ['1a', '1b'],
    currencies: ['2a', '2b']
  },
  {
    name: 'test2',
    categories: ['1b'],
    currencies: ['2a']
  }
]

const filters = [
  {
    name: 'art',
    id: '1a',
    type: 'categories'
  },
  {
    name: 'testCurrency',
    id: '2b',
    type: 'currencies'
  },
]

// 1. 过滤器按类型分组，和原有逻辑一致
const filtersByType = filters.reduce(
  (hash, obj) => ({
    ...hash,
    [obj.type]: (hash[obj.type] || []).concat(obj)
  }),
  {}
)

// 2. 单步完成多维度链式过滤
const filteredVenues = Object.keys(filtersByType).reduce(
  (prevResult, filterKey) => {
    return prevResult.filter(venue => {
      const currentTypeFilters = filtersByType[filterKey]
      // 该维度无过滤条件直接放行
      if (!currentTypeFilters?.length) return true
      // 匹配当前维度的过滤规则
      return currentTypeFilters.some(filter => venue[filterKey].includes(filter.id))
    })
  },
  venues // 初始值为全量venue数据
)

console.log(filteredVenues) // 输出符合要求的test1对象

逻辑说明 #

• 自动读取所有过滤维度：通过Object.keys(filtersByType)拿到所有需要过滤的维度，不管是2个还是更多维度，都不需要手动修改过滤逻辑
• 严格交集逻辑保持不变：每次过滤都是在上一次过滤的结果基础上执行，只有满足所有维度过滤条件的venue才会被保留
• 可扩展性强：后续新增任意过滤维度（比如门店类型、营业时间等），只要过滤器的type和venue对象的对应字段名匹配，不需要调整过滤代码即可自动生效

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