if...else是我們平時寫代碼時經(jīng)常用到的，而且使用起來也沒啥問題。問題是當(dāng)業(yè)務(wù)邏輯比較復(fù)雜時，一堆條件判斷就看的讓人頭大了，而且功能迭代時，還有可能在上面進(jìn)行增量修改，內(nèi)容越來越長，嵌套越來越深，可讀性就變得越來越差。作為一個有追求的銀，不但要求功能能實現(xiàn)，還要盡可能的美觀好看～

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

三元表達(dá)式

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

像這種簡單的if...else可以直接用三元表達(dá)式替換

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

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

函數(shù)封裝

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

上面的這種代碼是很常見的，根據(jù)不同的狀態(tài)執(zhí)行不同的邏輯，但是所有的邏輯處理堆到一個函數(shù)里面就會使這個函數(shù)體變得很大。本著單一性的原則，我們可以把代碼進(jìn)行拆分，每個if里面的邏輯處理封裝成一個函數(shù)，這樣看起來會比較清晰。

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...的格式，從上到下判斷，只會進(jìn)入其中一個分支, 而且條件都是用一個全等就能判斷出來的，可以利用對象鍵值對的形式，狀態(tài)條件作為鍵，值是一個函數(shù)去執(zhí)行業(yè)務(wù)邏輯來進(jìn)行封裝。

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

每個分支的邏輯都被寫成一個獨(dú)立的函數(shù)，之后再有不同的條件判斷，豐富對象鍵值對就行了，清晰明了。

或者用es6的Map

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

Map與Object的區(qū)別是Map可以用任何類型的數(shù)據(jù)作為key。

也可以用switch語句：

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

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

這是條件狀態(tài)很單一的時候，那條件判斷比較復(fù)雜的時候呢？比如 a && b && c 之類的，可以把條件也作為一個函數(shù)存儲起來，當(dāng)函數(shù)返回true時，執(zhí)行對應(yīng)的邏輯處理函數(shù)。

const rules = [
  {
    match: (a, b, c) => {}, // 條件判斷
    action: () => {} // 對應(yīng)的業(yè)務(wù)邏輯
  },
  {
    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，就執(zhí)行對應(yīng)的業(yè)務(wù)邏輯，并結(jié)束循環(huán)
      return rules[i].action(a, b, c)
    }
}

以上只是條件語句比較復(fù)雜數(shù)量比較多時的代碼優(yōu)化方法，if...else該用還得用，用的時候盡量把常用的條件體放到前面，這樣找到正確分支的速度就會快。