一、前奏：
我们一般在遇到复杂逻辑判断时，第一时间想到的处理方案是用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
