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


Posted in Javascript onFebruary 19, 2020

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

用对象做键值简化:

const actions = new Map([
 [{
  identity: 'guest',
  status: 1
 }, () => { /*do sth*/ }],
 [{
  identity: 'guest',
  status: 2
 }, () => { /*do sth*/ }],
 //...
])
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 = () => { /*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代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

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

Javascript 相关文章推荐
JS定时器实例
Apr 17 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
继续学习javascript闭包
Dec 03 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
使用Vue构建可重用的分页组件
Mar 26 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 Javascript
JS继承定义与使用方法简单示例
Feb 19 #Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 #Javascript
vue中实现回车键登录功能
Feb 19 #Javascript
Vue中实现回车键切换焦点的方法
Feb 19 #Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 #Javascript
Vue常用的全选/反选的示例代码
Feb 19 #Javascript
详解node和ES6的模块导出与导入
Feb 19 #Javascript
You might like
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
php7 新增功能实例总结
2020/05/25 PHP
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
Python中实现对list做减法操作介绍
2015/01/09 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
简单分析python的类变量、实例变量
2019/08/23 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
迎新春趣味活动方案
2014/08/24 职场文书
保险公司演讲稿
2014/09/02 职场文书
授权委托书怎么写
2014/09/25 职场文书
干部作风建设心得体会
2014/10/22 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
深入理解 Golang 的字符串
2022/05/04 Golang
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python