JavaScript复杂逻辑判断的技巧性写法（代码示例）

/**

 * 按钮点击事件

 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消

 */
const onButtonClick = (status) => {

  if (status == 1) {

    sendLog('processing') jumpTo('IndexPage')

  } else if (status == 2) {

    sendLog('fail') jumpTo('FailPage')

  } else if (status == 3) {

    sendLog('fail') jumpTo('FailPage')

  } else if (status == 4) {

    sendLog('success') jumpTo('SuccessPage')

  } else if (status == 5) {

    sendLog('cancel') jumpTo('CancelPage')

  } else {

    sendLog('other') jumpTo('Index')

  }

}

通过代码可以看到这个按钮的点击逻辑：根据不同活动状态做两件事情，发送日志埋点和跳转到对应页面，大家可以很轻易的提出这段代码的改写方案，switch出场：

/**
 * 按钮点击事件
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
const onButtonClick = (status) => {
  switch (status) {

    case 1:

      sendLog('processing')

      jumpTo('IndexPage')

      break

    case 2:

    case 3:

      sendLog('fail')

      jumpTo('FailPage')

      break

    case 4:

      sendLog('success')

      jumpTo('SuccessPage')

      break

    case 5:

      sendLog('cancel')

      jumpTo('CancelPage')

      break

    default:

      sendLog('other')

      jumpTo('Index')

      break

  }

}
嗯，这样看起来比if/else清晰多了，细心的同学也发现了小技巧，case 2和case 3逻辑一样的时候，可以省去执行语句和break，则case 2的情况自动执行case 3的逻辑。
这时有同学会说，还有更简单的写法：
const actions = {

  '1': ['processing', 'IndexPage'],

  '2': ['fail', 'FailPage'],

  '3': ['fail', 'FailPage'],

  '4': ['success', 'SuccessPage'],

  '5': ['cancel', 'CancelPage'],

  'default': ['other', 'Index'],

}

/**

 * 按钮点击事件

 * @param {number} status 活动状态：1开团进行中 2开团失败 3 商品售罄 4 开团成功 5 系统取消

 */

const onButtonClick = (status) => {

  let action = actions[status]   
关键词：JavaScript复杂逻辑判断的技巧性写法（代码示例）