关于javascript:提升代码可读性减少ifelse的几个小技巧

前言

置信大家或多或少都接触过领有宏大 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 技巧案例