[[325961]]

前言

最近部門在對以往的代碼做一些優(yōu)化，我在代碼中看到一連串的 if(){}elseif(){} 的邏輯判斷。這明顯是有優(yōu)化空間的。

由于內(nèi)部代碼不適合分享，這里我就用 <輸出今天為星期幾> 來講講邏輯判斷優(yōu)化的一些方案。

這里先聲明，免有人疑惑：

我們在項目中使用的很可能會有多層的嵌套，不像我的例子只有一層。不過其優(yōu)化的思想是大致相同的。由于 returnWeekday() 方法異常之簡單，所以提前聲明。

需求

寫一個 returnWeekday() 方法返回"今天是星期*"。

接下來我們就一步一步來。

優(yōu)化過程

這里我簡單的分為 “初學(xué) —> 入門 —> 中級” 這幾個階段。

初學(xué)

當(dāng)我們開始拿到需求的時候，看到一系列的邏輯判斷，首先想到的應(yīng)該就是 if 語句了。

代碼如下： 

function returnWeekday(){  
      let string = "今天是星期";  
      let date = new Date().getDay();  
      if (date === 0) {  
          string += "日";  
      } else if (date === 1) {  
          string += "一";  
      } else if (date === 2) { 
          string += "二";  
      } else if (date === 3) {  
          string += "三";  
      } else if (date === 4) {  
          string += "四";  
      } else if (date === 5) {  
          string += "五";  
      } else if (date === 6) {  
          string += "六";  
      }  
      return string  
  }  
  console.log(returnWeekday()) 

當(dāng)我們寫完了這樣的代碼，第一感覺就是 elseif 塊是不是太多了。

可是當(dāng)我們還在思考如何優(yōu)化的時候，產(chǎn)品就在釘釘發(fā)消息給你問這個需求完成的怎么樣了？還帶了一個壞笑的表情包。這個時候你告訴自己，這個優(yōu)化后面再說吧?？墒蔷枚弥枨蠹又?。這個再也沒有優(yōu)化過了，直到下一個接手。

上面的代碼確實 elseif 塊太多了，看著就不舒服。

我們在看《JavaScript 高級程序設(shè)計》的時候，看到這樣一句話：

switch 語句與 if 語句的關(guān)系最為密切，而且也是在其他語言中普遍使用的一種流控制語句。

所以我們是不是可以考慮使用 switch 語句來優(yōu)化一下呢？

入門

這里我們使用 switch 語句優(yōu)化一遍代碼。

注意：switch 語句在比較值的時候使用的是全等操作符，不會有類型轉(zhuǎn)換的情況。

代碼如下：   

function returnWeekday(){  
       let string = "今天是星期";  
       let date = new Date().getDay();  
       switch (date) { 
           case 0 :  
               string += "日";  
               break;  
           case 1 : 
               string += "一";  
               break;  
           case 2 :  
               string += "二";  
               break;  
           case 3 :  
               string += "三";  
               break;  
           case 4 :  
               string += "四";  
               break;  
           case 5 :  
               string += "五";  
               break;  
           case 6 :  
               string += "六";  
               break;  
       }  
       return string  
   }  
   console.log(returnWeekday()) 

我們在 case 里面拼接字符，以達到輸出預(yù)期結(jié)果的目的。這里的結(jié)構(gòu)看起來確實比 if 語句清晰了一點。可是還是有點疑惑？

假設(shè)哪一天，相關(guān)組織發(fā)現(xiàn)，星象有變。每周需要變成八天（產(chǎn)品的思維，你無法想象）。我們這個 returnWeekday() 方法就需要多加一層判斷了。

我們的希望是已經(jīng)封裝好的方法，不要頻繁的修改。可是需求的變動是你無法控制的。

所以我們繼續(xù)思考該怎么優(yōu)化。

中級

我們看到這里的 case 是數(shù)字，和數(shù)組的下標(biāo)是一致的。

