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

·  阅读 3434
js中如何优雅的替代 if-else

前言

今天,朋友跟我讲述了一个问题,说他在开发一个需求时遇到了很多个条件判断的情况,感觉自己写出来的代码很糟糕。其实在我们的开发过程中,总是不可避免的会遇到这样的多 if 条件判断或多重 if-else 嵌套的问题,导致代码写出来变得很糟糕。 我个人也遇到过很多次这样的情况,所以针对这个问题做了一些总结,通过这些技巧能够让我们使用一种更加优雅的方式替代丑陋的 if-else(包括 switch 语句,个人认为 switch 语句过长时也是相当糟糕的)。

优雅的方式

接下来,根据几种经常遇到的场景,逐一用较优雅的方式替代。

return 替代 if-else

场景:互斥的条件判断

修改前:

function test(data) {
  let result = '';
  if (data < 10) {
    result = 'if';
  } else {
    result = 'else';
  }
  return result;
}

像上面的代码我们需要采用 if-else 进行两种互斥的条件判断,其实通过合理的使用 return,可以去掉if-else 判断。

修改后:

function test(data) {
 let result = '';
 if (data < 10) {
   return (result = 'if');
 }
 return (result = 'else');
}

使用 Arrayincludes 方法

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

修改前:

function region(province) {
 let result = '';
 if (
   province === '广东' ||
   province === '广西' ||
   province === '福建' ||
   province === '浙江' ||
   province === '云南'
 ) {
   result = '南方';
 }
 if (
   province === '河北' ||
   province === '黑龙江' ||
   province === '辽宁' ||
   province === '山东' ||
   province === '吉林'
 ) {
   result = '北方';
 }
}
   

在上面的场景中,我们通过在 if 语句中使用 || 对多种条件进行相同的处理,显而易见,这样的代码很糟糕(尤其是 province === "广东"|| province === "广西"|| province === "福建" || province === "浙江" || province === "云南 这一大串) 这种场景我们其实可以通过 Arrayincludes 方法来规避。

修改后:

function region(province) {
 let result = '';
 let northProvinceArr = ['河北', '黑龙江', '辽宁', '山东', '吉林'];
 let southProvinceArr = ['广东', '广西', '福建', '浙江', '云南'];
 if (southProvinceArr.includes(province)) result = '南方';
 if (northProvinceArr.includes(province)) result = '北方';
}

通过这样的处理,我们的最终代码变得好看了许多。

策略模式

场景:并列的多条件判断

修改前:

function permission(role) {
  if (role === 'operations') {
    getOperationPermission();
  } else if (role === 'admin') {
    getAdminPermission();
  } else if (role === 'superAdmin') {
    getSuperAdminPermission();
  } else if (role === 'user') {
    getUserPermission();
  }
}

这段代码中我们就是采用 if-else 的方式判断多个不同的条件,不过这种多条件的判断你可能会采用 switch 语句:

function permission(role) {
  switch (role) {
    case 'operations': {
      getOperationPermission();
      break;
    }
    case 'admin': {
      getAdminPermission();
      break;
    }
    case 'superAdmin': {
      getSuperAdminPermission();
      break;
    }
    case 'user': {
      getUserPermission();
      break;
    }
  }
} 

这种写法虽然使代码清晰了许多,但是个人觉得依旧不合格,接下来我们看看采用策略模式后的结果。

修改后:

function permission(role) {
  const actions = {
    operations: getOperationPermission,
    admin: getAdminPermission,
    superAdmin: getSuperAdminPermission,
    user: getUserPermission,
  };
  actions[role].call();
}
 

比起前面两种写法,显然采用策略模式要更加优雅。

对象数组

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

当我们遇到需要进行多个条件判断,同时每个条件内又需要判断多个子条件时,代码处理起来是最棘手的。一旦处理不好,代码就会变得无比糟糕。

修改前:

function getAmount(type, quantity, price) {
  let result = 0;
  if (type === 'shoe') {
    if (quantity > 5) {
      result = price * quantity * 0.7;
    } else {
      result = price * quantity * 0.8;
    }
  } else {
    if (quantity > 5) {
      result = price * quantity * 0.9;
    } else {
      result = price * quantity * 0.95;
    }
  }
}

当遇到这种情况时,采用对象数组的方式能够得到较好的优化效果。

修改后:

function getAmount(type, quantity, price) {
  let result = 0;
  const isShoe = type === 'shoe';
  const greater = quantity > 5;
  const discountArr = [
    { isShoe: true, greater: true, amount: 0.7 * quantity * price },
    { isShoe: true, greater: false, amount: 0.8 * quantity * price },
    { isShoe: false, greater: true, amount: 0.9 * quantity * price },
    { isShoe: false, greater: false, amount: 0.95 * quantity * price },
  ];
  result = discountArr.filter(
    (item) => item.isShoe === isShoe && item.greater === greater
  )[0].amount;
}

三元表达式

在这里也顺便提一下三元表达式,在某些情境下,使用三元表达式实现条件判断会是个不错的选择,它可以让代码更加简洁(虽然在我看来,它跟 if-else 本质上没太大区别)。

修改前:

    if(a>0){
        a+=1;
    }else{
        a-=1
    }

修改后:

  a>0? a+=1 : a-=1;

不过,太多复杂的条件判断时,使用三元表达式则会适得其反。

结尾

以上所介绍的技巧,主要是为了让你掌握它们的一些思路,具体的应用需要结合实际的业务场景进行分析,然后采取最优的策略写出更加优雅的代码。 最后,希望我的分享能够对你有所帮助!

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改