如何優(yōu)化JavaScript中的復(fù)雜判斷？
作者：程序員Sunday
將兩個條件拼接成一個字符串，以拼接后的條件字符串為鍵，以處理函數(shù)為值，通過 Map 對象進行查找并執(zhí)行。這種方式在多條件判斷的時候特別有用。
Hello，大家好，我是 Sunday。
我們在寫 JavaScript 代碼的時候，經(jīng)常會遇到邏輯判斷比較復(fù)雜的情況，通常我們可以使用 if/else 或 switch 來實現(xiàn)多個條件判斷。
但是這樣就存在一個問題，隨著邏輯復(fù)雜度的增加，代碼中的 if/else/switch 會越來越臃腫，越來越難理解。那么如何才能把判斷邏輯寫得更優(yōu)雅呢？
今天咱們就來看看這個問題！
一元條件判斷
const onButtonClick = (status)=>{
if(status == 1){
jumpTo('進入索引頁')
}elseif(status == 2){
jumpTo('進入失敗頁')
}elseif(status == 3){
jumpTo('進入失敗頁')
}elseif(status == 4){
jumpTo('進入成功頁')
}elseif(status == 5){
jumpTo('進入取消頁')
}else {
jumpTo('其他操作')
}
}從代碼中我們可以看到這個按鈕的點擊邏輯：根據(jù)不同的活動狀態(tài)，進入不同的頁面。
當然，以上代碼也可以通過 switch 進行重寫：
const onButtonClick = (status)=>{
switch (status){
case1:
console.log('進入索引頁')
break
case2:
case3:
jumpTo('進入失敗頁')
break
case4:
jumpTo('進入成功頁')
break
case5:
jumpTo('進入取消頁')
break
default:
jumpTo('其他操作')
break
}
}這樣看起來比用 if/else 要清晰多了。同時：當 case 2 和 case 3 的邏輯相同時，可以省略執(zhí)行語句和 break，這樣 case 2 就會自動執(zhí)行 case 3 的邏輯。
但是，以上的代碼還不夠“完美”，我可以對它進行持續(xù)優(yōu)化：
const actions = {
'1': ['進入索引頁'],
'2': ['進入失敗頁'],
'3': ['進入失敗頁'],
'4': ['進入成功頁'],
'5': ['進入取消頁'],
'default': ['其他操作'],
}
const onButtonClick = (status)=>{
let action = actions[status] || actions['default'],
jumpTo(action[0])
}這樣優(yōu)化之后代碼就會清晰很多，這個方法的巧妙之處在于：把判定條件作為對象的屬性名，把處理邏輯作為對象的屬性值，點擊按鈕時通過查找對象屬性進行邏輯判斷，這種寫法特別適合 一元條件 判斷。
多元條件判斷
但是，如果判斷條件變得更加復(fù)雜時，以上的操作就不適用了，例如：
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ù)雜的情況，最初的代碼就不適用了。所以，我們需要對最初的邏輯進行優(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)
}上述代碼的核心邏輯是：將兩個條件拼接成一個字符串，以拼接后的條件字符串為鍵，以處理函數(shù)為值，通過 Map 對象進行查找并執(zhí)行。這種方式在多條件判斷的時候特別有用。
責任編輯：武曉燕
來源：
程序員Sunday
