怎么優(yōu)化if-else代碼結(jié)構(gòu)

本篇內(nèi)容主要講解“怎么優(yōu)化if-else代碼結(jié)構(gòu)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么優(yōu)化if-else代碼結(jié)構(gòu)”吧!

需求

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

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

優(yōu)化過程

這里我簡(jiǎn)單的分為 “初學(xué) —> 入門 —> 中級(jí)” 這幾個(gè)階段。

初學(xué)

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

代碼如下：

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)化的時(shí)候，產(chǎn)品就在釘釘發(fā)消息給你問這個(gè)需求完成的怎么樣了？還帶了一個(gè)壞笑的表情包。這個(gè)時(shí)候你告訴自己，這個(gè)優(yōu)化后面再說吧?？墒蔷枚弥?，需求加之。這個(gè)再也沒有優(yōu)化過了，直到下一個(gè)接手。

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

我們?cè)诳础禞avaScript 高級(jí)程序設(shè)計(jì)》的時(shí)候，看到這樣一句話：

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

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

入門

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

注意：switch 語(yǔ)句在比較值的時(shí)候使用的是全等操作符，不會(huì)有類型轉(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())

我們?cè)?case 里面拼接字符，以達(dá)到輸出預(yù)期結(jié)果的目的。這里的結(jié)構(gòu)看起來確實(shí)比 if 語(yǔ)句清晰了一點(diǎn)?？墒沁€是有點(diǎn)疑惑？

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

我們的希望是已經(jīng)封裝好的方法，不要頻繁的修改?？墒切枨蟮淖儎?dòng)是你無(wú)法控制的。

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

中級(jí)

我們看到這里的 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 語(yǔ)句和 if 語(yǔ)句清晰多了。而且就算一周變?yōu)榘颂?，只需要修?dateArr 數(shù)組就好了。

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

代碼如下：

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

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

使用 charAt 字符方法

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

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

需求變動(dòng)

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

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

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

三元運(yùn)算

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

//滾動(dòng)監(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)條件塊里面的賦值情況是布爾值，所以可以更簡(jiǎn)單         this.titleFixed = offsetTop < 0;      }

這樣在精簡(jiǎn)代碼的時(shí)候，可讀性也沒有降低。

邏輯與運(yùn)算符

有些時(shí)候我們可以使用邏輯與運(yùn)算符來簡(jiǎn)化代碼 

if( falg ){         someMethod()     }

可以改成：

falg && someMethod();

使用 includes 處理多重條件 

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

可以改成

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

到此，相信大家對(duì)“怎么優(yōu)化if-else代碼結(jié)構(gòu)”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！