es6中使用map简化复杂条件判断操作实例详解

本文实例讲述了es6中使用map简化复杂条件判断操作。分享给大家供大家参考，具体如下：

复杂逻辑判断时需要写很多if/else，代码可读性较差，可以用es6新增的Map来简化代码

列举六种实例，逐步简化

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简化：

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'],
}

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

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', () => {  }],
 ['guest_2', () => {  }],
 ['guest_3', () => {  }],
 ['guest_4', () => {  }],
 ['guest_5', () => {  }],
 ['master_1', () => {  }],
 ['master_2', () => {  }],
 ['master_3', () => {  }],
 ['master_4', () => {  }],
 ['master_5', () => {  }],
 ['default', () => {  }],
])

const onButtonClick = (identity, status) => {
 let action = actions.get(`${identity}_${status}`) || actions.get('default')
 action.call(this)
}

用对象做键值简化：

const actions = new Map([
 [{
  identity: 'guest',
  status: 1
 }, () => {  }],
 [{
  identity: 'guest',
  status: 2
 }, () => {  }],
 //...
])
const onButtonClick = (identity, status) => {
 //下面代码使用了数组解构 [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 = () => {  }
 const functionB = () => {  }
 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代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于Javascript相关内容可查看本站专题：《Javascript操作DOM技巧总结》、《Javascript页面元素操作技巧总结》、《Javascript事件相关操作与技巧大全》、《Javascript查找算法技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript错误与调试技巧总结》

希望本文所述对大家Javascript程序设计有所帮助。