解決代碼中大量if/else

在編寫 JS 代碼時，經常會遇到邏輯判斷複雜的情況。一般情況下，可以用 if/else 或 switch 來實現多個條件判斷，但會出現一個問題：隨着邏輯複雜度的增加，代碼中的 if/else 和 switch 會越來越臃腫

  if (status == 1) {
    // 邏輯1
  } else if (status == 2) {
    // 邏輯2
  } else if (status == 3) {
    // 邏輯3
  } else if (status == 4) {
    // 邏輯4
  } else if (status == 5) {
    // 邏輯5
  } else {
    // 邏輯6
  }

很簡單的就想到了用switch重寫一下

switch (status) {
  case 1:
    // 邏輯1
    break
  case 2:
  case 3:
    // 邏輯3、2 兩個相同的可以寫一起
    break
  case 4:
    // 邏輯4
    break
  case 5:
   // 邏輯5
    break
  default:
    // 邏輯6
    break
}

這樣判斷多了的時候看着也揪心，推薦以下Map更好的方法

  const actions = new Map([ // Map鍵可以是任何類型的值
    [1, fn1], // 爲1時執行fn1函數
    [2, fn2],
    [3, fn3],
    [4, fn4],
    [5, fn5],
    ['default', fn6],
  ])

  const onButtonClick = (status) => {
    let action = actions.get(status)
    action()
  }

  function fn1() {
    console.log(66666666)
  }
  // ............

  const sendLog = (status) => {
    console.log(status)
  }

  onButtonClick(1)