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 相关文章推荐
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
openlayers实现地图弹窗
Sep 25 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
PHP5 面向对象程序设计
2008/02/13 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
Python群发邮件实例代码
2014/01/03 Python
Python的Django框架使用入门指引
2015/04/15 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
python执行使用shell命令方法分享
2017/11/08 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
Python3.8中使用f-strings调试
2019/05/22 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
校庆活动方案
2014/03/31 职场文书
自主招生英文自荐信
2015/03/25 职场文书
项目验收申请报告
2015/05/15 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis