如何優化JavaScript中的復雜判斷？
我們在寫JavaScript代碼的時候，經常會遇到邏輯判斷比較復雜的情況，通常我們可以使用if/else或者switch來實現多個條件判斷。
但是有一個問題，隨著邏輯復雜度的增加，代碼中的if/else/switch會越來越臃腫，難以理解。那么如何才能寫出更優雅的判斷邏輯呢？
示例：
/**
* Button click event
* @param {number} status：1 2 3 4 5
*/
const onButtonClick = (status)=>{
if(status == 1){
jumpTo('IndexPage')
}else if(status == 2){
jumpTo('FailPage')
}else if(status == 3){
jumpTo('FailPage')
}else if(status == 4){
jumpTo('SuccessPage')
}else if(status == 5){
jumpTo('CancelPage')
}else {
jumpTo('Index')
}
}從代碼中我們可以看到這個按鈕的點擊邏輯：根據不同的活動狀態，做兩件事，發送日志事件，跳轉到對應頁面。大家很容易就提出使用 switch 進行代碼重寫方案：
const onButtonClick = (status)=>{
switch (status){
case 1:
console.log('IndexPage')
break
case 2:
case 3:
jumpTo('FailPage')
break
case 4:
jumpTo('SuccessPage')
break
case 5:
jumpTo('CancelPage')
break
default:
jumpTo('Index')
break
}
}這樣看起來比用 if/else 清晰多了，你還發現了一個小技巧：當 case 2 和 case 3 的邏輯相同時，可以省略執行語句和 break，這樣 case 2 的邏輯就會自動執行 case 3 的邏輯。
持續優化：
const actions = {
'1': ['IndexPage'],
'2': ['FailPage'],
'3': ['FailPage'],
'4': ['SuccessPage'],
'5': ['CancelPage'],
'default': ['Index'],
}
const onButtonClick = (status)=>{
let action = actions[status] || actions['default'],
jumpTo(action[0])
}現在代碼確實看起來干凈多了，這個方法的巧妙之處在于：把判定條件作為對象的屬性名，把處理邏輯作為對象的屬性值，點擊按鈕時通過查找對象屬性進行邏輯判斷，這種寫法特別適合一元條件判斷。
還有其他寫法嗎？用map：
const actions = new Map([
[1, ['IndexPage']],
[2, ['FailPage']],
[3, ['FailPage']],
[4, ['SuccessPage']],
[5, ['CancelPage']],
['default', ['Index']]
])
const onButtonClick = (status)=>{
let action = actions.get(status) || actions.get('default')
jumpTo(action[0])
}這樣寫的話，就用到了ES6中的Map對象，是不是感覺順暢多了？Map對象和Object有什么區別？
- 對象通常有自己的原型，所以對象總有一個原型鍵。
- 對象的鍵只能是字符串或者Symbol，而Map的鍵可以是任意值。
Map中鍵值對的數量可以通過size屬性輕松獲取，而對象中鍵值對的數量只能手動確認。
復雜一點的話，再加一層判斷如何？
const onButtonClick = (status,identity)=>{
if(identity == 'guest'){
if(status == 1){
//do sth
}else if(status == 2){
//do sth
}else if(status == 3){
//do sth
}else if(status == 4){
//do sth
}else if(status == 5){
//do sth
}else {
//do sth
}
}else if(identity == 'master') {
if(status == 1){
//do sth
}else if(status == 2){
//do sth
}else if(status == 3){
//do sth
}else if(status == 4){
//do sth
}else if(status == 5){
//do sth
}else {
//do sth
}
}
}從上面的例子我們可以看出，當你的邏輯升級為二元判斷的時候，判斷量和代碼量都會翻倍，這時候怎么才能寫得更干凈呢？
const actions = new Map([
['guest_1', ()=>{/*do sth*/}],
['guest_2', ()=>{/*do sth*/}],
['guest_3', ()=>{/*do sth*/}],
['guest_4', ()=>{/*do sth*/}],
['guest_5', ()=>{/*do sth*/}],
['master_1', ()=>{/*do sth*/}],
['master_2', ()=>{/*do sth*/}],
['master_3', ()=>{/*do sth*/}],
['master_4', ()=>{/*do sth*/}],
['master_5', ()=>{/*do sth*/}],
['default', ()=>{/*do sth*/}],
])
const onButtonClick = (identity,status)=>{
let action = actions.get(`${identity}_${status}`) || actions.get('default')
action.call(this)
}上述代碼的核心邏輯是：將兩個條件拼接成一個字符串，以拼接后的條件字符串為鍵，以處理函數為值，通過 Map 對象查找并執行。這種方法在做多條件判斷的時候特別有用。
當然，使用 Object 實現上述代碼也是類似的：
const actions = {
'guest_1':()=>{/*do sth*/},
'guest_2':()=>{/*do sth*/},
//....
}
const onButtonClick = (identity,status)=>{
let action = actions[`${identity}_${status}`] || actions['default']
action.call(this)
}如果把查詢條件拼接成字符串感覺有點別扭的話，還有另外一個解決辦法，就是使用一個以 Object 對象為鍵的 Map 對象：
const actions = new Map([
[{identity:'guest',status:1},()=>{/*do sth*/}],
[{identity:'guest',status:2},()=>{/*do sth*/}],
//...
])
const onButtonClick = (identity,status)=>{
let action = [...actions].filter(([key,value])=>(key.identity == identity && key.status == status))
action.forEach(([key,value])=>value.call(this))
}這里我們也可以看出Map和Object的區別，Map可以使用任意類型的數據作為key。
我們再增加一點難度，假設一個客人的情況，狀態1-4的處理邏輯都一樣，我們該如何處理呢？最壞的情況是這樣的：
const actions = ()=>{
const functionA = ()=>{/*do sth*/}
const functionB = ()=>{/*do sth*/}
return new Map([
[{identity:'guest',status:1},functionA],
[{identity:'guest',status:2},functionA],
[{identity:'guest',status:3},functionA],
[{identity:'guest',status:4},functionA],
[{identity:'guest',status:5},functionB],
//...
])
}
const onButtonClick = (identity,status)=>{
let action = [...actions()].filter(([key,value])=>(key.identity == identity && key.status == status))
action.forEach(([key,value])=>value.call(this))
}這樣寫已經可以滿足日常需求了。
不過說真的，重寫 functionA 四次還是有點麻煩的。如果情況變得特別復雜，比如，身份有三種狀態，狀態有十種狀態，那么就需要定義 30 個處理邏輯。
而且往往這些邏輯很多都是相同的，這看起來有點讓人難以接受。那么可以這樣實現：
const actions = ()=>{
const functionA = ()=>{/*do sth*/}
const functionB = ()=>{/*do sth*/}
return new Map([
[/^guest_[1-4]$/,functionA],
[/^guest_5$/,functionB],
//...
])
}
const onButtonClick = (identity,status)=>{
let action = [...actions()].filter(([key,value])=>(key.test(`${identity}_${status}`)))
action.forEach(([key,value])=>value.call(this))
}這里 Map 的優勢就更加凸顯了，它允許使用正則類型作為鍵，這帶來了無限可能。假設需求發生了變化，每個客人場景都需要發送日志事件，不同的狀態場景也需要單獨的邏輯處理。那么，我們可以這樣寫：
const actions = ()=>{
const functionA = ()=>{/*do sth*/}
const functionB = ()=>{/*do sth*/}
const functionC = ()=>{/*send log*/}
return new Map([
[/^guest_[1-4]$/,functionA],
[/^guest_5$/,functionB],
[/^guest_.*$/,functionC],
//...
])
}
const onButtonClick = (identity,status)=>{
let action = [...actions()].filter(([key,value])=>(key.test(`${identity}_${status}`)))
action.forEach(([key,value])=>value.call(this))
}也就是說，利用數組循環的特性，滿足正則表達式條件的邏輯就會被執行，這樣就可以同時執行通用邏輯和個別邏輯。有了正則表達式的存在，你可以發揮你的想象力，解鎖更多的可能性。
