JavaScript 复杂判断的更优雅写法

原文链接：https://mp.weixin.qq.com/s/6n78aHGPl4bNkka47kQWXQ

前提

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

举个栗子

/**
 *  按钮点击事件
 *  @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;
	}
}

更简单写法：

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],
        pageNameaction[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])
}

这样写用到了es6里的Map对象

Map对象和Object对象有什么区别？

1、一个对象通常都有自己的原型，所以一个对象总有一个“prototype”键。

2、一个对象的键只能是字符串或者Symbos，但一个Map的键可以是任意值。

3、可以通过size属性很容易得到一个Map的键值对个数，而对象的键值对个数只能手动确认