一、前奏:
我们一般在遇到复杂逻辑判断时,第一时间想到的处理方案是用if/else/switch等来实现多个条件判断逻辑处理,但是随着判断条件的增多,代码中的判断条件会越来越来越臃肿,越来越不可读不可维护,下面探讨如何更优雅的写判断逻辑。
1、if/else方式: 如键盘按键
const publicKeyboardShortcuts = (evt: KeyboardEvent) => {
if(evt.keyCode == 1){
onKeyDownActive('one')
}else if(evt.keyCode == 2){
onKeyDownActive('two')
}else if(evt.keyCode == 3){
onKeyDownActive('three')
}else if(evt.keyCode == 4){
onKeyDownActive('four')
}else if(evt.keyCode == 5){
onKeyDownActive('five')
}else {
onKeyDownActive('default')
}
}
const onKeyDownActive = (val: string) => {
console.log(val);
}
2、switch方式:同上改造
const publicKeyboardShortcuts = (evt: KeyboardEvent) => {
switch (evt.keyCode) {
case 1:
onKeyDownActive('one')
break;
case 2:
onKeyDownActive('two')
break;
case 3:
onKeyDownActive('three')
break;
case 4:
onKeyDownActive('four')
break;
case 5:
onKeyDownActive('five')
break;
default:
onKeyDownActive('default')
break;
}
}
const onKeyDownActive = (val: string) => {
console.log(val);
}
3、存到Object对象里:将判断条件作为对象的属性名,将处理逻辑作为对象的属性值进行处理
const publicKeyboardShortcuts = (evt: KeyboardEvent) => {
let status = '2';
const actions = {
'1': ['one'],
'2': ['two'],
'3': ['three'],
'4': ['four'],
'5': ['five'],
'default': ['default'],
}
let action = actions[status] || actions['default'];
onKeyDownActive(action[0])
}
const onKeyDownActive = (val: string) => {
console.log(val);
}
4、存到es6的Map对象里
const publicKeyboardShortcuts = (evt: KeyboardEvent) => {
let status = '2';
const actions = new Map([
['1', ['one']],
['2', ['two']],
['3', ['three']],
['4', ['four']],
['5', ['five']],
['default', ['default']]
])
let action = actions.get(status) || actions.get('default')
onKeyDownActive(action[0]);
}
const onKeyDownActive = (val: string) => {
console.log(val);
}
上面用到了es6里的Map对象。Map对象和Object对象的区别:
- 一个对象通常都有自己的原型,所以一个对象总有一个"prototype"键。
- 一个对象的键只能是字符串或者Symbols,但一个Map的键可以是任意值。
- 你可以通过size属性很容易地得到一个Map的键值对个数,而对象的键值对个数只能手动确认。
直接执行方法也可以:方法会直接执行
let status = '2';
const actions = new Map([
['1', () => onKeyDownActive('one')],
['2', () => onKeyDownActive('two')],
['3', () => onKeyDownActive('three')],
['4', () => onKeyDownActive('four')],
['5', () => onKeyDownActive('five')],
['default', () => onKeyDownActive('default')]
])
let action = [...actions].filter(([key, value]) => (key == status));
action.forEach(([key, value]) => value.call(window));//this //直接执行
5、如果存在两个判断条件如何处理
之前写法:代码太冗余
let divide = 'dev'
let status = 2
if(divide == 'dev'){
if(status == 1){
//doSomething
}else if(status == 2){
//doSomething
}else if(status == 3){
//doSomething
}else if(status == 4){
//doSomething
}else if(status == 5){
//doSomething
}else {
//doSomething
}
}else if(divide == 'master') {
if(status == 1){
//doSomething
}else if(status == 2){
//doSomething
}else if(status == 3){
//doSomething
}else if(status == 4){
//doSomething
}else if(status == 5){
//doSomething
}else {
//doSomething
}
}
优化写法一(常用高级写法):用Map对象,以Object对象作为key:判断条件一个至多个都可以
let divide = 'dev'
let status = 2
const actions = new Map([
[{identity:'dev',status:1},()=>{/*do sth*/}],
[{identity:'dev',status:2},()=>{/*do sth*/}],
[{identity:'dev',status:3},()=>{/*do sth*/}],
//...
])
// 同时满足key.identity == divide && key.status == status
let action = [...actions].filter(([key,value])=>(key.identity == divide && key.status == status))
action.forEach(([key,value])=>value.call(window)) //this
如果status不同,后面处理的function不一样,处理方法一样,写不同的function就可以,如下:
const publicKeyboardShortcuts = (evt: KeyboardEvent) => {
let divide = 'dev';//变量
let status = 2;//变量
const actions = new Map([
[{identity: 'dev', status: 1}, functionA],
[{identity: 'dev', status: 2}, functionB],
[{identity: 'dev', status: 3}, functionC],
[{identity: 'dev', status: 4}, functionD],
//...
])
let action = [...actions].filter(([key, value]) => (key.identity == divide && key.status == status))
action.forEach(([key, value]) => value.call(window)) //this
}
const functionA = () => {
}
const functionB = () => {
}
const functionC = () => {
}
const functionD = () => {
}
优化写法二(不太推荐,但是可以这么写):处理逻辑:把两个条件拼接成字符串,并通过以条件拼接字符串作为键,以处理函数作为值的Map对象进行查找并执行,这种写法在多元条件判断时候尤其好用。
let divide = 'dev'
let status = 2
const actions = new Map([
['dev_1', ()=>{/*do sth*/}],
['dev_2', ()=>{/*do sth*/}],
['dev_3', ()=>{/*do sth*/}],
['dev_4', ()=>{/*do sth*/}],
['dev_5', ()=>{/*do sth*/}],
['master_1', ()=>{/*do sth*/}],
['master_2', ()=>{/*do sth*/}],
['master_3', ()=>{/*do sth*/}],
['master_4', ()=>{/*do sth*/}],
['master_5', ()=>{/*do sth*/}],
['default', ()=>{/*do sth*/}],
])
let action = actions.get(`${divide}_${status}`) || actions.get('default');
action.call(window) //this
上面逻辑使用Object对象来实现
const publicKeyboardShortcuts = (evt: KeyboardEvent) => {
let divide = 'dev'
let status = 2
const actions = [
['dev_1', ()=>{/*do sth*/}],
['dev_2', ()=>{/*do sth*/}],
['dev_3', ()=>{/*do sth*/}],
...
]
let action = actions.get(`${divide}_${status}`) || actions.get('default');
action.call(window) //this
}
6、如果判断条件是 1-3 都执行functionA方法,判断条件是 4-5 都去执行functionB方法,这种情况下就可以使用正则去匹配
我们正常的处理逻辑是:每一个都写一遍方法
const publicKeyboardShortcuts = (evt: KeyboardEvent) => {
let divide = 'dev';//变量
let status = 2;//变量
const actions = new Map([
[{identity: 'dev', status: 1}, functionA],
[{identity: 'dev', status: 2}, functionA],
[{identity: 'dev', status: 3}, functionA],
[{identity: 'dev', status: 4}, functionB],
[{identity: 'dev', status: 5}, functionB],
[{identity: 'dev', status: 6}, functionC],
//...
])
let action = [...actions].filter(([key, value]) => (key.identity == divide && key.status == status))
action.forEach(([key, value]) => value.call(window)) //this
}
const functionA = () => {
}
const functionB = () => {
}
const functionC = () => {
}
优化之后,使用正则处理的方法:用正则类型作为key,利用数组循环的特性,符合正则条件的逻辑都会被执行
const publicKeyboardShortcuts = (evt: KeyboardEvent) => {
let divide = 'dev';//变量
let status = 2;//变量
const actions = new Map([
[/^dev_[1-3]$/,functionA],
[/^dev_[4-5]$/,functionB],
[/^dev_.*$/,functionC],
//...
])
let action = [...actions].filter(([key,value])=>(key.test(`${divide}_${status}`)))
action.forEach(([key,value])=>value.call(window)) //this
}
const functionA = () => {
}
const functionB = () => {
}
const functionC = () => {
}
以上标红的为常用的处理逻辑,根据自己的需求可自行修改,愿你以后的代码里不只是有if/else/switch
交流
1、公众号:公众号「进军全栈攻城狮」 ,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!
2、可添加 微信群 或 关注微信公众号 共同进阶学习:扫码入群