es6中使用map简化复杂条件判断操作实例详解
本文实例讲述了es6中使用map简化复杂条件判断操作。分享给大家供大家参考，具体如下：
复杂逻辑判断时需要写很多if/else，代码可读性较差，可以用es6新增的Map来简化代码
列举六种实例，逐步简化
/**
*按钮点击事件
*@param{number}status活动状态：1开团进行中2开团失败3商品售罄4开团成功5系统取消
*/
constonButtonClick=(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简化：
/**
*按钮点击事件
*@param{number}status活动状态：1开团进行中2开团失败3商品售罄4开团成功5系统取消
*/
constonButtonClick=(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
}
}
将判断条件作为对象的属性名，将处理逻辑作为对象的属性值，继续简化：
constactions={
'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系统取消
*/
constonButtonClick=(status)=>{
letaction=actions[status]||actions['default'],
logName=action[0],
pageName=action[1]
sendLog(logName)
jumpTo(pageName)
}
转化成Map简化
constactions=newMap([
[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系统取消
*/
constonButtonClick=(status)=>{
letaction=actions.get(status)||actions.get('default')
sendLog(action[0])
jumpTo(action[1])
}
Map对象和Object对象的区别：Map的键可以是任意值，Map的键值对个数可通过size属性直接获
接下来将问题升级：
除去判断状态还要判断用户身份：
传统写法：
constactions=newMap([
['guest_1',()=>{/*dosth*/}],
['guest_2',()=>{/*dosth*/}],
['guest_3',()=>{/*dosth*/}],
['guest_4',()=>{/*dosth*/}],
['guest_5',()=>{/*dosth*/}],
['master_1',()=>{/*dosth*/}],
['master_2',()=>{/*dosth*/}],
['master_3',()=>{/*dosth*/}],
['master_4',()=>{/*dosth*/}],
['master_5',()=>{/*dosth*/}],
['default',()=>{/*dosth*/}],
])
/**
*按钮点击事件
*@param{string}identity身份标识：guest客态master主态
*@param{number}status活动状态：1开团进行中2开团失败3开团成功4商品售罄5有库存未开团
*/
constonButtonClick=(identity,status)=>{
letaction=actions.get(`${identity}_${status}`)||actions.get('default')
action.call(this)
}
用对象做键值简化：
constactions=newMap([
[{
identity:'guest',
status:1
},()=>{/*dosth*/}],
[{
identity:'guest',
status:2
},()=>{/*dosth*/}],
//...
])
constonButtonClick=(identity,status)=>{
//下面代码使用了数组解构[key,value]=cuurrentValue
letaction=[...actions].filter(([key,value])=>(key.identity==identity&&key.status==status))
action.forEach(([key,value])=>value.call(this))
}
正则作为key
constactions=()=>{
constfunctionA=()=>{/*dosth*/}
constfunctionB=()=>{/*dosth*/}
returnnewMap([
[/^guest_[1-4]$/,functionA],
[/^guest_5$/,functionB],
//...
])
}
constonButtonClick=(identity,status)=>{
letaction=[...actions()].filter(([key,value])=>(key.test(`${identity}_${status}`)))
action.forEach(([key,value])=>value.call(this))
}
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。