怎么優化if-else代碼結構

本篇內容主要講解“怎么優化if-else代碼結構”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么優化if-else代碼結構”吧!

需求

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

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

優化過程

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

初學

當我們開始拿到需求的時候，看到一系列的邏輯判斷，首先想到的應該就是 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())

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

可是當我們還在思考如何優化的時候，產品就在釘釘發消息給你問這個需求完成的怎么樣了？還帶了一個壞笑的表情包。這個時候你告訴自己，這個優化后面再說吧。可是久而久之，需求加之。這個再也沒有優化過了，直到下一個接手。

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

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

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

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

入門

這里我們使用 switch 語句優化一遍代碼。

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

代碼如下： 

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 里面拼接字符，以達到輸出預期結果的目的。這里的結構看起來確實比 if 語句清晰了一點。可是還是有點疑惑？

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

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

所以我們繼續思考該怎么優化。

中級

我們看到這里的 case 是數字，和數組的下標是一致的。

即：['天','一','二','三','四','五','六'] 的下標。

所以我們可以考慮使用數組來優化。

代碼如下： 

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

以上代碼是不是比 switch 語句和 if 語句清晰多了。而且就算一周變為八天，只需要修改 dateArr 數組就好了。

倘若我們的每個 case 是不規律的字符串呢？那我們使用對象，每個 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())

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

使用 charAt 字符方法

字符串有個和使用數組下標類似的方法： 

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

需求變動

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

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

function returnWeekday(){         let string = "今天是星期";         let date = new Date().getDay();         // 使用對象         dateObj = {              0: ['天','休'],              1: ["一",'工'],              2: ["二",'工'],              3: ["三",'工'],              4: ["四",'工'],              5: ["五",'工'],              6: ["六",'休'],          }         // 類型，這里也可以對應相關方法         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))

其他常見優化手段

這里在給出一些常見的優化手段。

三元運算

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

//滾動監聽，頭部固定      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;          // 我們發現條件塊里面的賦值情況是布爾值，所以可以更簡單         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()    }

到此，相信大家對“怎么優化if-else代碼結構”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！