【转】转自微信公众号 JavaScript 复杂判断的更优雅写法
与微信公众号看到一篇js复杂判断的文章,对我启发很大,故转到博客园以供后期不断学习并应用于项目。原文地址:https://mp.weixin.qq.com/s/ClFDRj4MnAxv1dJ5VWKSJQ
前提
我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得越来越臃肿,越来越看不懂,那么如何更优雅的写判断逻辑,本文带你试一下。
举个例子
先看一段代码
通过代码可以看到这个
constonButtonClick=(status)=>{
if(status==1){
sendLog('processing')jumpTo('IndexPage')
}elseif(status==2){
sendLog('fail')jumpTo('FailPage')
}elseif(status==3){
sendLog('fail')jumpTo('FailPage')
}elseif(status==4){
sendLog('success')jumpTo('SuccessPage')
}elseif(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 }
}
嗯,这样看起来比if/else清晰多了,细心的同学也发现了小技巧,case 2和case 3逻辑一样的时候,可以省去执行语句和break,则case 2的情况自动执行case 3的逻辑。
这时有同学会说,还有更简单的写法:
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)
}
上面代码确实看起来更清爽了,这种方法的聪明之处在于:将判断条件作为对象的属性名,将处理逻辑作为对象的属性值,在按钮点击的时候,通过对象属性查找的方式来进行逻辑判断,这种写法特别适合一元条件判断的情况。
是不是还有其他写法呢?有的:
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])
}
这样写用到了es6里的Map对象,是不是更爽了?Map对象和Object对象有什么区别呢?
一个对象通常都有自己的原型,所以一个对象总有一个"prototype"键。
一个对象的键只能是字符串或者Symbols,但一个Map的键可以是任意值。
你可以通过size属性很容易地得到一个Map的键值对个数,而对象的键值对个数只能手动确认。
我们需要把问题升级一下,以前按钮点击时候只需要判断status,现在还需要判断用户的身份:
const onButtonClick = (status, identity) =>
{
if(identity == 'guest')
{
if(status == 1) { }
else if (status == 2) { }
else if (status == 3) { }
else if (status == 4) { }
else if (status == 5) { }
else { }
}
else if (identity == 'master')
{
if(status == 1) { }
else if (status == 2) { }
else if (status == 3) { }
else if (status == 4) { }
else if (status == 5) { }
else { }
}
}
原谅我不写每个判断里的具体逻辑了,因为代码太冗长了。
原谅我又用了if/else,因为我看到很多人依然在用if/else写这种大段的逻辑判断。
从上面的例子我们可以看到,当你的逻辑升级为二元判断时,你的判断量会加倍,你的代码量也会加倍,这时怎么写更清爽呢?
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)
}
上述代码核心逻辑是:把两个条件拼接成字符串,并通过以条件拼接字符串作为键,以处理函数作为值的Map对象进行查找并执行,这种写法在多元条件判断时候尤其好用。
当然上述代码如果用Object对象来实现也是类似的:
const actions = {
'guest_1' : () => {},
'guest_2' : () => {},
//....
}
const onButtonClick = (identity, status) => {
let action = actions[`${identity}_${status}`] || actions['default']
action.call(this)
}
如果有些同学觉得把查询条件拼成字符串有点别扭,那还有一种方案,就是用Map对象,以Object对象作为key:
const actions = new Map([
[{identity : 'guest', status : 1},() => {}],
[{identity : 'guest', status : 2},() => {}],
//...
])
const onButtonClick = (identity, status) =>
{
let action = [...actions].filter(([key, value]) => (key.identity == identity && key.status == status))
action.forEach(([key, value]) => value.call(this))
}
是不是又高级了一点点?
这里也看出来Map与Object的区别,Map可以用任何类型的数据作为key。
我们现在再将难度升级一点点,假如guest情况下,status1-4的处理逻辑都一样怎么办,最差的情况是这样:
const actions = new Map([
[{identity : 'guest', status : 1},() => {}],
[{identity : 'guest', status : 2},() => {}],
[{identity : 'guest', status : 3},() => {}],
[{identity : 'guest', status : 4},() => {}],
[{identity : 'guest', status : 5},() => {}],
//...
])
好一点的写法是将处理逻辑函数进行缓存:
const actions = () =>
{
const functionA = () => {}
const functionB = () => {}
return new Map([
[{identity : 'guest', status : 1},functionA],
[{identity : 'guest', status : 2},functionA],
[{identity : 'guest', status : 3},functionA],
[{identity : 'guest', status : 4},functionA],
[{identity : 'guest', status : 5},functionB], ])
}
const onButtonClick = (identity, status) =>
{
let action = [...actions()].filter(([key, value]) => (key.identity == identity && key.status == status))
action.forEach(([key, value]) => value.call(this))
}
这样写已经能满足日常需求了,但认真一点讲,上面重写了4次functionA还是有点不爽,假如判断条件变得特别复杂,比如identity有3种状态,status有10种状态,那你需要定义30条处理逻辑,而往往这些逻辑里面很多都是相同的,这似乎也是笔者不想接受的,那可以这样实现:
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))
}
这里Map的优势更加凸显,可以用正则类型作为key了,这样就有了无限可能,假如需求变成,凡是guest情况都要发送一个日志埋点,不同status情况也需要单独的逻辑处理,那我们可以这样写:
const actions = () =>
{
const functionA = () => {}
const functionB = () => {}
const functionC = () => {}
return new Map([
[/^guest_[1-4]$/, functionA],
[/^guest_5$/, functionB],
[/^guest_.*$/, functionC],
])
} const onButtonClick = (identity, status) =>
{
let action = [...actions()].filter(([key, value]) => (key.test(`${identity}_${status}`)))
action.forEach(([key, value]) => value.call(this))
}
也就是说利用数组循环的特性,符合正则条件的逻辑都会被执行,那就可以同时执行公共逻辑和单独逻辑,因为正则的存在,你可以打开想象力解锁更多的玩法,本文就不赘述了。
总结
本文已经教你了8种逻辑判断写法,包括:
if/else
switch
一元判断时:存到Object里
一元判断时:存到Map里
多元判断时:将condition拼接成字符串存到Object里
多元判断时:将condition拼接成字符串存到Map里
多元判断时:将condition存为Object存到Map里
多元判断时:将condition写作正则存到Map里
至此,本文也将告一段落,愿你未来的人生里,不只是有if/else/switch。
【转】转自微信公众号 JavaScript 复杂判断的更优雅写法的更多相关文章
- JavaScript复杂判断的更优雅写法
摘要: 写代码是一门艺术. 原文:JavaScript 复杂判断的更优雅写法 作者:Think. 公众号:大转转fe Fundebug经授权转载,版权归原作者所有. 前提 我们编写js代码时经常遇到复 ...
- JavaScript 复杂判断的更优雅写法
我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得越来越臃 ...
- JavaScript 复杂判断的更优雅写法借鉴
前言: 我们编写js代码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,代码中的if/else/switch会变得 ...
- jsonp是什么【转载自JavaScript微信公众号】
转自 http://mp.weixin.qq.com/s/xNnKAeLv6sO0T-IvP2AUlQ JavaScript微信公众号 一.JSONP的诞生 首先,因为ajax无法跨 ...
- 史上最全最常用的正则表达式(转自微信公众号:javascript)
很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是不很符合要求.所以我最近把开发中常用的一些正则表达式整理了一下,在这里分享一下.给自己留个底,也给朋友们做个参考. ...
- NET微信公众号开发-5.0微信支付(待测试)
开发前准备. 1.0微信支付官方开发者文档 2.0官方demo下载 我们用c#所以选择.net版本 不过这个官方的demo根本跑步起来 3.0官方demo运行起来解决方案 4.0微信支付官方.net版 ...
- .NET微信公众号开发-5.0微信支付
一.前言 在开始做这个功能之前,我们要做的第一件事情就是思考,如何做这个微信支付,从哪里开始,从哪里入手,官方的sdk说明什么的,有没有什么官方的demo,还有就是老板给我的一些资料齐全不,那些要申请 ...
- 微信公众号内H5调用微信支付国内服务商模式
最近在折微信公众号内H5用JSAPI调用微信支付,境内服务商版支付,微信支付给出的官方文档以及SDK不够详细,导至我们走了一些弯路,把他分享出来,我这边主要是用PHP开发,所以未加说的话示例都是PHP ...
- .net微信公众号开发——基础接口
作者:王先荣 本文讲述微信公众号开发中基础接口的使用,包括以下内容: (1)获取许可令牌(AccessToken): (2)获取微信服务器地址: (3)上传.下载多媒体文件: ...
随机推荐
- iOS获取手机型号、iOS获取当前app的名称和版本号
NSDictionary *infoDictionary = [[NSBundle mainBundle] infoDictionary]; CFShow(infoDictionary); // ap ...
- linux下apache无法启动之(httpd not running, trying to st)
这突然接手的服务器,本来是没什么事的,可是因为机房的问题,需要将服务器迁回来,结果可想而知,关机重启了,其中有一台估计诚心给我过不去,待配置好ip并重启了服务后,发现apache无法正常启动了! 先还 ...
- VUE中嵌套路由
官网地址:https://router.vuejs.org/zh-cn/essentials/nested-routes.html 路由嵌套一般使用在后台管理系统中 给一个比较简单的小案例 <! ...
- C# DataTable转List<T>--利用反射
/// <summary> /// 利用反射将Datatable转换为List<T>对象 /// </summary> /// <typeparam name ...
- .NET Memcached Client 扩展获取所有缓存Key
.NET Memcached Client默认实现中并没有获取所有已经缓存Key的方法,但在业务中有时候需求中需要通过正则删除符合条件的缓存内容,所以就要通过读取已经缓存Key进行相关的匹配,然后删除 ...
- CodeForces - 95B
Petya loves lucky numbers. Everybody knows that positive integers are lucky if their decimal represe ...
- (6)ASP.NET Core 中使用IHttpClientFactory发出HTTP请求
1.HttpClient类使用存在的问题 HttpClient类的使用所存在的问题,百度搜索的文章一大堆,好多都是单纯文字描述,让人感觉不太好理解,为了更好理解HttpClient使用存在的问题,下面 ...
- Java中的==和equals区别
概述: A.==可用于基本类型和引用类型:当用于基本类型时候,是比较值是否相同:当用于引用类型的时候,是比较对象是否相同. B.对于String a = “a”; Integer b = 1;这种类型 ...
- Docker | 第一章:Docker简介
前言 作为本系列的起始章节,本章节主要是对Docker的相关概念进行简单阐述下.自此也是查阅了相关资料,奈何也都是英文版居多,看的是有点头大的.现在悔不当初不好好学习英文了.o(︶︿︶)o 唉 Doc ...
- ASP编码规范
ASP编码规范(--::) 第一章 ASP编码规范通述 ASP编码分为两大部分,一部分为静态文件编码,一部分为包含服务器端脚本的动态文件编码. 静态文件编码分script编码和HTML编码两部分. 服 ...