最近部門在對以往的代碼作一些優化,我在代碼中看到一連串的 if(){}else if(){}
的邏輯判斷。這明顯是有優化空間的。前端
因爲內部代碼不適合分享,這裏我就用 <輸出今天爲星期幾> 來說講邏輯判斷優化的一些方案。ios
這裏先聲明,免有人疑惑:npm
咱們在項目中使用的極可能會有多層的嵌套,不像個人例子只有一層。不過其優化的思想是大體相同的。因爲 returnWeekday()
方法異常之簡單,因此提早聲明。數組
寫一個
returnWeekday()
方法返回"今天是星期*"。bash
接下來咱們就一步一步來。ide
這裏我簡單的分爲 「初學 —> 入門 —> 中級」 這幾個階段。post
當咱們開始拿到需求的時候,看到一系列的邏輯判斷,首先想到的應該就是 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())
複製代碼
當咱們寫完了這樣的代碼,第一感受就是 else if
塊是否是太多了。ui
但是當咱們還在思考如何優化的時候,產品就在釘釘發消息給你問這個需求完成的怎麼樣了?還帶了一個壞笑的表情包。這個時候你告訴本身,這個優化後面再說吧。但是長此以往,需求加之。這個再也沒有優化過了,直到下一個接手。
上面的代碼確實 else if
塊太多了,看着就不舒服。
咱們在看《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 定位方法
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()
}
複製代碼
最近總有朋友問我 Vue 相關的問題,所以接下來我會輸出 10 篇 Vue 相關的文章,但願對你們有必定的幫助。我會保持在 7 到 10 天更新一篇。
建議你關注個人公衆號,第一時間就能夠接收最新的文章。
若是你想加羣交流,能夠自行掃碼入羣: