JavaScript复杂判断(if else / switch)的更优雅写法优化冗余

2019-11-01 admin

前提

我们编写js程式码时经常遇到复杂逻辑判断的情况,通常大家可以用if/else或者switch来实现多个条件判断,但这样会有个问题,随着逻辑复杂度的增加,程式码中的if/else/switch会变得越来越臃肿,越来越看不懂,那么如何更优雅的写判断逻辑,本文带你试一下。

举个例子

先看一段程式码

/**
 * 按钮点选事件
 * @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(状态== 4){ 
    sendLog('success')
    jumpTo('SuccessPage')
  } 否则 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;
  } 
}

嗯,这样看起来比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' ],
}

/** 
 * 按钮点选事件
 * @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)
}

上面程式码确实看起来更清爽了,这种方法的聪明之处在于:将判断条件作为对象的属性名,将处理逻辑作为对象的属性值,在按钮点选的时候,通过对象属性查询的方式来进行逻辑判断,这种写法特别适合一元条件判断的情况。

是不是还有其他写法呢?有的:

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 ]) 
}

这样写用到了es6里的Map物件,是不是更爽了?Map物件和Object有什么区别呢?

  1. 一个对象通常都有自己的原型,所以一个对象总有一个”prototype”键。
  2. 一个对象的键只能是字串或者Symbols,但一个Map的键可以是任意值。
  3. 你可以通过size属性很容易地得到一个Map的键值对个数,而对象的键值对个数只能手动确认。

我们需要把问题升级一下,以前按钮点选时候只需要判断status,现在还需要判断使用者的身份:

/*
 * 
 * 按钮点选事件
 * @param {number} status活动状态:1开团进行中2开团失败3开团成功4商品售罄5有库存未开团
 * @param {string} identity身份标识: guest客态master主态
 */ 
const onButtonClick = (status,identity)=>{
   if (identity == 'guest' ){
     if (status == 1 ){
       //do sth 
    } else  if (status == 2 ) {
       //do sth 
    } else  if (status == 3 ){
       //do sth 
    } else  if (status == 4){
       //做某事 
    } else  if(状态== 5){
       //做某事 
    } else {
       //做某事 
    } 
  } else  if(identity == 'master'){
     if(status == 1){
       //做某事 
    } else  if(状态== 2){
       //做某事 
    } 其他 if(状态== 3){
       //做某事 
    } else  if(状态== 4
    } {
       //做某事 } else  if(状态== 5){
       //做某事 
    } else {
       //做某事 
    } 
  } 
}

原谅我不写每个判断里的具体逻辑了,因为程式码太冗长了。

原谅我又用了if/else,因为我看到很多人依然在用if/else写这种大段的逻辑判断。

从上面的例子我们可以看到,当你的逻辑升级为二元判断时,你的判断量会加倍,你的程式码量也会加倍,这时怎么写更清爽呢?

const actions = new Map([ 
  [ 'guest_1',()=> { / * do sth * / }],
  [ 'guest_2',()=> { / * do sth * / }],
  [ 'guest_3',()=> { / *做某事* / }],
  [ 'guest_4',()=> { / *做某事* / }],
  [ 'guest_5',()=> { / *做某事* / } ],
  [ 'master_1',()=> { / *做某事* / }],
  [ 'master_2',()=> { / *做某事* / }],
  [ 'master_3',()=> { / *做某事* /}], 
  [ 'master_4', () => { /*do sth*/ }], 
  [ 'master_5', () => { /*do sth*/ }], 
  [ 'default', () => { /*do sth*/ }], 
]) 

/*
 * javascript 
 * 按钮点选事件
 * @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':()=>{/*do sth*/},
  'guest_2':()=>{/*do sth*/},
  //....
}

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},()=>{/*do sth*/}],
  [{identity:'guest',status:2},()=>{/*do sth*/}],
  //...
])

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 },()=> { / * functionA * / }],
  [{identity:'guest',status:2 },()=> { / * functionA * / }],
  [{identity:'guest',status:3 },()=> { / * functionA * / }],
  [{identity:'guest',status:4 },()=> { / * functionA * / }],
  [{identity:'guest',status:5 },()=> { / * functionB * / }],
   // ... 
])

好一点的写法是将处理逻辑函式进行快取:

const actions = ()=>{
  const functionA = ()=>{/*do sth*/}
  const functionB = ()=>{/*do sth*/}
  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 = ()=>{/*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))
}

这里Map的优势更加凸显,可以用正则作为key了,这样就有了无限可能,假如需求变成,凡是guest情况都要传送一个日志埋点,不同status情况也需要单独的逻辑处理,那我们可以这样写:

const actions = ()=>{
  const functionA = ()=>{/*do sth*/}
  const functionB = ()=>{/*do sth*/}
  const functionC = ()=>{/*send log*/}
  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种逻辑判断写法,包括:

  1. 如果别的
  2. 开关
  3. 一元判断时:存到Object里
  4. 一元判断时:存到Map里
  5. 多元判断时:将condition拼接成字串存到Object里
  6. 多元判断时:将condition拼接成字串存到Map里
  7. 多元判断时:将condition存为Object存到Map里
  8. 多元判断时:将condition写作正则存到Map里

至此,本文也将告一段落,愿你未来的人生里,不只是有if/else/switch。

原文地址:JavaScript复杂判断(if else / switch)的更优雅写法优化冗余

[转载]原文链接:https://segmentfault.com/a/1190000020878915

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78750.html

文章标题:JavaScript复杂判断(if else / switch)的更优雅写法优化冗余

相关文章
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
html5+JavaScript教程-微信打飞机小游戏源码
js // JavaScript Document var c = document.getElementById("dotu"); var cxt = c.getContext("2d&q...
2015-11-12
JavaScript编辑器推荐
主流编辑器有SublimeText,Notepad++,webstorm等,是使用最广泛的编辑器,但也有一些JavaScript编辑器提供有着各自的特性和功能,适应不同人的需求,以下是几款优秀的编辑器,相信你一定能找到自己喜欢的。 1. W...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
回到顶部