本文實例講述了es6中使用map簡化復雜條件判斷操作。分享給大家供大家參考，具體如下：

復雜邏輯判斷時需要寫很多if/else，代碼可讀性較差，可以用es6新增的Map來簡化代碼

列舉六種實例，逐步簡化

/** * 按鈕點擊事件 * @param {number} status 活動狀態：1 開團進行中 2 開團失敗 3 商品售罄 4 開團成功 5 系統取消 */const onButtonClick = (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 }}

將判斷條件作為對象的屬性名，將處理邏輯作為對象的屬性值，繼續簡化：

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

轉化成Map簡化

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

Map對象和Object對象的區別：Map的鍵可以是任意值，Map的鍵值對個數可通過size屬性直接獲

接下來將問題升級：

除去判斷狀態還要判斷用戶身份：

傳統寫法：

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*/ }],])/** * 按鈕點擊事件 * @param {string} identity 身份標識：guest客態 master主態 * @param {number} status 活動狀態：1 開團進行中 2 開團失敗 3 開團成功 4 商品售罄 5 有庫存未開團 */const onButtonClick = (identity, status) => { let action = actions.get(`${identity}_${status}`) || actions.get('default') action.call(this)}