js优化判断条件

前言

一般在遇到复杂逻辑判断时，第一时间想到的处理方案是用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);
  }

存在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的键值对个数，而对象的键值对个数只能手动确认。

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 = () => {
  }