求助：filter回调中For..of循环仅执行一次的问题

问题描述 #

在filter函数的回调中使用For..of循环遍历搜索参数对象时，循环仅执行一次，仅将搜索对象的第一个键值对应用于过滤。需要实现遍历完所有键值对，保留同时匹配搜索对象所有传入值的元素，当前仅需处理字符串和数组类型。

示例代码（原问题代码） #

const search = {
  Condition: "Allergies",
  ProductName: "Acetaminophen"
}

const meds = 
  [ { Active      : false
    , Condition   : [ 'Allergies'] 
    , DaysSupply  : 0
    , Doseform    : 'Tablet'
    , ProductName : 'Acetaminophen 650 mg tablet, extended release'
    , Protocol    : 'PATIENT COMMUNICATION:  Price $10.  100 tablets'
    , Quantity    : 100
    } 
  , { Active      : false
    , Condition   : [ 'COVID-19 Symptoms'] 
    , DaysSupply  : 0
    , Doseform    : 'Tablet'
    , ProductName : 'Acetaminophen 650 mg tablet, extended release'
    , Protocol    : 'PATIENT COMMUNICATION: Price is $10.  100 tablets'
    , Quantity    : 100
    } 
  , { Active      : false
    , Condition   : [ 'Headaches (Migraine & Tension)'] 
    , DaysSupply  : 0
    , Doseform    : 'Tablet'
    , ProductName : 'Acetaminophen 650 mg tablet, extended release'
    , Protocol    : 'PATIENT COMMUNICATION: Price is $10.  100 tablets'
    , Quantity    : 100
    } 
  , { Active      : false
    , Condition   : [ 'Allergies'] 
    , DaysSupply  : 0
    , Doseform    : 'Capsule'
    , ProductName : 'Amoxicillin 500 mg capsule'
    , Protocol    : 'PATIENT COMMUNICATION: Price is $20- 21 capsules'
    , Quantity    : 21
    } 
  ] 

const comparedtosearch = (medication, searchParams) => {
  for (let [key, value] of Object.entries(searchParams)) {
    if (key === "Condition") {
      const includesSearch = (item) => item.toLowerCase().includes(value.toLowerCase())
      return medication[key].some(includesSearch)
    } else if (key != "Condition") {
      return medication[key].toLowerCase().includes(value.toLowerCase())
    }
  }
}

const handleSearch = (searchParams) => {
  const medications = [...meds]
  const formFiltered = medications.filter((med) => comparedtosearch(med, searchParams))

  console.log(formFiltered)
}

handleSearch(search)

问题根源 #

原代码的comparedtosearch函数在循环的第一次迭代就通过return返回了结果，导致循环无法继续遍历后续的搜索键值对，自然只能应用第一个条件做过滤。

修复方案 #

要实现所有搜索条件必须同时满足的逻辑，需要：

1. 遍历每一个搜索键值对，逐一校验是否匹配
2. 只要有一个条件不匹配，立即返回false，终止判断
3. 所有条件都校验通过后，才返回true

修复后的完整代码 #

const search = {
  Condition: "Allergies",
  ProductName: "Acetaminophen"
}

const meds = 
  [ { Active      : false
    , Condition   : [ 'Allergies'] 
    , DaysSupply  : 0
    , Doseform    : 'Tablet'
    , ProductName : 'Acetaminophen 650 mg tablet, extended release'
    , Protocol    : 'PATIENT COMMUNICATION:  Price $10.  100 tablets'
    , Quantity    : 100
    } 
  , { Active      : false
    , Condition   : [ 'COVID-19 Symptoms'] 
    , DaysSupply  : 0
    , Doseform    : 'Tablet'
    , ProductName : 'Acetaminophen 650 mg tablet, extended release'
    , Protocol    : 'PATIENT COMMUNICATION: Price is $10.  100 tablets'
    , Quantity    : 100
    } 
  , { Active      : false
    , Condition   : [ 'Headaches (Migraine & Tension)'] 
    , DaysSupply  : 0
    , Doseform    : 'Tablet'
    , ProductName : 'Acetaminophen 650 mg tablet, extended release'
    , Protocol    : 'PATIENT COMMUNICATION: Price is $10.  100 tablets'
    , Quantity    : 100
    } 
  , { Active      : false
    , Condition   : [ 'Allergies'] 
    , DaysSupply  : 0
    , Doseform    : 'Capsule'
    , ProductName : 'Amoxicillin 500 mg capsule'
    , Protocol    : 'PATIENT COMMUNICATION: Price is $20- 21 capsules'
    , Quantity    : 21
    } 
  ] 

const comparedtosearch = (medication, searchParams) => {
  // 遍历所有搜索键值对，逐一校验
  for (let [key, value] of Object.entries(searchParams)) {
    let isMatch = false;
    if (key === "Condition") {
      const includesSearch = (item) => item.toLowerCase().includes(value.toLowerCase())
      isMatch = medication[key].some(includesSearch)
    } else {
      isMatch = medication[key].toLowerCase().includes(value.toLowerCase())
    }
    // 只要一个条件不匹配，直接返回false
    if (!isMatch) {
      return false;
    }
  }
  // 所有条件都匹配，返回true
  return true;
}

const handleSearch = (searchParams) => {
  const medications = [...meds]
  const formFiltered = medications.filter((med) => comparedtosearch(med, searchParams))

  console.log(formFiltered)
}

handleSearch(search)

说明 #

修复后的代码会遍历完search对象的所有键值对，只有当药物同时满足Condition和ProductName的搜索条件时，才会被保留在过滤结果中。执行后会输出第一个药物对象，符合预期。

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