关于JavaScript复杂判断(if else / switch)的更优雅写法,优化冗余
一、通常写法
/**
* if () else {}
* 按钮点击事件
* @param {number} status 活动状态:1 xx, 2 xx, 3 xx, 4 xx, 5 xx
*/
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')
}
....
....
}
/**
* switch () case {}
* 按钮点击事件
* @param {number} status 活动状态:1 xx, 2 xx, 3 xx, 4 xx, 5 xx
*/
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
....
....
}
}
二、利用对象键值对
/**
* key, value
* 按钮点击事件
* @param {number} status 活动状态:1 xx, 2 xx, 3 xx, 4 xx, 5 xx
*/
const actions = {
'1': ['processing','IndexPage'],
'2': ['fail','FailPage'],
'3': ['fail','FailPage'],
'4': ['success','SuccessPage'],
'5': ['cancel','CancelPage'],
'default': ['other','Index'],
}
const onButtonClick = (status)=>{
const action = actions[status] || actions['default']
const logName = action[0]
const pageName = action[1]
sendLog(logName)
jumpTo(pageName)
}
三、利用Es6,new Map([ ])
/**
* key, value
* 按钮点击事件
* @param {number} status 活动状态:1 xx, 2 xx, 3 xx, 4 xx, 5 xx
*/
const actions = new Map([
[1, ['processing','IndexPage']],
[2, ['fail','FailPage']],
[3, ['fail','FailPage']],
[4, ['success','SuccessPage']],
[5, ['cancel','CancelPage']],
['default', ['other','Index']]
])
const onButtonClick = (status)=>{
let action = actions.get(status) || actions.get('default')
sendLog(action[0])
jumpTo(action[1])
}
四、优化new Map([ ])
/**
* key, value
* 按钮点击事件
* @param {number} status 活动状态:1 xx, 2 xx, 3 xx, 4 xx, 5 xx
*/
// ** 写法一:
const actions = {
'guest_1':()=>{/*do sth*/},
'guest_2':()=>{/*do sth*/},
//....
}
const onButtonClick = (identity,status)=>{
let action = actions[`${identity}_${status}`] || actions['default']
action.call(this)
}
// ** 写法二:
const actions = new Map([
[{identity:'guest',status:1},()=>{/*do sth*/}],
[{identity:'guest',status:2},()=>{/*do sth*/}],
//...
])
const onButtonClick = (identity,status)=>{
let action = [...actions].filter(([key,value]) => {
return (key.identity == identity && key.status == status)
}
action.forEach(([key,value])=>value.call(this))
}
// ** 写法三(利用func缓存):
const actions = ()=>{
const functionA = ()=>{/*do sth*/}
const functionB = ()=>{/*do sth*/}
return new Map([
[{identity:'guest',status:1},functionA],
[{identity:'guest',status:2},functionA],
[{identity:'guest',status:3},functionA],
[{identity:'guest',status:4},functionA],
[{identity:'guest',status:5},functionB],
//...
])
}
const onButtonClick = (identity,status)=>{
let action = [...actions].filter(([key,value]) => {
return (key.identity == identity && key.status == status)
}
action.forEach(([key,value])=>value.call(this))
}
// ** 写法四(利用正则替换写法三 A重复引用):
const actions = ()=>{
const functionA = ()=>{/*do sth*/}
const functionB = ()=>{/*do sth*/}
return new Map([
[/^guest_[1-4]$/,functionA],
[/^guest_5$/,functionB],
//...
])
}
const onButtonClick = (identity,status)=>{
let action = [...actions()].filter(([key,value])=>(key.test(`${identity}_${status}`)))
action.forEach(([key,value])=>value.call(this))
}
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
感谢分享,赞一个