前言
相信大家或多或少都接触过拥有庞大 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 }
三元运算符使用的地方也比较多,比如:条件赋值,递归...
1 // num值在nBoolean为true时为10,否则为5 2 let num = nBoolean ? 10 : 5; 3 // 求0-n之间的整数的和 4 let sum = 0; 5 function add(n) { 6 sum += n; 7 return n >= 2 ? add(n - 1) : result; 8 } 9 let num = add(10); //55
switch case
上述的两种方式:短路运算跟三元运算虽然很好用,代码也很简洁,不过都只能用于简单的判断,遇到多重条件判断就不能使用了。
对于 switch case
,虽然它的可读性确实比 else if
更高,但是我想大家应该都觉得它写起来比较麻烦吧(反正我觉得很麻烦)。
例:有A、B、C、D四种种类型,在A、B的时候输出1,C输出2、D输出3,默认输出0。
1 let type = "A"; 2 //if else if 3 if (type === "A" || type === "B") { 4 console.log(1); 5 } else if (type === "C") { 6 console.log(2); 7 } else if (type === "D") { 8 console.log(3); 9 } else { 10 console.log(0); 11 } 12 //switch case 13 switch (type) { 14 case "A": 15 case "B": 16 console.log(1); 17 break; 18 case "C": 19 console.log(2); 20 break; 21 case "D": 22 console.log(3); 23 break; 24 default: 25 console.log(0); 26 }
对象配置/策略模式
对象配置看起来跟 策略模式
差不多,都是根据不同得参数使用不同得数据/算法/函数。
策略模式就是将一系列算法封装起来,并使它们相互之间可以替换。被封装起来的算法具有独立性,外部不可改变其特性。
接下来我们用对象配置的方法实现一下上述的例子
1 let type = "A"; 2 let tactics = { 3 A: 1, 4 B: 1, 5 C: 2, 6 D: 3, 7 default: 0, 8 }; 9 console.log(tactics[type]); // 1
接下来用几个例子让大家更加熟悉一点。
案例 1 商场促销价
案例 2 年终奖
查看案例:减少 if-else 技巧案例