js if/else 语句优化策略
# 前言
在项目当中,都会遇到需要做大量分支判断的情况,最常用到的就是用 if/else;但是用起来并不是很美观;所以当遇到大量分支判断嵌套在一起时,就会显得很难阅读。就要对应地做出一些优化。
# 简单逻辑判断
# 提前 return
let a = 1;
if (a) {
a = 2;
} else {
return;
}
// 写成
if (!a) {
return;
}
a = 2;
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# ||
let a = 1;
if (a) {
a = 1;
} else {
a = 2;
}
// 修改为
a = a || 0;
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 三元表达式
let a = 1,
b = 2,
c = 3,
d = 4;
if (a === b) {
a = d;
} else {
a = c;
}
// 修改为
a = a === b ? d : c;
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 按位异或运算符^
let a =1,b=2,c=1,
if(a === c){
c = b
}else if(b === c){
c = a
}
//写成
a = a^b^c
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 复杂逻辑判断
# if 逻辑优化
人们考虑的东西到时候,都会把最可能发生的情况先做好准备。优化 if 逻辑的时候也可以这样想:把最可能出现的条件放在前面,把最不可能出现的条件放在后面,这样程序执行时总会按照写的逻辑的先后顺序逐一检测所有的条件,知道发现匹配的条件才会停止继续检测。
- if 的优化目标:最小化找到分支之前所判断条件体的数量。
- if 优化的方法:将最常见的条件放在首位。
var a = 1;
if(a < 10){
...
}else if(a > 10 && a < 100){
...
}else{
...
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# switch/case
switch 在性能上和 if/else 区别不是很大,在大量分支判断时会比 if/else 看上去整洁。
function formatData(time, format) {
var t = new Date(time);
var tf = function (i) {
return (i < 10 ? "0" : "") + i;
};
return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
switch (a) {
case "yyyy":
return tf(t.getFullYear());
break;
case "MM":
return tf(t.getMonth() + 1);
break;
case "mm":
return tf(t.getMinutes());
break;
case "dd":
return tf(t.getDate());
break;
case "HH":
return tf(t.getHours());
break;
case "ss":
return tf(t.getSeconds());
break;
}
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 利用 Object 重构
let a = 0;
if (type === "type_1") {
a = 10;
} else if (type === "type_2") {
a = 20;
} else if (type === "type_3") {
a = 30;
}
// 改成
const obj = {
type_1: 10,
type_2: 20,
type_3: 30,
};
console.log(obj[type]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 利用 Map
let a = 0;
if (type === "type_1") {
function type1() {
a = 10;
}
} else if (type === "type_2") {
function type2() {
a = 20;
}
} else if (type === "type_3") {
function type3() {
a = 30;
}
}
const action = new Map([
[
"type_1",
() => {
a = 10;
},
],
[
"type_2",
() => {
a = 20;
},
],
[
"type_3",
() => {
a = 30;
},
],
]);
let data = action.get(type);
console.log(data());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
相关文章:JavaScript 复杂判断(if else / switch)的更优雅写法 优化冗余 (opens new window)
上次更新: 2022/09/06, 10:30:04