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

本文实例讲述了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)}