JS复杂判断的更优雅写法代码详解

我们编写js代码时经常遇到复杂逻辑判的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂，那么如何更优雅的写判断逻辑，本文带你试一下。

举个例子

先看一段代码

/** * 按钮点击事件 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消 */const onButtonClick1 = (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] || actions['default'],   logName = action[0],   pageName = action[1] sendLog(logName) jumpTo(pageName)}

上面代码确实看起来更清爽了，这种方法的聪明之处在于：将判断条件作为对象的属性名，将处理逻辑作为对象的属性值，在按钮点击的时候，通过对象属性查找的方式来进行逻辑判断，这种写法特别适合一元条件判断的情况。

是不是还有其他写法呢？有的：

const actions = new Map([ [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.get(status) || actions.get('default') sendLog(action[0]) jumpTo(action[1])}