开始

用 return 替代 if-else

场景：互斥的条件判断

  1.  function test(data){
  2.      let result = '';
  3.      if(data<10){
  4.          result = 'if'
  5.      }else{
  6.          result = 'else'
  7.      }
  8.      return result 
  9.  }
  11. ==优化成==>
  13.  function test(data){
  14.     let result = '';
  15.     if(data<10){
  16.       return result = 'if'
  17.     }
  18.     return result = 'else'
  19. }

使用 Array 的 includes 方法

场景：多种条件对应相同的处理

  1.  function region(province){
  2.  let result = ""
  3.    if(province === "广东"|| province === "广西"|| province === "福建" || province === "浙江" || province === "云南")  
  4.    {
  5.        result = "南方"
  6.    }
  7.    if(province === "河北"|| province === "黑龙江"|| province === "辽宁" || province === "山东" || province === "吉林")  
  8.    {
  9.        result = "北方"
  10.    }
  11.  }
  13. ==优化成==>
  15.  function region(province){
  16.      let result = ""
  17.      let northProvinceArr = ["河北","黑龙江","辽宁","山东","吉林"]
  18.      let southProvinceArr = ["广东","广西","福建","浙江","云南"]
  19.      if(southProvinceArr.includes(province)) result = "南方";
  20.      if(northProvinceArr.includes(province)) result = "北方"
  21.  }

策略模式

场景：并列的多条件判断

  1.   function permission(role){
  2.     if(role === “operations”){
  3.         getOperationPermission()
  4.     }else if(role === "admin"){
  5.         getAdminPermission()
  6.     }else if(role === "superAdmin"){
  7.         getSuperAdminPermission()
  8.     }else if(role === "user"){
  9.        getUserPermission() 
  10.     }
  11.   }
  12. // 或者下面这样
  13. function permission(role){
  14.       switch(role){
  15.           case "operations": {
  16.               getOperationPermission();
  17.               break;
  18.           }
  19.           case "admin": {
  20.               getAdminPermission();
  21.               break;
  22.           }
  23.           case "superAdmin": {
  24.               getSuperAdminPermission();
  25.               break;
  26.           }
  27.           case "user": {
  28.               getUserPermission();
  29.               break;
  30.           }
  31.       }
  32.   } 
  34. ==优化成==>
  36. function permission(role){
  37.        const actions = {
  38.            operations: getOperationPermission,
  39.            admin: getAdminPermission,
  40.            superAdmin: getSuperAdminPermission,
  41.            user: getUserPermission,
  42.        }
  43.        actions[role].call()
  44.   }


对象数组

场景：多条件嵌套多分支判断

  1. function getAmount(type,quantity,price){
  2.        let result = 0;
  3.        if(type === "shoe"){
  4.            if(quantity>5){
  5.              result = price * quantity * 0.7 
  6.            }else{
  7.              result = price * quantity * 0.8
  8.            }
  9.        }else{
  10.            if(quantity>5){
  11.              result = price * quantity * 0.9 
  12.            }else{
  13.              result = price * quantity * 0.95
  14.            }
  15.        }
  16.    }
  18. ==优化成==>
  20.     function getAmount(type,quantity,price){
  21.        let result = 0;
  22.        const isShoe = type === "shoe";
  23.        const greater = quantity>5;
  24.        const discountArr = [
  25.           {isShoe: true, greater: true, amount: 0.7 * quantity * price }
  26.           {isShoe: true, greater: false, amount: 0.8 * quantity * price }
  27.           {isShoe: false, greater: true, amount: 0.9 * quantity * price }
  28.           {isShoe: false, greater: false, amount: 0.95 * quantity * price }
  29.        ]
  30.        result = discountArr.filter(item=>
  31.        item.isShoe === isShoe && item.greater === greater)[0].amount
  32.    }


三元表达式

在某些情境下，使用三元表达式实现条件判断会是个不错的选择，它可以让代码更加简洁。

  1. if(a>0){
  2.   a+=1;
  3. }else{
  4.   a-=1
  5. }
  7. ==优化成==>
  9. a>0? a+=1 : a-=1;

参考

  1. js中如何优雅的替代 if-else