作者：萧声秦方

前进：https://mp.weixin.qq.com/s/JzOQ_OwAYoP5Ic1VBtCZNA

00-1010最近部门在对之前的代码做一些优化。我在代码中看到了if(){}elseif(){}的一系列逻辑判断。显然还有优化的空间。

因为内部代码不适合分享，这里我就用输出来说说今天一周中某一天的逻辑判断优化的一些方案。

为了记录在案，以防有人怀疑：

我们在项目中使用的可能有多层嵌套，不像我的例子，只有一层。但是，它的优化思路大致相同。因为returnWeekday()方法异常简单，所以会提前声明。

00-1010编写returnWeekday()方法返回“今天是星期*”。

接下来，我们一步一步来。

00-1010在这里，我简单地将其分为“初级-初级-中级”阶段。

00-1010当我们开始获得需求并看到一系列逻辑判断时，首先应该想到的是if语句。

代码如下：

函数returnWeekday(){ 0

让字符串='今天是星期'；

让日期=新日期()。getDay()；

if(日期===0){ 0

String=' day

} else if(date===1){ 0

String=' one

} else if(date===2){ 0

String=' two

} else if(date===3){ 0

字符串='三'；

} else if(date===4){ 0

字符串='四'；

} else if(date===5){ 0

字符串='五'；

} else if(date===6){ 0

字符串='六'；

}

返回字符串

}

Console.log(returnWeekday())当我们写完这段代码后，第一感觉就是elseif块是不是太多了。

但是，当我们还在思考如何优化的时候，产品会给你发消息，询问这个需求是如何完成的。我还带了一个傻笑表情包。这时，你告诉自己，我们稍后再谈这个优化。但随着时间的推移，需求会增加。在下一个接管之前，这个没有再优化过。

上面的代码确实有太多的elseif块，看着不舒服。

我们在看《JavaScript 高级程序设计》的时候，看到了这样一句话：

Switch语句与if语句关系最密切，也是其他语言中广泛使用的一种流量控制语句。

那么我们可以考虑使用switch语句对其进行优化吗？

00-1010这里我们使用switch语句来优化代码。

注意：switch语句在比较值时使用全等运算符，不会有类型转换。

代码如下：

函数returnWeekday(){ 0

让字符串='今天是星期'；

让日期=新日期()。getDay()；

开关(日期){ 0

案例0 :

String=' day

打破；

案例1 :

String=' one

打破；

案例2 :

String=' two

打破；

案例3 :

字符串='三'；

打破；

案例4 :

字符串=

"四"; break; case 5 : string += "五"; break; case 6 : string += "六"; break; } return string}console.log(returnWeekday())

我们在 case 里面拼接字符，以达到输出预期结果的目的。这里的结构看起来确实比 if 语句清晰了一点。可是还是有点疑惑？

假设哪一天，相关组织发现，形象有变。每周需要变成八天（产品的思维，你无法想象）。我们这个 returnWeekday() 方法就需要多加一层判断了。

我们的希望是已经封装好的方法，不要频繁的修改。可是需求的变动是你无法控制的。

所以我们继续思考该怎么优化。

中级

我们看到这里的 case 是数字，和数组的下标是一致的。

即：[天,一,二,三,四,五,六] 的下标。

所以我们可以考虑使用数组来优化。

代码如下：

function returnWeekday(){ let string = "今天是星期"; let date = new Date().getDay(); // 使用数组 let dateArr = [ 天 , 一 , 二 , 三 , 四 , 五 , 六 ]; return string + dateArr[date] } console.log(returnWeekday())

以上代码是不是比 switch 语句和 if 语句清晰多了。而且就算一周变为八天，只需要修改 dateArr 数组就好了。

倘若我们的每个 case 是否规律的字符串呢？那我们使用对象，每个 case 为一个 key

代码如下：

function returnWeekday(){ let string = "今天是星期"; let date = new Date().getDay(); // 使用对象 dateObj = { 0: 天 , 1: "一", 2: "二", 3: "三", 4: "四", 5: "五", 6: "六", }; return string + dateObj[date] } console.log(returnWeekday())

以上使用数组或者对象的写法，提高代码的可读性的同时，维护起来也变得简单了。

使用 charAt 字符方法

字符串有个和使用数组下标类似的方法：

// charAt 定位方法 function returnWeekday(){ return "今天是星期" + "日一二三四五六".charAt(new Date().getDay()); } console.log(returnWeekday())

需求变动

这个时候，有人希望 returnWeekday() 方法不仅返回今天是周几，还需要区分工作日和休息日，调用相关方法。

如果是使用 switch、 if 或数组维护起来就有点麻烦，需要改写的地方还挺多的。

其他常见优化手段

这里在给出一些常见的优化手段。

三元运算

适合简单的 if(){}else{} 情况。

//滚动监听，头部固定 handleScroll: function () { et offsetTop = 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();

使用 includes 处理多重条件

if( code === 202 || code === 203 || code === 204 ){ someMethod()}

可以改成

if( [ 202 , 203 , 204 ].includes(code) ){ someMethod() }

html中if语句(if else优化)

中级

使用 charAt 字符方法

需求变动

其他常见优化手段

三元运算

逻辑与运算符

使用 includes 处理多重条件

推荐JavaScript经典实例学习资料文章