if...else是我們平時(shí)寫代碼時(shí)經(jīng)常用到的内列，而且使用起來也沒啥問題寄啼。問題是當(dāng)業(yè)務(wù)邏輯比較復(fù)雜時(shí)纽哥，一堆條件判斷就看的讓人頭大了钠乏，而且功能迭代時(shí)，還有可能在上面進(jìn)行增量修改春塌，內(nèi)容越來越長晓避，嵌套越來越深，可讀性就變得越來越差只壳。作為一個(gè)有追求的銀俏拱，不但要求功能能實(shí)現(xiàn)，還要盡可能的美觀好看～
接下來吼句，我們就從幾個(gè)方面來給代碼換裝
三元表達(dá)式
if (status === 'A') {
handleA();
} else {
handleOther();
}
像這種簡單的if...else可以直接用三元表達(dá)式替換
status === 'A' ? handleA() : handleOther();
跟上面代碼相比锅必，少了好幾行呢是吧，哈哈惕艳。
函數(shù)封裝
function fn () {
if (A) {
// TODO
}
if (B) {
// TODO
}
if (C) {
// TODO
}
}
上面的這種代碼是很常見的搞隐，根據(jù)不同的狀態(tài)執(zhí)行不同的邏輯驹愚，但是所有的邏輯處理堆到一個(gè)函數(shù)里面就會(huì)使這個(gè)函數(shù)體變得很大。本著單一性的原則劣纲，我們可以把代碼進(jìn)行拆分逢捺，每個(gè)if里面的邏輯處理封裝成一個(gè)函數(shù)，這樣看起來會(huì)比較清晰味廊。
function handleA () {
// TODO
}
function handleB () {
// TODO
}
function handleC () {
// TODO
}
function fn () {
if (A) {
handleA();
}
if (B) {
handleB();
}
if (C) {
handleC();
}
}
對(duì)象封裝
if (status === 'A') {
// TODO
} else if (status === 'B') {
// TODO
} else if (status === 'C') {
// TODO
}
像這種if..else if...的格式蒸甜，從上到下判斷，只會(huì)進(jìn)入其中一個(gè)分支, 而且條件都是用一個(gè)全等就能判斷出來的余佛，可以利用對(duì)象鍵值對(duì)的形式，狀態(tài)條件作為鍵窍荧，值是一個(gè)函數(shù)去執(zhí)行業(yè)務(wù)邏輯來進(jìn)行封裝辉巡。
const map = {
A: () => {},
B: () => {},
C: () => {}
}
map[status]();
每個(gè)分支的邏輯都被寫成一個(gè)獨(dú)立的函數(shù)，之后再有不同的條件判斷蕊退，豐富對(duì)象鍵值對(duì)就行了郊楣，清晰明了。
或者用es6的Map
const map = new Map([
['A', () => {}],
['B', () => {}],
['C', () => {}]
])
const action = map.get(status);
action();
Map與Object的區(qū)別是Map可以用任何類型的數(shù)據(jù)作為key瓤荔。
也可以用switch語句：
switch (status) {
case 'A':
// TODO
break;
case 'B':
// TODO
break;
default:
// TODO
}
不用寫那么多'==='了净蚤，不過switch判斷的是'==='而不是'=='.
這是條件狀態(tài)很單一的時(shí)候，那條件判斷比較復(fù)雜的時(shí)候呢输硝？比如 a && b && c 之類的今瀑，可以把條件也作為一個(gè)函數(shù)存儲(chǔ)起來，當(dāng)函數(shù)返回true時(shí)点把，執(zhí)行對(duì)應(yīng)的邏輯處理函數(shù)橘荠。
const rules = [
{
match: (a, b, c) => {}, // 條件判斷
action: () => {} // 對(duì)應(yīng)的業(yè)務(wù)邏輯
},
{
match: (a, b, c) => {},
action: () => {}
},
{
match: (a, b, c) => {},
action: () => {}
}
]
for (let i = 0; i < rules.length; i++) {
if (rules[i].match(a, b, c)) { // 只要條件判斷返回true，就執(zhí)行對(duì)應(yīng)的業(yè)務(wù)邏輯郎逃，并結(jié)束循環(huán)
return rules[i].action(a, b, c)
}
}
以上只是條件語句比較復(fù)雜數(shù)量比較多時(shí)的代碼優(yōu)化方法哥童，if...else該用還得用，用的時(shí)候盡量把常用的條件體放到前面褒翰，這樣找到正確分支的速度就會(huì)快贮懈。
