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

# ||

let a = 1;
if (a) {
  a = 1;
} else {
  a = 2;
}

// 修改为
a = a || 0;

1
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

# 按位异或运算符^

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

# 复杂逻辑判断

# 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

# 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

# 利用 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

# 利用 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

#JavaScript

上次更新: 2022/09/06, 10:30:04

← js对象排序 js深拷贝→