本文实例讲述了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', () => { }], ['guest_2', () => { }], ['guest_3', () => { }], ['guest_4', () => { }], ['guest_5', () => { }], ['master_1', () => { }], ['master_2', () => { }], ['master_3', () => { }], ['master_4', () => { }], ['master_5', () => { }], ['default', () => { }],])/** * 按钮点击事件 * @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)}

用对象做键值简化：

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程序设计有所帮助。