优化过程
这里我简略的分为 “初学 —> 入门 —> 中级” 这几个阶段。
初学
在前端培训学习练习中,看到一系列的逻辑判断,首先想到的应该就是 if 语句了。
代码如下:
function returnWeekday(){

let string = "明天是星期";let date = new Date().getDay();if (date === 0) {    string += "日";} else if (date === 1) {    string += "一";} else if (date === 2) {    string += "二";} else if (date === 3) {    string += "三";} else if (date === 4) {    string += "四";} else if (date === 5) {    string += "五";} else if (date === 6) {    string += "六";}return string

}
console.log(returnWeekday())
当咱们写完了这样的代码,第一感觉就是 else if 块是不是太多了。
可是当咱们还在思考如何优化的时候,产品就在钉钉发消息给你问这个需要实现的怎么样了?还带了一个坏笑的表情包。这个时候你通知本人,这个优化前面再说吧。可是长此以往,需要加之。这个再也没有优化过了,直到下一个接手。

下面的代码的确 else if 块太多了,看着就不难受。

所以咱们是不是能够思考应用 switch 语句来优化一下呢?
入门
这里咱们应用 switch 语句优化一遍代码。
留神: switch 语句在比拟值的时候应用的是全等操作符,不会有类型转换的状况。

代码如下:
function returnWeekday(){

let string = "明天是星期";let date = new Date().getDay();switch (date) {    case 0 :        string += "日";        break;    case 1 :        string += "一";        break;    case 2 :        string += "二";        break;    case 3 :        string += "三";        break;    case 4 :        string += "四";        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 或 数组 保护起来就有点麻烦,须要改写的中央还挺多的。
function returnWeekday(){

let string = "明天是星期";let date = new Date().getDay();// 应用对象dateObj = {     0: ['天','休'],     1: ["一",'工'],     2: ["二",'工'],     3: ["三",'工'],     4: ["四",'工'],     5: ["五",'工'],     6: ["六",'休'], }// 类型,这里也能够对应相干办法dayType = {    '休': function(){        // some code        console.log('为休息日')    },    '工': function(){        // some code        console.log('为工作日')    }}let returnData = {    'string' : string + dateObj[date][0],    'method' : dayType[dateObj[date][1]]}return returnData

};
console.log(returnWeekday().method.call(this))
其余常见优化伎俩
这里在给出一些常见的优化伎俩。
三元运算
适宜简略的 if(){}else{} 状况。
//滚动监听,头部固定
handleScroll: function () {

let 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()

}