提升代码可读性，减少if-else的几个小技巧

Posted 2023-01-11 cybozu开发者

前言

相信大家或多或少都接触过拥有庞大 if else 的项目代码吧，多重嵌套的 if else 在维护的时候真的让人很恼火，有时候一个 bug 排查下来，严重感觉身体被掏空。

本文并未有消灭或歧视 if else的意思，if else 的好用都知道，这里只是在某些特定场景为大家额外提供一种思路，增加我们代码的可读性。

短路运算

Javascript 的逻辑或 || 的短路运算有时候可以用来代替一些比较简单的 if else

• 逻辑或 || 的短路运算：若左边能转成true，返回左边式子的值，反之返回右边式子的值。

下面用一个简单的案例来表述

let c
if(a)
  c = a
 else 
  c = b

　大家看着上面的代码会难受嘛（本人有一丢丢的强迫症），明明就是一个很简单的判断却需要写好几行代码才能实现。这个时候我们就可以用短路运算去简化我们的代码啦。

let c = a || b

　　

这样看起来是不是就简洁了很多。

三元运算符

三元运算符我觉得大家应该都很熟悉吧，很多时候简单的一些判断我们都可以使用三元运算符去替代 if else，这里只推荐 一层 三元运算符，因为多层嵌套的三元运算符也不具备良好的可读性。

例子：条件为 true 时返回1，反之返回0：

const fn = (nBoolean) 
  if (nBoolean) 
      return 1
   else 
      return 0
  
  

// 使用三元运算符
const fn = (nBoolean) 
  return nBoolean ? 1 : 0

　　三元运算符使用的地方也比较多，比如：条件赋值，递归...

 // num值在nBoolean为true时为10，否则为5
 let num = nBoolean ? 10 : 5;
 // 求0-n之间的整数的和
 let sum = 0;
 function add(n) 
   sum += n;
   return n >= 2 ? add(n - 1) : result;
 
 let num = add(10); //55

switch case

上述的两种方式：短路运算跟三元运算虽然很好用，代码也很简洁，不过都只能用于简单的判断，遇到多重条件判断就不能使用了。

对于 switch case，虽然它的可读性确实比 else if 更高，但是我想大家应该都觉得它写起来比较麻烦吧（反正我觉得很麻烦）。

例：有A、B、C、D四种种类型，在A、B的时候输出1，C输出2、D输出3，默认输出0。

 let type = "A";
 //if else if
 if (type === "A" || type === "B") 
   console.log(1);
  else if (type === "C") 
   console.log(2);
  else if (type === "D") 
   console.log(3);
  else 
   console.log(0);
 
 //switch case
 switch (type) 
   case "A":
   case "B":
     console.log(1);
     break;
   case "C":
     console.log(2);
     break;
   case "D":
     console.log(3);
     break;
   default:
     console.log(0);
 

对象配置/策略模式

对象配置看起来跟 策略模式 差不多，都是根据不同得参数使用不同得数据/算法/函数。

策略模式就是将一系列算法封装起来，并使它们相互之间可以替换。被封装起来的算法具有独立性，外部不可改变其特性。

接下来我们用对象配置的方法实现一下上述的例子

 

 let type = "A";
 let tactics = 
   A: 1,
   B: 1,
   C: 2,
   D: 3,
   default: 0,
 ;
 console.log(tactics[type]); // 1

接下来用几个例子让大家更加熟悉一点。

案例 1 商场促销价

案例 2 年终奖

查看案例：减少 if-else 技巧案例