js if/else 语句优化策略

前言

在项目当中，都会遇到需要做大量分支判断的情况，最常用到的就是用 if/else；但是用起来并不是很美观；所以当遇到大量分支判断嵌套在一起时，就会显得很难阅读。就要对应地做出一些优化。

简单逻辑判断

提前 return

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

// 写成
if (!a) {
  return;
}
a = 2;

||

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

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

三元表达式

let a = 1,
  b = 2,
  c = 3,
  d = 4;

if (a === b) {
  a = d;
} else {
  a = c;
}

// 修改为
a = a === b ? d : c;

按位异或运算符^

let a =1,b=2,c=1,
if(a === c){
  c = b
}else if(b === c){
  c = a
}

//写成
a = a^b^c

复杂逻辑判断

if 逻辑优化

人们考虑的东西到时候，都会把最可能发生的情况先做好准备。优化 if 逻辑的时候也可以这样想：把最可能出现的条件放在前面，把最不可能出现的条件放在后面，这样程序执行时总会按照写的逻辑的先后顺序逐一检测所有的条件，知道发现匹配的条件才会停止继续检测。

if 的优化目标：最小化找到分支之前所判断条件体的数量。
if 优化的方法：将最常见的条件放在首位。

var a = 1;
if(a < 10){
    ...
}else if(a > 10 && a < 100){
   ...
}else{
   ...
}

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;
    }
  });
}

利用 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]);

利用 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());