JS 写逻辑判断，不要只知道用 if-else 和 switch

我们在编写 JS 代码时，经常会遇到逻辑判断复杂的情况。一般情况下，可以用 if/else 或 switch 来实现多个条件判断，但会出现一个问题：随着逻辑复杂度的增加，代码中的 if/else 和 switch 会越来越臃肿。本文将带你尝试写出更优雅的判断逻辑。

比如说下面这样一段代码：

const onButtonClick = (status) => {
  if (status == 1) {
    sendLog('processing')
    jumpTo('IndexPage')
  } elseif (status == 2) {
    sendLog('fail')
    jumpTo('FailPage')
  } elseif (status == 3) {
    sendLog('fail')
    jumpTo('FailPage')
  } elseif (status == 4) {
    sendLog('success')
    jumpTo('SuccessPage')
  } elseif (status == 5) {
    sendLog('cancel')
    jumpTo('CancelPage')
  } else {
    sendLog('other')
    jumpTo('Index')
  }
}

你可以在代码中看到这个按钮的点击逻辑。根据活动状态的不同做两件事，发送日志埋点并跳转到相应的页面。很容易想到这段代码可以用 switch 重写如下：

const onButtonClick = (status) => {
  switch (status) {
    case1:
      sendLog('processing')
      jumpTo('IndexPage')
      break
    case2:
    case3:
      sendLog('fail')
      jumpTo('FailPage')
      break
    case4:
      sendLog('success')
      jumpTo('SuccessPage')
      break
    case5:
      sendLog('cancel')
      jumpTo('CancelPage')
      break
    default:
      sendLog('other')
      jumpTo('Index')
      break
  }
}

好吧，看起来比 if/else 层次结构更清晰一些，细心的读者可能也发现了一个小窍门：case 2 和 case 3 的逻辑一样时，可以把前面的逻辑处理代码省略，case 2 会自动执行与 case 3 的逻辑。

不过，还有一个更简单的写法：

const actions = {
  '1': ['processing', 'IndexPage