前言：

       我們編寫js程式碼時經常遇到複雜邏輯判斷的情況，通常大家可以用if/else或者switch來實現多個條件判斷，但這樣會有個問題，隨著邏輯複雜度的增加，程式碼中的if/else/switch會變得越來越臃腫，越來越看不懂，我借鑑了下美文如下：

舉個栗子：

 1 const onButtonClick = (status)=>{
 2   if(status == 1){
 3     sendLog('processing')
 4     jumpTo('IndexPage')
 5   }else if
 
(status == 2){
 6     sendLog('fail')
 7     jumpTo('FailPage')
 8   }else if(status == 3){
 9     sendLog('fail')
10     jumpTo('FailPage')
11   }else if(status == 4){
12     sendLog('success')
13     jumpTo('SuccessPage')
14   }else if(status == 5){
15     sendLog('cancel')
16     jumpTo('CancelPage')
 
17   }else {
18     sendLog('other')
19     jumpTo('Index')
20   }
21 }

通過程式碼可以看到這個按鈕的點選邏輯：根據不同活動狀態做兩件事情，傳送日誌埋點和跳轉到對應頁面，大家可以很輕易的提出這段程式碼的改寫方案，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的邏輯。

還有更簡單的寫法：

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

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

我們需要把問題升級一下，以前按鈕點選時候只需要判斷status，現在還需要判斷使用者的身份：

/**
 * 按鈕點選事件
 * @param {number} status 活動狀態：1開團進行中 2開團失敗 3 開團成功 4 商品售罄 5 有庫存未開團
 * @param {string} identity 身份標識：guest客態 master主態
 */
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
    }
  }
}

　　二元判斷時

 1 const actions = new Map([
 2   ['guest_1', ()=>{/*do sth*/}],
 3   ['guest_2', ()=>{/*do sth*/}],
 4   ['guest_3', ()=>{/*do sth*/}],
 5   ['guest_4', ()=>{/*do sth*/}],
 6   ['guest_5', ()=>{/*do sth*/}],
 7   ['master_1', ()=>{/*do sth*/}],
 8   ['master_2', ()=>{/*do sth*/}],
 9   ['master_3', ()=>{/*do sth*/}],
10   ['master_4', ()=>{/*do sth*/}],
11   ['master_5', ()=>{/*do sth*/}],
12   ['default', ()=>{/*do sth*/}],
13 ])
14 
15 /**
16  * 按鈕點選事件
17  * @param {string} identity 身份標識：guest客態 master主態
18  * @param {number} status 活動狀態：1 開團進行中 2 開團失敗 3 開團成功 4 商品售罄 5 有庫存未開團
19  */
20 const onButtonClick = (identity,status)=>{
21   let action = actions.get(`${identity}_${status}`) || actions.get('default')
22   action.call(this)
23 }

用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)
}

用Map物件，以Object物件作為key：

 1 const actions = new Map([
 2   [{identity:'guest',status:1},()=>{/*do sth*/}],
 3   [{identity:'guest',status:2},()=>{/*do sth*/}],
 4   //...
 5 ])
 6 
 7 const onButtonClick = (identity,status)=>{
 8   let action = [...actions].filter(([key,value])=>(key.identity == identity && key.status == status))
 9   action.forEach(([key,value])=>value.call(this))
10 }