JS多条件分支优化：肤质检测Quiz逻辑如何实现性能更优？

现有实现的问题 #

你当前用的串联if-else写法绝对不是最优方案，存在几个明显问题：

• 性能差：if-else是顺序匹配，最坏情况需要遍历所有分支才能得到结果，规则越多匹配速度越慢
• 可维护性差：新增/修改规则时需要改动逻辑判断代码，很容易漏写条件、写错判断逻辑
• 可读性差：大量重复的判断条件堆在一起，很难快速理清规则逻辑

更优的实现方案 #

方案1：查表法（最推荐，适配所有场景） #

利用对象/Map做映射，把三个问题的答案拼成唯一key，直接查询得到结果，查询复杂度为O(1)，性能拉满，规则维护也不需要改动逻辑代码，只需要修改映射表即可：

// 构造答案-肤质映射表，key为q1、q2、q3拼接的唯一标识
const skinTypeMap = {
  '1-1-1': 'DRY',
  '1-1-2': 'DRY',
  '1-1-3': 'DRY',
  '1-1-4': 'DRY',
  '1-2-1': 'DRY',
  '1-2-2': 'DRY',
  '1-2-3': 'DRY',
  '1-2-4': 'COMBO',
  '1-3-1': 'DRY',
  '1-3-2': 'DRY',
  '1-3-3': 'COMBO',
  '1-4-1': 'DRY',
  '1-4-2': 'DRY',
  // 剩余规则直接补充到这里即可
}

// 一行代码即可拿到结果
const skinType = skinTypeMap[`${q1}-${q2}-${q3}`]

方案2：分层条件判断（适合有明显公共规则的场景） #

如果你的规则存在层级规律（比如第一个问题的答案决定了80%的肤质结果，只有少量例外），可以用分层判断减少重复代码，比全量if-else简洁很多：

let skinType = ''
// 优先判断大范围公共规则
if (q1 === 1) {
  // q1=1的场景默认是干性，单独处理例外的混合肤质即可
  skinType = 'DRY'
  if (q2 === 2 && q3 === 4) skinType = 'COMBO'
  else if (q2 === 3 && q3 === 3) skinType = 'COMBO'
  // 其他q1=1的例外规则也加在这里
} else if (q1 === 2) {
  // 同理处理q1=2的大范围规则和例外
}
// 后续按q1的取值依次补充即可

小优化提示：原有代码用的==会触发隐式类型转换，建议换成===严格相等判断，避免意料之外的类型转换导致的逻辑错误。

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