单IF多条件判断与含多IF的switch case，哪种执行效率更高？

在开发中我经常碰到这类场景：先判断某个前置条件，再根据结果做后续的条件校验。当前的需求是：根据存储数字进制（二进制、十进制、八进制、十六进制）的字符串fromNS，用正则校验输入值fromValue是否符合对应进制的合法格式，不合法就调用displayError()。现在有两种实现方案，想问问哪种执行效率更高？

两种方案代码示例 #

方案一：单IF语句多条件判断 #

from.addEventListener("input", function () {
   fromValue = from.value;

   // 这种方式效率如何？
   if((fromNS == "Binary"      && !/^[01]*$/.test(fromValue))        ||
      (fromNS == "Decimal"     && !/^[0-9]*$/.test(fromValue))       ||
      (fromNS == "Hexadecimal" && !/^[0-9a-fA-F]*$/.test(fromValue)) ||
      (fromNS == "Octal"       && !/^[0-7]*$/.test(fromValue)))
      displayError();
});

方案二：switch case嵌套IF判断 #

from.addEventListener("input", function () {
   fromValue = from.value;

   // 还是应该用这种方式？
   switch (fromNS) {
      case "Binary":
         if(!/^[01]*$/.test(fromValue)) displayError();
      break;
      case "Decimal":
         if(!/^[0-9]*$/.test(fromValue)) displayError();
      break;
      case "Hexadecimal":
         if(!/^[0-9a-fA-F]*$/.test(fromValue)) displayError();
      break;
      case "Octal":
         if(!/^[0-7]*$/.test(fromValue)) displayError();
      break;
   }
});

效率分析与结论 #

1. switch case方案效率更高
   现代JavaScript引擎对switch语句做了不少优化，比如针对字符串case会生成哈希映射，匹配到对应的case后就会直接执行逻辑并break，不会再检查后续分支。而方案一的多条件IF是通过||连接，属于短路判断，但最坏情况下需要逐个遍历所有4个条件分支，执行次数更多。

2. 额外优化建议
   不管用哪种方案，都应该把正则表达式提前缓存，避免每次input事件触发时都重新创建正则实例，这会浪费性能。更优的方式是用对象映射直接查找对应的正则，代码更简洁且效率更高：

   // 提前缓存正则，放在事件监听外部
   const regexMap = {
     Binary: /^[01]*$/,
     Decimal: /^[0-9]*$/,
     Hexadecimal: /^[0-9a-fA-F]*$/,
     Octal: /^[0-7]*$/
   };
   
   from.addEventListener("input", function () {
     const fromValue = from.value;
     const regex = regexMap[fromNS];
     // 确保fromNS是合法的进制值，再做校验
     if (regex && !regex.test(fromValue)) {
       displayError();
     }
   });
   

   这种对象键值对查找的时间复杂度是O(1)，比switch的匹配效率还要略高，同时代码可读性也更好。

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