【前端詞典】從 returnWeekday() 談 if() 語句代碼優化

前言

最近部門在對以往的代碼作一些優化，我在代碼中看到一連串的 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 相關的文章，但願對你們有必定的幫助。我會保持在 7 到 10 天更新一篇。

1. Vuex 注入 Vue 生命週期的過程（完成）

2. 學習 Vue 源碼的必要知識儲備（完成）

3. 淺析 Vue 響應式原理（完成）

4. 新老 VNode 進行 patch 的過程

5. 如何開發功能組件並上傳 npm

6. 從這幾個方面優化你的 Vue 項目

7. 從 Vue-Router 設計講前端路由發展

8. 在項目中如何正確的使用 Webpack

9. Vue 服務端渲染

10. Axios 與 Fetch 該如何選擇

建議你關注個人公衆號，第一時間就能夠接收最新的文章。

若是你想加羣交流，能夠自行掃碼進羣：