前言最近部门在对之前的代码做一些优化。在代码中看到了一系列if(){}elseif(){}逻辑判断。这显然有优化的空间。由于内部代码不适合分享，这里我将通过<输出今天星期几>来谈谈逻辑判断优化的一些解决方案。这里先声明一下，免得疑惑：我们在项目中使用的很可能有多层嵌套，不像我的例子只有一层。不过优化思路大致相同。因为returnWeekday()方法出奇的简单，所以它是提前声明的。需要写一个returnWeekday()方法来返回“今天是星期*”。让我们一步一步来。这里我简单地将优化过程分为“初级—>入门—>中级”几个阶段。初学者当我们开始拿到需求，看到一连串的逻辑判断时，首先想到的应该是if语句。代码如下：functionreturnWeekday(){letstring="今天是一周";letdate=newDate().getDay();if(date===0){string+="day";}elseif(date===1){string+="one";}elseif(date===2){string+="two";}elseif(date===3){string+="three";}elseif(date===4){string+="四";}elseif(date===5){string+="五";}elseif(date===6){string+="六";}returnstring}console.log(returnWeekday())当我们写完这样的代码后，第一感觉就是是不是elseif块太多了。但是当我们还在想怎么优化的时候，产品会在钉钉上给你发消息问这个需求实现的怎么样？还带来了傻笑表情包。这个时候你就告诉自己，这个优化以后再说吧。但随着时间的推移，需求会增加。在下一个接管之前，这个不会再被优化。上面的代码确实有太多的elseif块，看着不舒服。我们在看《JavaScript 高级程序设计》的时候，看到了这样一句话：switch语句与if语句关系最密切，也是其他语言常用的流程控制语句。那我们是不是可以考虑使用switch语句来优化一下呢？入门这里我们再次使用switch语句来优化代码。注意：switch语句在比较值时使用恒等运算符，不会进行类型转换。代码如下：functionreturnWeekday(){letstring="今天是一周";letdate=newDate().getDay();switch(date){case0:string+="day";break;case1:string+="one“;休息;case2:string+="two";break;case3:string+="three";break;case4:string+="four";break;case5:string+="five";break;case6:string+="six";break;}returnstring}console.log(returnWeekday())我们对case中的字符进行拼接，达到输出预期结果的目的。这里的结构看起来确实比if语句干净一些。但还是有点迷茫？假设有一天，相关机构发现占星术发生了变化。需要变成一周八天（产品思维，你想象不到）。我们的returnWeekday()方法需要一层额外的判断。我们希望已经封装好的方法不要频繁修改。但是需求的变化是你无法控制的。所以我们继续思考如何优化。到了中级，我们看到这里的case是一个数字，和数组的下标是一致的。即：['日','一','二','三','四','五','六']的下标。所以我们可以考虑使用数组进行优化。代码如下：functionreturnWeekday(){letstring="今天是一周";letdate=newDate().getDay();//使用数组letdateArr=['day','one','two','三','四','5','6'];returnstring+dateArr[date]}console.log(returnWeekday())上面的代码是不是比switch语句和if语句清晰多了？而且即使一周变成八天，也只需要修改dateArr数组即可。如果我们的每个case都是不规则的字符串怎么办？然后我们使用对象，每个case是一个关键代码如下：functionreturnWeekday(){letstring="今天是一周";letdate=newDate().getDay();//使用对象dateObj={0:'day',1:"一",2:"二",3:"三",4:"四",5:"五",6:"六",};returnstring+dateObj[日期]}console.log(returnWeekday())上面数组或对象的使用，提高了代码的可读性，也使维护更容易。使用charAt字符方法String有一个类似于使用数组下标的方法：//charAt定位方法functionreturnWeekday(){return"今天是星期几"+"第123456天".charAt(newDate().getDay());}console.log(returnWeekday())需求变化这时候有人希望returnWeekday()方法不仅返回今天是星期几，还需要区分工作日和休息日，并调用相关方法。如果用switch，if或者array，维护起来会有点麻烦，需要重写的地方还蛮多的。functionreturnWeekday(){letstring="今天是一周";letdate=newDate().getDay();//使用对象dateObj={0:['Day','Holiday'],1:["One",'工作'],2:["二",'工作'],3:["三",'工作'],4:["四",'工作'],5:["五",'工作'],6:["六",'休'],}//类型，这里也可以对应相关方法dayType={'休':function(){//somecodeconsole.log('是休息日')},'work':function(){//somecodeconsole.log('forworkingdays')}}letreturnData={'string':string+dateObj[date][0],'method':dayType[dateObj[date][1]]}returnreturnData};console.log(returnWeekday().method.call(this))其他常见的优化方法下面介绍一些常见的优化方法。三元运算适用于简单的if(){}else{}情况。//滚动监听，头部固定handleScroll:function(){letoffsetTop=this.$refs.pride_tab_fixed.getBoundingClientRect().top;if(offsetTop<0){this.titleFixed=true}else{this.titleFixed=false}//改为三元(offsetTop<0)?this.titleFixed=true:this.titleFixed=false;//我们发现条件块中的赋值是一个布尔值，所以可以更简单一点this.titleFixed=offsetTop<0;这样，在简化代码的同时，并没有降低可读性。逻辑与运算符有时我们可以使用逻辑与运算符来简化代码if(falg){someMethod()}可以改为：falg&&someMethod();使用include处理多个条件if(code==='202'||code==='203'||code==='204'){someMethod()}可以改成if(['202','203','204'].includes(code)){someMethod()}
