Vue.js多if数组条件判断失效 选中症状无法匹配对应疾病

• JavaScript中数组属于引用类型，使用===直接对比两个数组时，本质对比的是两个数组在内存中的引用地址，而非数组存储的实际内容。哪怕两个数组包含的元素完全相同，只要是独立创建的不同数组实例，===判断结果永远为false，因此所有if判断分支都不会触发，Disease字段始终保持初始空值。
• 存在隐藏的顺序匹配问题：用户勾选复选框的顺序不一定和预设数组的元素顺序一致，就算解决了引用对比的问题，元素顺序不匹配也会导致判断失效。

基础修复 #

对比前先对两个数组的元素做统一排序，再转成字符串后对比，同时将多个独立if改为else if避免重复判断，修正后的handleSubmit方法代码如下：

async handleSubmit() {
  // 拷贝选中症状数组、排序后拼接为字符串，消除引用差异和勾选顺序影响
  const selectedSymptomKey = [...this.symptom].sort().join(',')
  // 每次提交先重置疾病匹配结果
  this.Disease = ""

  if(selectedSymptomKey === ["Vomit","Swollen Lymph nodes","Red Eyes","Tiredness"].sort().join(',')){
    this.Disease = "Cat Scratch Disease";
  } else if(selectedSymptomKey === ["Diarrheal","Greasy Stools","Dehydrated"].sort().join(',')){
    this.Disease = "Giardiasis";
  } else if(selectedSymptomKey === ["Diarrheal"].sort().join(',')){
    this.Disease = "Campylobacter";
  }

  console.log('选中症状：', this.symptom)
  console.log('匹配疾病：', this.Disease)
}

可维护性优化 #

如果后续需要新增更多疾病匹配规则，不建议堆叠大量if判断，可以提前维护症状组合与疾病的映射表，代码更易扩展：

// 疾病-症状映射表，新增匹配规则直接往数组里加配置即可
const diseaseMatchMap = [
  {
    symptomList: ["Vomit","Swollen Lymph nodes","Red Eyes","Tiredness"],
    diseaseName: "Cat Scratch Disease"
  },
  {
    symptomList: ["Diarrheal","Greasy Stools","Dehydrated"],
    diseaseName: "Giardiasis"
  },
  {
    symptomList: ["Diarrheal"],
    diseaseName: "Campylobacter"
  }
]

async handleSubmit() {
  const selectedSymptomKey = [...this.symptom].sort().join(',')
  const matchedDisease = diseaseMatchMap.find(item => {
    return [...item.symptomList].sort().join(',') === selectedSymptomKey
  })
  this.Disease = matchedDisease ? matchedDisease.diseaseName : "暂未匹配到对应疾病"
  console.log('选中症状：', this.symptom)
  console.log('匹配疾病：', this.Disease)
}

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