最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

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

来源:博客园

前言

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

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


【资料图】

短路运算

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

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

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

let cif(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,否则为52 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 case13 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 技巧案例

关键词: 两种方式 就是一个 可以使用