技巧分享：減少if-else使用，增加程式碼的可讀性！

相信大家或多或少都接觸過擁有龐大if else 的專案程式碼吧，多重嵌套的if else 在維護的時候真的很惱火，有時候一個bug 排查下來，嚴重感覺身體被掏空。

本文並未有消滅或歧視if else的意思，if else 的好用都知道，這裡只是在某些特定場景為大家額外提供一個思路，增加我們程式碼的可讀性。

短路運算

Javascript 的邏輯或|| 的短路運算有時可以用來取代一些比較簡單的if else

• 邏輯或|| 的短路運算：若左邊能轉成true，回傳左邊式子的值，反之傳回右邊式子的值。

下面用一個簡單的案例來表達

let c
if(a){
    c = a
} else {
    c = b
}

大家看著上面的程式碼會難受嘛（本人有一丟丟的強迫症），明明就是一個很簡單的判斷卻需要寫好幾行程式碼才能實現。這時候我們就可以用短路運算去簡化我們的程式碼啦。

let c = a || b

這樣看起來是不是就簡潔了很多?。

三元運算子

三元運算子我覺得大家應該都很熟悉吧，很多時候簡單的一些判斷我們都可以使用三元運算子去替代if else，這裡只推薦一層 三元運算符，因為多層嵌套的三元運算子也不具備良好的可讀性。

範例：條件為true 時回傳1，反之回傳0：

const fn = (nBoolean) {
    if (nBoolean) {
        return 1
    } else {
        return 0
    }
    
}

// 使用三元运算符
const fn = (nBoolean) {
    return nBoolean ? 1 : 0
}

三元運算子使用的地方也比較多，例如：條件賦值，遞迴...

// num值在nBoolean为true时为10，否则为5
let num = nBoolean ? 10 : 5

// 求0-n之间的整数的和
let sum = 0;
function add(n){
    sum += n
    return n >= 2 ? add(n - 1) : result;
};
let num = add(10);//55

switch case

上述的兩種方式：短路運算跟三元運算雖然很好用，程式碼也很簡潔，不過都只能用於簡單的判斷，遇到多重條件判斷就不能使用了。

對於switch case，雖然它的可讀性確實比else if 更高，但我想大家應該都覺得它寫起來比較麻煩吧（反正我覺得很麻煩）。

例：有A、B、C、D四種種類型，在A、B的時候輸出1，C輸出2、D輸出3，預設輸出0。

let type = 'A'

//if else if
if (type === 'A' || type === 'B') {
    console.log(1);
} else if (type === 'C') {
    console.log(2);
} else if(type === 'D') {
    console.log(3);
} else {
    console.log(0)
}

//switch case
switch (type) {
    case 'A':
    case 'B':
        console.log(1)
        break
    case 'C':
        console.log(2)
        break
    case 'D':
        console.log(3);
        break;
    default:
        console.log(0)
}

物件配置/策略模式

物件配置看起來跟策略模式 差不多，都是根據不同得參數使用不同得資料/演算法/函數。

策略模式就是將一系列演算法封裝起來，並使它們彼此之間可以替換。封裝起來的演算法具有獨立性，外部不可改變其特性。

接下來我們用物件配置的方法來實現上述的例子

let type = 'A'

let tactics = {
    'A': 1,
    'B': 1,
    'C': 2,
    'D': 3,
    default: 0
}
console.log(tactics[type]) // 1

接下來用幾個例子讓大家更熟悉一點。

案例1 商場促銷價

根據不同的用戶使用不同的折扣，如：一般用戶不打折，一般會員用戶9折，年費會員8.5折，超級會員2折。

使用if else實作

// 获取折扣 --- 使用if else
const getDiscount = (userKey) => {
    if (userKey === '普通会员') {
        return 0.9
    } else if (userKey === '年费会员') {
        return 0.85
    } else if (userKey === '超级会员') {
        return 0.8
    } else {
        return 1
    }
}
console.log(getDiscount('普通会员')) // 0.9

使用物件配置/策略模式實作?

// 获取折扣 -- 使用对象配置/策略模式
const getDiscount = (userKey) => {
    // 我们可以根据用户类型来生成我们的折扣对象
    let discounts = {
        '普通会员': 0.9,
        '年费会员': 0.85,
        '超级会员': 0.8,
        'default': 1
    }
    return discounts[userKey] || discounts['default']
}
console.log(getDiscount('普通会员')) // 0.9

從上面的案例中可以明顯看得出來，使用物件配置比使用if else可讀性更高，後續如果需要新增使用者折扣也只需要修改折扣物件就行。

物件配置不一定要使用物件來管理我們鍵值對，還可以使用Map去管理?，如：

// 获取折扣 -- 使用对象配置/策略模式
const getDiscount = (userKey) => {
    // 我们可以根据用户类型来生成我们的折扣对象
    let discounts = new Map([
        ['普通会员', 0.9],
        ['年费会员', 0.85],
        ['超级会员', 0.8],
        ['default', 1]
    ])
    return discounts.get(userKey) || discounts.get('default')
}
console.log(getDiscount('普通会员')) // 0.9

案例2 年終獎項

公司的年終獎項是根據員工的薪資基數和績效等級來發放的。例如，績效為A的人年終獎金有4倍工資，績效為B的有3倍，績效為C的只有2倍。

假如財務部要求我們提供一段程式碼來實現這個核算邏輯，我們要怎麼實現呢？

這不是很簡單嘛，一個函數就搞定了。

const calculateBonus = (performanceLevel, salary) => { 
    if (performanceLevel === 'A'){
        return salary * 4
    }
    if (performanceLevel === 'B'){
        return salary * 3
    }
    if (performanceLevel === 'C'){
        return salary * 2
    }
}
calculateBonus( 'B', 20000 ) // 输出：60000

可以發現，這段程式碼十分簡單，但是calculateBonus函數比較龐大，所有的邏輯分支都包含在if else語句中，如果增加了一種新的績效等級D，或是把A等級的倍數改成5，那我們必須閱讀所有程式碼才能去做修改。

所以我們可以用物件配置/策略模式去簡化這個函數

let strategies = new Map([
    ['A', 4],
    ['B', 3],
    ['C', 2]
])
const calculateBonus = (performanceLevel, salary) => { 
    return strategies.get(performanceLevel) * salary
}
calculateBonus( 'B', 20000 ) // 输出：60000

至此，這個需求做完了，然後產品經理說要加上一個部門區分，假設公司有兩個部門D和F，D部門的表現較好，所以年終獎翻1.2倍，F部門的表現較差，年終獎打9折。

改造以上程式碼，把狀態值拼接，然後存入Map中

// 以绩效_部门的方式拼接键值存入
let strategies = new Map([
    ['A_D', 4 * 1.2],
    ['B_D', 3 * 1.2],
    ['C_D', 2 * 1.2],
    ['A_F', 4 * 0.9],
    ['B_F', 3 * 0.9],
    ['C_F', 2 * 0.9]
])
const calculateBonus = (performanceLevel, salary, department) => { 
    return strategies.get(`${performanceLevel}_${department}`) * salary
}
calculateBonus( 'B', 20000, 'D' ) // 输出：72000

#結尾

本文主要是向大家傳遞一種思想，我們有很多的方法去優化我們的程式碼，提高我們程式碼的可讀性。

對if else並沒有歧視的意思，只是希望在大家以後的程式碼中不只if else。

更多程式相關知識，請造訪：程式設計影片！ ！