🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

🖥️ Nodejs专栏：Node.js从入门到精通

🖥️ TS知识总结：十万字TS知识点总结

👉 你的一键三连是我更新的最大动力❤️！

📢 欢迎私信博主加入前端交流群🌹

🔽 前言

最近在网上冲浪时看到了这样一段代码：

function getUserDescribe(name) { if (name === "小刘") { console.log("刘哥哥"); } else if (name === "小红") { console.log("小红妹妹"); } else if (name === "陈龙") { console.log("大师"); } else if (name === "李龙") { console.log("师傅"); } else if (name === "大鹏") { console.log("恶人"); } else { console.log("此人比较神秘！"); } }

咋一看没感觉有什么异常  
    
    
，但如果有1000个判断条件

     


     


   ，按照这种写法难不成要写1000个 if 分支？

如果写了大量的 if 分支 




 




 

，并且可能还具有分支套分支  

   

   

，可以想象到整个代码的可读性和可维护都会大大降低

     

     

  ，这在实际开发中  




  




  
，确实是一个比较头疼的问题  


  


  


，那有没有什么办法能够即实现需求又能避免这些问题呢？

1️⃣ 简单分支优化

这就涉及到分支优化
     
     
 ，让我们转换思维
   




   




   ，去优化一下上面的代码结构：

function getUserDescribe(name) { const describeForNameMap = { 小刘: () => console.log("刘哥哥"), 小红: () => console.log("小红妹妹"), 陈龙: () => console.log("大师"), 李龙: () => console.log("师傅"), 大鹏: () => console.log("恶人"), }; describeForNameMap[name] ? describeForNameMap[name]() : console.log("此人比较神秘！"); }

问题代码中的判断都是简单的相等判断 



 



 



，那么我们就可以将这些判断条件作为一个属性写到对象describeForNameMap 中去           ，这些属性对应的值就是条件成立后的处理函数    
    
   。

之后我们就只需通过getUserDescribe函数接收到的参数去获取describeForNameMap对象中对应的值

    




    




    ，如果该值存在就运行该值（因为值是一个函数）   


     


     

。

这样一来原本的 if 分支判断就转换成了简单的key value对应值













，条件与处理函数一一对应            ，一目了然



 




 




。

2️⃣ 复杂分支优化

那如果我们的 if 分支中的判断条件不只是简单的相等判断

     



     



    ，还具有一些需要计算的表达式时












，我们该怎么办呢？（如下所示）

function getUserDescribe(name) { if (name.length > 3) { console.log("名字太长"); } else if (name.length < 2) { console.log("名字太短"); } else if (name[0] === "陈") { console.log("小陈"); } else if (name[0] === "李" && name !== "李鹏") { console.log("小李"); } else if (name === "李鹏") { console.log("管理员"); } else { console.log("此人比较神秘！"); } }

对于这种结构的代码就不能引入对象来进行分支优化了  
    
    
，我们可以引入二维数组来进行分支优化：

