這樣優化 if-else 更易讀

前言

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

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

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

我們在專案中使用的很可能會有多層的嵌套，不像我的例子只有一層，不過其優化的思想是大致相同的，由于 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())

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

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

上面的代碼確實 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 字符方法

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

// 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()
}

◆ ◆ ◆  ◆ ◆

你的在看我當成喜歡