快捷導(dǎo)航

es6中使用map簡化復(fù)雜條件判斷操作實(shí)例詳解

更新時(shí)間：2020年02月19日 12:25:14 作者：qdmoment

這篇文章主要介紹了es6中使用map簡化復(fù)雜條件判斷操作,結(jié)合實(shí)例形式詳細(xì)分析了傳統(tǒng)方法與map簡化復(fù)雜條件判斷的相關(guān)操作技巧,需要的朋友可以參考下

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

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

列舉六種實(shí)例，逐步簡化

/**
 * 按鈕點(diǎn)擊事件
 * @param {number} status 活動(dòng)狀態(tài)：1 開團(tuán)進(jìn)行中 2 開團(tuán)失敗 3 商品售罄 4 開團(tuán)成功 5 系統(tǒng)取消
 */
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')
 }
}

轉(zhuǎn)化成switch簡化：

/**
 * 按鈕點(diǎn)擊事件
 * @param {number} status 活動(dòng)狀態(tài)：1 開團(tuán)進(jìn)行中 2 開團(tuán)失敗 3 商品售罄 4 開團(tuán)成功 5 系統(tǒng)取消
 */
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
 }
}

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

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

轉(zhuǎn)化成Map簡化

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

Map對象和Object對象的區(qū)別：Map的鍵可以是任意值，Map的鍵值對個(gè)數(shù)可通過size屬性直接獲

接下來將問題升級：

除去判斷狀態(tài)還要判斷用戶身份：

傳統(tǒng)寫法：

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

用對象做鍵值簡化：

const actions = new Map([
 [{
  identity: 'guest',
  status: 1
 }, () => { /*do sth*/ }],
 [{
  identity: 'guest',
  status: 2
 }, () => { /*do sth*/ }],
 //...
])
const onButtonClick = (identity, status) => {
 //下面代碼使用了數(shù)組解構(gòu) [key,value] = cuurrentValue
 let action = [...actions].filter(([key, value]) => (key.identity == identity && key.status == status))
 action.forEach(([key, value]) => value.call(this))
}

正則作為key

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

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: