如何使用ES6 filter实现含数组字段的数据数组多搜索键筛选

你可以通过先统一处理数组/非数组类型的字段值，再判断字段是否满足搜索条件的逻辑实现，以下是可直接运行的代码：

// 统一判断值是否匹配的工具函数
const isValueMatch = (dataVal, searchVal) => {
  // 兼容数据不存在对应搜索字段的场景
  if (dataVal === undefined) return false
  // 把两种值都转成数组，统一处理类型差异
  const dataArr = Array.isArray(dataVal) ? dataVal : [dataVal]
  const searchArr = Array.isArray(searchVal) ? searchVal : [searchVal]
  // 只要存在任意一个共同元素就算匹配该字段
  return searchArr.some(item => dataArr.includes(item))
}

// 筛选主逻辑
const filterResult = dataStore.filter(item => {
  // 要求所有搜索条件都必须满足
  return Object.entries(searchByThis).every(([key, searchVal]) => {
    return isValueMatch(item[key], searchVal)
  })
})

console.log(filterResult)

逻辑说明 #

• 先通过isValueMatch抹平数组和非数组的类型差异，不管是数据里的字段还是搜索条件为数组，都统一转成数组判断交集
• 用every方法保证所有搜索条件都必须满足，只要有一个条件不匹配就过滤掉该条数据
• 用some方法判断两个数组是否有共同元素，只要搜索条件里的任意值在数据字段里存在就算匹配该字段

示例运行结果 #

你提供的searchByThis要求同时满足三个条件：

• position为Cricket或Chess
• level为L1
• fName为Lara
  现有dataStore里没有同时符合三个条件的对象，所以返回空数组[]。如果调整搜索条件比如去掉level的要求，就会返回fName为Lara、position为Chess和fName为Sachin、position为Cricket的两个对象。

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