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

由於內部程式碼不適合分享，這裡我就用 <輸出今天為星期幾> 來講講邏輯判斷優化的一些方案。

這裡先宣告，免有人疑惑：

我們在專案中使用的很可能會有多層的巢狀，不像我的例子只有一層。不過其優化的思想是大致相同的。由於returnWeekday()方法異常之簡單，所以提前宣告。

需求

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

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

優化過程

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

初學

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

程式碼如下：

functionreturnWeekday(){
letstring="今天是星期";
letdate=newDate().getDay();
if(date===0){
string+="日";
}elseif(date===1){
string+="一";
}elseif(date===2){
string+="二";
}elseif(date===3){
string+="三";
}elseif(date===4){
string+="四";
}elseif(date===5){
string+="五";
}elseif(date===6){
 
string+="六";
}
returnstring
}
console.log(returnWeekday())

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

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

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

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

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

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

入門

這裡我們使用switch語句優化一遍程式碼。

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

程式碼如下：

functionreturnWeekday(){
letstring="今天是星期";
letdate=newDate().getDay();
switch(date){
case0:
string+="日";
break;
case1:
string+="一";
break;
case2:
string+="二";
break;
case3:
string+="三";
break;
case4:
string+="四";
break;
case5:
string+="五";
break;
case6:
string+="六";
break;
}
returnstring
}
console.log(returnWeekday())

我們在case裡面拼接字元，以達到輸出預期結果的目的。這裡的結構看起來確實比if語句清晰了一點。可是還是有點疑惑？

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

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

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

中級

我們看到這裡的case是數字，和陣列的下標是一致的。

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

所以我們可以考慮使用陣列來優化。

程式碼如下：

functionreturnWeekday(){
letstring="今天是星期";
letdate=newDate().getDay();
//使用陣列
letdateArr=[天,一,二,三,四,五,六];
returnstring+dateArr[date]
}
console.log(returnWeekday())

以上程式碼是不是比switch語句和if語句清晰多了。而且就算一週變為八天，只需要修改dateArr陣列就好了。

倘若我們的每個case是不規律的字串呢？那我們使用物件，每個case為一個key

程式碼如下：

functionreturnWeekday(){
letstring="今天是星期";
letdate=newDate().getDay();
//使用物件
dateObj={
0:天,
1:"一",
2:"二",
3:"三",
4:"四",
5:"五",
6:"六",
};
returnstring+dateObj[date]
}
console.log(returnWeekday())

以上使用陣列或者物件的寫法，提高程式碼的可讀性的同時，維護起來也變得簡單了。

使用 charAt 字元方法

字串有個和使用陣列下標類似的方法：

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

需求變動

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

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

functionreturnWeekday(){
letstring="今天是星期";
letdate=newDate().getDay();
//使用物件
dateObj={
0:['天','休'],
1:["一",'工'],
2:["二",'工'],
3:["三",'工'],
4:["四",'工'],
5:["五",'工'],
6:["六",'休'],
}
//型別，這裡也可以對應相關方法
dayType={
'休':function(){
//somecode
console.log('為休息日')
},
'工':function(){
//somecode
console.log('為工作日')
}
}
letreturnData={
string:string+dateObj[date][0],
method:dayType[dateObj[date][1]]
}
returnreturnData
};
console.log(returnWeekday().method.call(this))

其他常見優化手段

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

三元運算

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

//滾動監聽，頭部固定
handleScroll:function(){
letoffsetTop=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()
}