共计 2930 个字符，预计需要花费 8 分钟才能阅读完成。
优化过程
这里我简略的分为“初学 —> 入门 —> 中级”这几个阶段。
初学
在前端培训学习练习中，看到一系列的逻辑判断，首先想到的应该就是 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()}
