提升代碼可讀性该抒，減少 if-else 的幾個小技巧
樹深遇鹿 [三分鐘學(xué)前端](javascript:void(0);) 2022-12-01 08:30 發(fā)表于安徽
前言??♂?
相信大家或多或少都接觸過擁有龐大 if else 的項目代碼吧萍丐，多重嵌套的 if else 在維護的時候真的讓人很惱火??相叁，有時候一個 bug 排查下來柄冲，嚴重感覺身體被掏空??吻谋。
本文并未有消滅或歧視 if else的意思，if else 的好用都知道现横，這里只是在某些特定場景為大家額外提供一種思路漓拾，增加我們代碼的可讀性??。
短路運算??
Javascript 的邏輯或 || 的短路運算有時候可以用來代替一些比較簡單的 if else
- 邏輯或
||的短路運算：若左邊能轉(zhuǎn)成true戒祠，返回左邊式子的值骇两，反之返回右邊式子的值。
下面用一個簡單的案例來表述
let c
if(a){
c = a
} else {
c = b
}
大家看著上面的代碼會難受嘛（本人有一丟丟的強迫癥??）姜盈，明明就是一個很簡單的判斷卻需要寫好幾行代碼才能實現(xiàn)低千。這個時候我們就可以用短路運算去簡化我們的代碼啦??。
let c = a || b復(fù)制代碼
這樣看起來是不是就簡潔了很多??馏颂。
三元運算符??
三元運算符我覺得大家應(yīng)該都很熟悉吧栋操，很多時候簡單的一些判斷我們都可以使用三元運算符去替代 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之間的整數(shù)的和
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 更高，但是我想大家應(yīng)該都覺得它寫起來比較麻煩吧??（反正我覺得很麻煩??）岖是。
例：有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)
}
對象配置/策略模式??
對象配置看起來跟 策略模式 差不多灯抛，都是根據(jù)不同得參數(shù)使用不同得數(shù)據(jù)/算法/函數(shù)金赦。??
策略模式就是將一系列算法封裝起來，并使它們相互之間可以替換对嚼。被封裝起來的算法具有獨立性夹抗，外部不可改變其特性。
接下來我們用對象配置的方法實現(xiàn)一下上述的例子
let type = 'A'
let tactics = {
'A': 1,
'B': 1,
'C': 2,
'D': 3,
default: 0
}
console.log(tactics[type]) // 1
接下來用幾個例子讓大家更加熟悉一點猪半。
案例1 商場促銷價??
根據(jù)不同的用戶使用不同的折扣兔朦，如：普通用戶不打折，普通會員用戶9折磨确，年費會員8.5折沽甥，超級會員8折。
使用if else實現(xiàn)??
// 獲取折扣 --- 使用if else
const getDiscount = (userKey) => {
if (userKey === '普通會員') {
return 0.9
} else if (userKey === '年費會員') {
return 0.85
} else if (userKey === '超級會員') {
return 0.8
} else {
return 1
}
}
console.log(getDiscount('普通會員')) // 0.9
使用對象配置/策略模式實現(xiàn)??
// 獲取折扣 -- 使用對象配置/策略模式
const getDiscount = (userKey) => {
// 我們可以根據(jù)用戶類型來生成我們的折扣對象
let discounts = {
'普通會員': 0.9,
'年費會員': 0.85,
'超級會員': 0.8,
'default': 1
}
return discounts[userKey] || discounts['default']
}
console.log(getDiscount('普通會員')) // 0.9
從上面的案列中可以明顯看得出來乏奥，使用對象配置比使用if else可讀性更高摆舟，后續(xù)如果需要添加用戶折扣也只需要修改折扣對象就行??。
對象配置不一定非要使用對象去管理我們鍵值對邓了，還可以使用 Map去管理??恨诱，如：
// 獲取折扣 -- 使用對象配置/策略模式
const getDiscount = (userKey) => {
// 我們可以根據(jù)用戶類型來生成我們的折扣對象
let discounts = new Map([
['普通會員', 0.9],
['年費會員', 0.85],
['超級會員', 0.8],
['default', 1]
])
return discounts.get(userKey) || discounts.get('default')
}
console.log(getDiscount('普通會員')) // 0.9
案例2 年終獎??
公司的年終獎根據(jù)員工的工資基數(shù)和績效等級來發(fā)放的。例如骗炉，績效為A的人年終獎有4倍工資照宝，績效為B的有3倍，績效為C的只有2倍句葵。
假如財務(wù)部要求我們提供一段代碼來實現(xiàn)這個核算邏輯厕鹃，我們要怎么實現(xiàn)呢？
這不是很簡單嘛乍丈，一個函數(shù)就搞定了剂碴。
const calculateBonus = (performanceLevel, salary) => {
if (performanceLevel === 'A'){
return salary * 4
}
if (performanceLevel === 'B'){
return salary * 3
}
if (performanceLevel === 'C'){
return salary * 2
}
}
calculateBonus( 'B', 20000 ) // 輸出：60000
可以發(fā)現(xiàn)，這段代碼十分簡單轻专，但是 calculateBonus函數(shù)比較龐大忆矛，所有的邏輯分支都包含在if else語句中，如果增加了一種新的績效等級D请垛，或者把A等級的倍數(shù)改成5催训，那我們必須閱讀所有代碼才能去做修改??♂?。
所以我們可以用對象配置/策略模式去簡化這個函數(shù)??
let strategies = new Map([
['A', 4],
['B', 3],
['C', 2]
])
const calculateBonus = (performanceLevel, salary) => {
return strategies.get(performanceLevel) * salary
}
calculateBonus( 'B', 20000 ) // 輸出：60000
至此叼屠，這個需求做完了瞳腌，然后產(chǎn)品經(jīng)理說要加上一個部門區(qū)分，假設(shè)公司有兩個部門D和F镜雨，D部門的業(yè)績較好，所以年終獎翻1.2倍??，F(xiàn)部門的業(yè)績較差荚坞，年終獎打9折??挑宠。
改造以上代碼，把狀態(tài)值拼接颓影，然后存入Map中
// 以績效_部門的方式拼接鍵值存入
let strategies = new Map([
['A_D', 4 * 1.2],
['B_D', 3 * 1.2],
['C_D', 2 * 1.2],
['A_F', 4 * 0.9],
['B_F', 3 * 0.9],
['C_F', 2 * 0.9]
])
const calculateBonus = (performanceLevel, salary, department) => {
return strategies.get(`${performanceLevel}_${department}`) * salary
}
calculateBonus( 'B', 20000, 'D' ) // 輸出：72000
結(jié)尾??
本文主要是向大家傳遞一種思想各淀，我們有很多的方法去優(yōu)化我們的代碼，提高我們代碼的可讀性诡挂。
對if else并沒有歧視的意思碎浇，只是希望在大家以后的代碼中不僅僅只有if else??。
博客主要記錄一些學(xué)習(xí)的文章璃俗，如有不足奴璃，望大家指出，謝謝城豁。
關(guān)于本文