function getUserDescribe(name) { const describeForNameMap = [ [ (name) => name.length > 3, // 判断条件 () => console.log("名字太长") // 执行函数 ], [ (name) => name.length < 2, () => console.log("名字太短") ], [ (name) => name[0] === "陈", () => console.log("小陈") ], [ (name) => name === "大鹏", () => console.log("管理员") ], [ (name) => name[0] === "李" && name !== "李鹏", () => console.log("小李"), ], ]; // 获取符合条件的子数组 const getDescribe = describeForNameMap.find((item) => item[0](name)); // 子数组存在则运行子数组中的第二个元素（执行函数） getDescribe ? getDescribe[1]() : console.log("此人比较神秘！"); }

上面我们定义了一个describeForNameMap数组

     


     


   ，数组内的每一个元素代表一个判断条件与其执行函数的集合（也是一个数组） 




 




 

，之后我们通过数组的find方法查找describeForNameMap数组中符合判断条件的子数组即可   

   

  。

3️⃣ 抽离分支

上面例子中我们定义的这个describeForNameMap对象是一个独立的结构  

   

   

，我们完全可以将它抽离出去：

const describeForNameMap = { 小刘: () => console.log("刘哥哥"), 小红: () => console.log("小红妹妹"), 陈龙: () => console.log("大师"), 李龙: () => console.log("师傅"), 大鹏: () => console.log("恶人"), }; function getUserDescribe(name) { describeForNameMap[name] ? describeForNameMap[name]() : console.log("此人比较神秘！"); } const describeForNameMap = [ [ (name) => name.length > 3, // 判断条件 () => console.log("名字太长") // 执行函数 ], [ (name) => name.length < 2, () => console.log("名字太短") ], [ (name) => name[0] === "陈", () => console.log("小陈") ], [ (name) => name === "大鹏", () => console.log("管理员") ], [ (name) => name[0] === "李" && name !== "李鹏", () => console.log("小李"), ], ]; function getUserDescribe(name) { // 获取符合条件的子数组 const getDescribe = describeForNameMap.find((item) => item[0](name)); // 子数组存在则运行子数组中的第二个元素（执行函数） getDescribe ? getDescribe[1]() : console.log("此人比较神秘！"); }

通过模块化的开发也可以将这个map对象写进一个单独的js文件

     

     

  ，之后在需要使用的地方导入即可    

     

     
。

4️⃣ 争议

这样一来整个getUserDescribe函数就变得非常简洁  




  




  
，有的同学可能会问这有什么用呢？这不是更加麻烦了吗？如果真的嫌if else不好看  


  


  


，那我就使用if return不用else就好了：

function getUserDescribe(name) { if (name === "小刘") { console.log("刘哥哥"); return; } if (name === "小红") { console.log("小红妹妹"); return; } if (name === "陈龙") { console.log("大师"); return; } if (name === "李龙") { console.log("师傅"); return; } if (name === "大鹏") { console.log("恶人"); return; } console.log("此人比较神秘！"); }

试想一下
     
     
 ，如果你getUserDescribe函数中有1000个判断分支
   




   




   ，并且还具有大量的根据判断结果来执行的处理代码 



 



 



，并且getUserDescribe函数会返回这个处理后的判断结果的值




  




  




。

这时getUserDescribe函数的重点在于对判断结果的处理           ，而不在于这个结果是通过什么分支获取的

    




    




    ，例如：

function getUserDescribe(name) { let str; // 存储判断结果 if (name.length > 3) { str = "名字太长"; } else if (name.length < 2) { str = "名字太短"; } else if (name[0] === "陈") { str = "小陈"; } else if (name[0] === "李" && name !== "李鹏") { str = "小李"; } else if (name === "李鹏") { str = "管理员"; } else { str = "此人比较神秘！"; } // 对判断结果str的一些处理 // ...... console.log(str); return str; }

如果你不进行分支优化













，getUserDescribe函数就会被大量的 if 分支抢占空间            ，使得getUserDescribe函数的重点迷失（getUserDescribe函数重点在于对判断结果的处理

     



     



    ，而不在于这个结果是通过什么分支获取的）












，这时你再看一下我们优化后的代码：

const describeForNameMap = [ [(name) => name.length > 3, () => "名字太长"], [(name) => name.length < 2, () => "名字太短"], [(name) => name[0] === "陈", () => "小陈"], [(name) => name === "大鹏", () => "管理员"], [(name) => name[0] === "李" && name !== "李鹏", () => "小李"], ]; function getUserDescribe(name) { let str; // 存储判断结果 const getDescribe = describeForNameMap.find((item) => item[0](name)); if (getDescribe) { str = getDescribe[1](); } else { str = "此人比较神秘！"; } // 对判断结果str的一些处理 // ...... console.log(str); return str; }

查看优化后的getUserDescribe函数我们能够知道  
    
    
，它从describeForNameMap获取了一个值赋值给了str（describeForNameMap是如何返回值的我们并不关心）

     


     


   ，之后对str作了一些处理  


  


 。这就突出了getUserDescribe函数的重点（对判断结果str进行处理）     
     
     。

在这个例子中describeForNameMap子数组的第二个元素完全可以直接使用一个值：[(name) => name.length > 3, "名字太长"] 




 




 

，但为了整体代码的可扩展性  

   

   

，推荐还是使用函数

     

     

  ，因为函数可以接收参数  




  




  
，方便应对之后更复杂的场景




   




   




。

🔼 结语

分支优化在各种语言中都有不同的实现方式和应用场景  


  


  


，本篇通过JavaScript介绍了两种代码分支优化的思想
     
     
 ，代码的实现非常简单
   




   




   ，重点在于这种思想的应用
 



 



。

其实关于分支优化这个问题一直存在争议 



 



 



，目前存在两种观点：

观点1：压根不需要多此一举去优化它           ，并且优化后的代码因为多创建了一个对象/数组

    




    




    ，对对象/数组进行检索反而比单纯的if else还是废性能               。 观点2：分支优化后的代码可读性/可维护性更好













，并且引入对象/数组所带来的性能问题在当今时代根本不值一提 




    




    



。