本文出自「掘金社區」
前言
最近部門在對以往的代碼做一些優化，我在代碼中看到一連串的 if(){}elseif(){} 的邏輯判斷。這明顯是有優化空間的。
由於內部代碼不適合分享，這裏我就用 <輸出今天爲星期幾> 來講講邏輯判斷優化的一些方案。
這裏先聲明，免有人疑惑：
我們在項目中使用的很可能會有多層的嵌套，不像我的例子只有一層。不過其優化的思想是大致相同的。由於 returnWeekday() 方法異常之簡單，所以提前聲明。
需求
寫一個
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()}Vue 相關文章輸出計劃
最近總有朋友問我 Vue 相關的問題，因此接下來我會輸出 10 篇 Vue 相關的文章，希望對大家有一定的幫助。
品略圖書館 http://www.pinlue.com/