【JavaScript】六种if语句优化方法

1. 三元运算符

• 简单替换if-else
  • 优化前：

    function saveCustomer(customer) {
      if (isCustomerValid(customer)) {
        database.save(customer)
      } else {
        alert('customer is invalid')
      }
    }
    

  • 重构后代码：

    function saveCustomer(customer) {
      return isCustomerValid(customer)
        ? database.save(customer)
        : alert('customer is invalid')
    }  
    
    // 结合 ES6
    const saveCustomer = customer =>
       isCustomerValid(customer)?
         database.save(customer) : alert('customer is invalid')  
    

• 简单替换if-else if-else if-...else
  • 优化前

    function customerValidation(customer) {
      if (!customer.email) {
        return error('email is require')
      } else if (!customer.login) {
        return error('login is required')
      } else if (!customer.name) {
        return error('name is required')
      } else {
        return customer
      }
    }
    

  • 重构后代码：

    const customerValidation = customer =>
      !customer.email   ? error('email is required')
      : !customer.login ? error('login is required')
      : !customer.name  ? error('name is required')
                        : customer
    

2. 或用逻辑运算符||与&&

• ||

  • 优化前

    function getEventTarget(evt) {
        if (!evt) {
            evt = window.event;
        }
        if (!evt) {
            return;
        }
        const target;
        if (evt.target) {
            target = evt.target;
        } else {
            target = evt.srcElement;
        }
        return target;
    }
    

  • 重构后代码：

    function getEventTarget(evt) {
      evt = evt || window.event;
      return evt && (evt.target || evt.srcElement);
    }
    

• &&

  • 优化前

    const active = true;
    const loan = {
        uuid:123456,
        ammount:10,
        requestedBy:'rick'
    };
    
    const sendMoney = ()=>{};
    
    if (active&&loan){
        sendMoney();
    }
    

  • 重构后代码：

    const active = true;
    const loan = {
        uuid:123456,
        ammount:10,
        requestedBy:'rick'
    };
    
    const sendMoney = ()=>{};
    
    active && loan && sendMoney();
    

3.函数委托

• 优化前

  function itemDropped(item, location) {
      if (!item) {
          return false;
      } else if (outOfBounds(location) {
          var error = outOfBounds;
          server.notify(item, error);
          items.resetAll();
          return false;
      } else {
          animateCanvas();
          server.notify(item, location);
          return true;
      }
  }
  

• 重构后代码：

  function itemDropped(item, location) {
      const dropOut = function() {
          server.notify(item, outOfBounds);
          items.resetAll();
          return false;
      }
  
      const dropIn = function() {
          server.notify(item, location);
          animateCanvas();
          return true;
      }
       
      return !!item && (outOfBounds(location) ? dropOut() : dropIn());
  }
  

4.非分支策略

此技巧尝试避免使用switch语句，相反是用键/值创建一个映射并使用一个函数访问作为参数传递的键的值。

• 优化前带有switch的代码：

  switch(breed){
      case 'border':
        return 'Border Collies are good boys and girls.';
        break;  
      case 'pitbull':
        return 'Pit Bulls are good boys and girls.';
        break;  
      case 'german':
        return 'German Shepherds are good boys and girls.';
        break;
      default:
        return 'Im default'
  }
  

• 重构后代码：

  const dogSwitch = (breed) =>({
    "border": "Border Collies are good boys and girls.",
    "pitbull": "Pit Bulls are good boys and girls.",
    "german": "German Shepherds are good boys and girls.",  
  })[breed]||'Im the default';
  
  dogSwitch("border xxx")
  

5.作为数据的函数

我们知道在js中函数是第一个类，所以使用它我们可以把代码分割成一个函数对象。

• 优化前

  const calc = {
      run: function(op, n1, n2) {
          const result;
          if (op == "add") {
              result = n1 + n2;
          } else if (op == "sub" ) {
              result = n1 - n2;
          } else if (op == "mult" ) {
              result = n1 * n2;
          } else if (op == "div" ) {
              result = n1 / n2;
          }
          return result;
      }
  }
  
  calc.run("sub", 5, 3); //2
  

• 重构后代码：

  const calc = {
      add : function(a,b) {
          return a + b;
      },
      sub : function(a,b) {
          return a - b;
      },
      mult : function(a,b) {
          return a * b;
      },
      div : function(a,b) {
          return a / b;
      },
      run: function(fn, a, b) {
          return fn && fn(a,b);
      }
  }
  
  calc.run(calc.mult, 7, 4); //28
  

6.多态性

多态性是对象具有多种形式的能力。OOP中多态性最常见的用法是使用父类引用来引用子类对象。

• 优化前：

  const bob = {
    name:'Bob',
    salary:1000,
    job_type:'DEVELOPER'
  };
  
  const mary = {
    name:'Mary',
    salary:1000,
    job_type:'QA'
  };
  
  const calc = (person) =>{
      if (people.job_type==='DEVELOPER')
          return person.salary+9000*0.10;
       
      if (people.job_type==='QA')
          return person.salary+1000*0.60;
  }
  
  console.log('Salary',calc(bob));
  console.log('Salary',calc(mary));
  

• 重构后代码：

  const qaSalary  = (base) => base+9000*0.10;
  const devSalary = (base) => base+1000*0.60;
  
  //Add function to the object.
  const bob = {
    name:'Bob',
    salary:1000,
    job_type:'DEVELOPER',
    calc: devSalary
  };
  
  const mary = {
    name:'Mary',
    salary:1000,
    job_type:'QA',
    calc: qaSalary
  };
  
  console.log('Salary',bob.calc(bob.salary));
  console.log('Salary',mary.calc(mary.salary));