如何優(yōu)化 JavaScript 中的復(fù)雜判斷？
我們?cè)趯?xiě) JavaScript 代碼的時(shí)候，經(jīng)常會(huì)遇到邏輯判斷比較復(fù)雜的情況，通常我們可以使用 if/else 或 switch 來(lái)實(shí)現(xiàn)多個(gè)條件判斷。
但是這樣就存在一個(gè)問(wèn)題，隨著邏輯復(fù)雜度的增加，代碼中的 if/else/switch 會(huì)越來(lái)越臃腫，越來(lái)越難理解。那么如何才能把判斷邏輯寫(xiě)得更優(yōu)雅呢？
今天咱們就來(lái)看看這個(gè)問(wèn)題！
一元條件判斷
const onButtonClick = (status)=>{
if(status == 1){
jumpTo('進(jìn)入索引頁(yè)')
}elseif(status == 2){
jumpTo('進(jìn)入失敗頁(yè)')
}elseif(status == 3){
jumpTo('進(jìn)入失敗頁(yè)')
}elseif(status == 4){
jumpTo('進(jìn)入成功頁(yè)')
}elseif(status == 5){
jumpTo('進(jìn)入取消頁(yè)')
}else {
jumpTo('其他操作')
}
}從代碼中我們可以看到這個(gè)按鈕的點(diǎn)擊邏輯：根據(jù)不同的活動(dòng)狀態(tài)，進(jìn)入不同的頁(yè)面。
當(dāng)然，以上代碼也可以通過(guò) switch 進(jìn)行重寫(xiě)：
const onButtonClick = (status)=>{
switch (status){
case1:
console.log('進(jìn)入索引頁(yè)')
break
case2:
case3:
jumpTo('進(jìn)入失敗頁(yè)')
break
case4:
jumpTo('進(jìn)入成功頁(yè)')
break
case5:
jumpTo('進(jìn)入取消頁(yè)')
break
default:
jumpTo('其他操作')
break
}
}這樣看起來(lái)比用 if/else 要清晰多了。同時(shí)：當(dāng) case 2 和 case 3 的邏輯相同時(shí)，可以省略執(zhí)行語(yǔ)句和 break，這樣 case 2 就會(huì)自動(dòng)執(zhí)行 case 3 的邏輯。
但是，以上的代碼還不夠“完美”，我可以對(duì)它進(jìn)行持續(xù)優(yōu)化：
const actions = {
'1': ['進(jìn)入索引頁(yè)'],
'2': ['進(jìn)入失敗頁(yè)'],
'3': ['進(jìn)入失敗頁(yè)'],
'4': ['進(jìn)入成功頁(yè)'],
'5': ['進(jìn)入取消頁(yè)'],
'default': ['其他操作'],
}
const onButtonClick = (status)=>{
let action = actions[status] || actions['default'],
jumpTo(action[0])
}這樣優(yōu)化之后代碼就會(huì)清晰很多，這個(gè)方法的巧妙之處在于：把判定條件作為對(duì)象的屬性名，把處理邏輯作為對(duì)象的屬性值，點(diǎn)擊按鈕時(shí)通過(guò)查找對(duì)象屬性進(jìn)行邏輯判斷，這種寫(xiě)法特別適合 一元條件 判斷。
多元條件判斷
但是，如果判斷條件變得更加復(fù)雜時(shí)，以上的操作就不適用了，例如：
const onButtonClick = ( status,identity )=>{
if (identity == 'guest' ){
if (status == 1 ){
// ...
} elseif (status == 2 ){
// ...
} elseif ( status == 3 ){
// ...
} elseif (status == 4 ){
// ...
} elseif (status == 5 ){
// ...
} else {
// ...
}
} elseif (identity == 'master' ) {
if (status == 1 ){
// ...
} elseif (status == 2 ){
// ...
} elseif (status == 3 ){
// ...
} elseif (status == 4 ){
// ...
} elseif (status == 5 ){
// ...
} else {
// ...
}
}
}那么一旦遇到這種復(fù)雜的情況，最初的代碼就不適用了。所以，我們需要對(duì)最初的邏輯進(jìn)行優(yōu)化可以這么做：
const actions = newMap([
['guest_1', ()=>{/* ... */}],
['guest_2', ()=>{/* ... */}],
['guest_3', ()=>{/* ... */}],
['guest_4', ()=>{/* ... */}],
['guest_5', ()=>{/* ... */}],
['master_1', ()=>{/* ... */}],
['master_2', ()=>{/* ... */}],
['master_3', ()=>{/* ... */}],
['master_4', ()=>{/* ... */}],
['master_5', ()=>{/* ... */}],
['default', ()=>{/* ... */}],
])
const onButtonClick = (identity,status)=>{
let action = actions.get(`${identity}_${status}`) || actions.get('default')
action.call(this)
}上述代碼的核心邏輯是：將兩個(gè)條件拼接成一個(gè)字符串，以拼接后的條件字符串為鍵，以處理函數(shù)為值，通過(guò) Map 對(duì)象進(jìn)行查找并執(zhí)行。這種方式在多條件判斷的時(shí)候特別有用。
