我們編寫js代碼時經常遇到復雜邏輯判的情況，通常大家可以用if/else或者switch來實現多個條件判斷，但這樣會有個問題，隨著邏輯復雜度的增加，代碼中的if/else/switch會變得越來越臃腫，越來越看不懂，那么如何更優雅的寫判斷邏輯，本文帶你試一下。

舉個例子

先看一段代碼

/** * 按鈕點擊事件 * @param {number} status 活動狀態：1 開團進行中 2 開團失敗 3 商品售罄 4 開團成功 5 系統取消 */const onButtonClick1 = (status)=>{ if(status == 1){  sendLog('processing')  jumpTo('IndexPage') }else if(status == 2){  sendLog('fail')  jumpTo('FailPage') }else if(status == 3){  sendLog('fail')  jumpTo('FailPage') }else if(status == 4){  sendLog('success')  jumpTo('SuccessPage') }else if(status == 5){  sendLog('cancel')  jumpTo('CancelPage') }else {  sendLog('other')  jumpTo('Index') }}

通過代碼可以看到這個按鈕的點擊邏輯：根據不同活動狀態做兩件事情，發送日志埋點和跳轉到對應頁面，大家可以很輕易的提出這段代碼的改寫方案，switch出場：

/** * 按鈕點擊事件 * @param {number} status 活動狀態：1 開團進行中 2 開團失敗 3 商品售罄 4 開團成功 5 系統取消 */const onButtonClick = (status)=>{ switch (status){  case 1:   sendLog('processing')   jumpTo('IndexPage')   break  case 2:  case 3:   sendLog('fail')   jumpTo('FailPage')   break   case 4:   sendLog('success')   jumpTo('SuccessPage')   break  case 5:   sendLog('cancel')   jumpTo('CancelPage')   break  default:   sendLog('other')   jumpTo('Index')   break }}

嗯，這樣看起來比if/else清晰多了，細心的同學也發現了小技巧，case 2和case 3邏輯一樣的時候，可以省去執行語句和break，則case 2的情況自動執行case 3的邏輯。

這時有同學會說，還有更簡單的寫法：

const actions = { '1': ['processing','IndexPage'], '2': ['fail','FailPage'], '3': ['fail','FailPage'], '4': ['success','SuccessPage'], '5': ['cancel','CancelPage'], 'default': ['other','Index'],}/** * 按鈕點擊事件 * @param {number} status 活動狀態：1開團進行中 2開團失敗 3 商品售罄 4 開團成功 5 系統取消 */const onButtonClick = (status)=>{ let action = actions[status] || actions['default'],   logName = action[0],   pageName = action[1] sendLog(logName) jumpTo(pageName)}

上面代碼確實看起來更清爽了，這種方法的聰明之處在于：將判斷條件作為對象的屬性名，將處理邏輯作為對象的屬性值，在按鈕點擊的時候，通過對象屬性查找的方式來進行邏輯判斷，這種寫法特別適合一元條件判斷的情況。

是不是還有其他寫法呢？有的：

const actions = new Map([ [1, ['processing','IndexPage']], [2, ['fail','FailPage']], [3, ['fail','FailPage']], [4, ['success','SuccessPage']], [5, ['cancel','CancelPage']], ['default', ['other','Index']]])/** * 按鈕點擊事件 * @param {number} status 活動狀態：1 開團進行中 2 開團失敗 3 商品售罄 4 開團成功 5 系統取消 */const onButtonClick = (status)=>{ let action = actions.get(status) || actions.get('default') sendLog(action[0]) jumpTo(action[1])}