即：['天','一','二','三','四','五','六'] 的下標(biāo)。

所以我們可以考慮使用數(shù)組來優(yōu)化。

代碼如下：  

function returnWeekday(){  
       let string = "今天是星期";  
       let date = new Date().getDay();  
       // 使用數(shù)組  
       let dateArr = ['天','一','二','三','四','五','六'];  
       return string + dateArr[date]  
   }  
   console.log(returnWeekday()) 

以上代碼是不是比 switch 語句和 if 語句清晰多了。而且就算一周變?yōu)榘颂欤恍枰薷?dateArr 數(shù)組就好了。

倘若我們的每個 case 是不規(guī)律的字符串呢？那我們使用對象，每個 case 為一個 key

代碼如下：

function returnWeekday(){    
     let string = "今天是星期";  
     let date = new Date().getDay();  
     // 使用對象  
     dateObj = {   
         0: '天',  
         1: "一",   
         2: "二",   
         3: "三",   
         4: "四",   
         5: "五",   
         6: "六",   
     };  
     return string + dateObj[date]  
 }  
 console.log(returnWeekday()) 

以上使用數(shù)組或者對象的寫法，提高代碼的可讀性的同時，維護起來也變得簡單了。

使用 charAt 字符方法

字符串有個和使用數(shù)組下標(biāo)類似的方法：   

// charAt 定位方法  
    function returnWeekday(){  
        return "今天是星期" + "日一二三四五六".charAt(new Date().getDay());  
    }  
    console.log(returnWeekday()) 

需求變動

這個時候，有人希望 returnWeekday() 方法不僅返回今天是周幾，還需要區(qū)分工作日和休息日，調(diào)用相關(guān)方法。

如果是使用 switch、 if 或 數(shù)組 維護起來就有點麻煩，需要改寫的地方還挺多的。  

function returnWeekday(){  
       let string = "今天是星期";  
       let date = new Date().getDay();  
       // 使用對象  
       dateObj = {   
           0: ['天','休'],   
           1: ["一",'工'],   
           2: ["二",'工'],   
           3: ["三",'工'],   
           4: ["四",'工'],   
           5: ["五",'工'],   
           6: ["六",'休'],   
       }  
       // 類型，這里也可以對應(yīng)相關(guān)方法  
       dayType = {  
           '休': function(){  
               // some code  
               console.log('為休息日')  
           },  
           '工': function(){  
               // some code  
               console.log('為工作日')  
           }  
       }  
       let returnData = {  
           'string' : string + dateObj[date][0],  
           'method' : dayType[dateObj[date][1]]  
       }  
       return returnData  
   };  
   console.log(returnWeekday().method.call(this)) 

其他常見優(yōu)化手段

這里在給出一些常見的優(yōu)化手段。

三元運算

適合簡單的 if(){}else{} 情況。   

//滾動監(jiān)聽，頭部固定  
    handleScroll: function () {  
        let offsetTop = this.$refs.pride_tab_fixed.getBoundingClientRect().top;  
        if( offsetTop < 0 ){  
            this.titleFixed = true  
        } else {  
            this.titleFixed = false  
        }  
        // 改成三元  
        (offsetTop < 0) ? this.titleFixed = true : this.titleFixed = false;  
        // 我們發(fā)現(xiàn)條件塊里面的賦值情況是布爾值，所以可以更簡單 
        this.titleFixed = offsetTop < 0;  
    } 

這樣在精簡代碼的時候，可讀性也沒有降低。

邏輯與運算符

有些時候我們可以使用邏輯與運算符來簡化代碼   

if( falg ){  
       someMethod()  
   } 

可以改成：

falg && someMethod(); 

使用 includes 處理多重條件   

if( code === '202' || code === '203' || code === '204' ){ 
       someMethod()  
   } 

可以改成 

if( ['202','203','204'].includes(code) ){  
      someMethod()  
  }