如何優化if..else程式碼

摘要： if...else是我們平時寫程式碼時經常用到的，而且使用起來也沒啥問題。問題是當業務邏輯比較複雜時，一堆條件判斷就看的讓人頭大了，而且功能迭代時，還有可能在上面進行增量修改，內容越來越長，巢狀越來越深，可讀性就變得越來越差。作為一個有追求的銀，不但要求功能能實現，還要儘可能的美觀好看～ ...

if...else是我們平時寫程式碼時經常用到的，而且使用起來也沒啥問題。問題是當業務邏輯比較複雜時，一堆條件判斷就看的讓人頭大了，而且功能迭代時，還有可能在上面進行增量修改，內容越來越長，巢狀越來越深，可讀性就變得越來越差。作為一個有追求的銀，不但要求功能能實現，還要儘可能的美觀好看～

接下來，我們就從幾個方面來給程式碼換裝

三元表示式

if (status === 'A') {
handleA();
} else {
handleOther();
}

像這種簡單的if...else可以直接用三元表示式替換

status === 'A' ? handleA() : handleOther();

跟上面程式碼相比，少了好幾行呢是吧，哈哈。

函式封裝

function fn () {
if (A) {
// TODO
}
if (B) {
// TODO
}
if (C) {
// TODO
}
}

上面的這種程式碼是很常見的，根據不同的狀態執行不同的邏輯，但是所有的邏輯處理堆到一個函式裡面就會使這個函式體變得很大。本著單一性的原則，我們可以把程式碼進行拆分，每個if裡面的邏輯處理封裝成一個函式，這樣看起來會比較清晰。

function handleA () {
// TODO
}
function handleB () {
// TODO
}
function handleC () {
// TODO
}
function fn () {
if (A) {
handleA();
}
if (B) {
handleB();
}
if (C) {
handleC();
}
}

物件封裝

if (status === 'A') {
// TODO
} else if (status === 'B') {
// TODO
} else if (status === 'C') {
// TODO
}

像這種if..else if...的格式，從上到下判斷，只會進入其中一個分支, 而且條件都是用一個全等就能判斷出來的，可以利用物件鍵值對的形式，狀態條件作為鍵，值是一個函式去執行業務邏輯來進行封裝。

const map = {
A: () => {},
B: () => {},
C: () => {}
}
map[status]();

每個分支的邏輯都被寫成一個獨立的函式，之後再有不同的條件判斷，豐富物件鍵值對就行了，清晰明瞭。

或者用es6的Map

const map = new Map([
['A', () => {}],
['B', () => {}],
['C', () => {}]
])
const action = map.get(status);
action();

Map與Object的區別是Map可以用任何型別的資料作為key。

也可以用switch語句：

switch (status) {
case 'A':
// TODO
break;
 case 'B':
// TODO
break;
 default:
// TODO
}

不用寫那麼多'==='了，不過switch判斷的是'==='而不是'=='.

這是條件狀態很單一的時候，那條件判斷比較複雜的時候呢？比如 a && b && c 之類的，可以把條件也作為一個函式儲存起來，當函式返回true時，執行對應的邏輯處理函式。

const rules = [
{
match: (a, b, c) => {}, // 條件判斷
action: () => {} // 對應的業務邏輯
},
{
match: (a, b, c) => {},
action: () => {}
},
{
match: (a, b, c) => {},
action: () => {}
}
]
for (let i = 0; i < rules.length; i++) {
if (rules[i].match(a, b, c)) { // 只要條件判斷返回true，就執行對應的業務邏輯，並結束迴圈
return rules[i].action(a, b, c)
}
}

以上只是條件語句比較複雜數量比較多時的程式碼優化方法，if...else該用還得用，用的時候儘量把常用的條件體放到前面，這樣找到正確分支的速度就會快。