前端if else之优化多条条件判断代码，为你的项目提速吧！

Posted 2021-10-24 水香木鱼

一、简单的逻辑判断常用的优化方法

1.1 使用 ||

    var a = 1;
    if(a){
        a = 1;
    }else{
        a = 0;
    };
    //可优化为
    a = a || 0;

1.2 使用三元表达式

    var a = 1;
    var b = 2;
    var c = 3;
    var d = 4;
    if(a == b){
        a = c;
    }else{
        a = d;
    }
    //可优化为
    a = (a == b) ? c : d;

1.3 按位异或运算符^

    var a = 1;
    var b = 2;
    var c = 1;
    if(a == c){
        c = b;
    }else if(b == c){
        c = a;
    };
    //可优化为
    c = a ^ b ^ c;

二、复杂的逻辑判断常用的优化方法

2.1 优化if逻辑

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

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

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

以上只有在a值经常出现小于5的时候是最优化的。如果a值经常大于或者等于10的话，那么在进入正确的分支之前，就必须两次运算条件体，导致表达式的平均运算时间增加。if中的条件体应该总是按照从最大概率到最小概率排列，以保证理论速度最快。

2.2 switch/case

switch和if else在性能上是没有什么区别的，主要还是根据需求进行分析和选择。

条件较小的话选用if else比较合适。 条件数量较大的话，就建议选用switch。 在大多数的情况下switch比if else运行的更加快。

    var title = document.querySelector('h1'); //h1节点对象
    var txt = title.innerText; //h1节点文本内容
    var dayText = ''; //星期几 对应的文本
    var date = new Date();  //日期对象
    var day = date.getDay(); //获得 星期几 0 - 6
     
    switch (day) {
        case 0:
            dayText = '日';
            break;
        case 1:
            dayText = '一';
            break;
        case 2:
            dayText = '二';
            break;
        case 3:
            dayText = '三';
            break;
        case 4:
            dayText = '四';
            break;
        case 5:
            dayText = '五';
            break;
        case 6:
            dayText = '六';
            break;
        default:
            break;
    }
     title.innerText = txt.substr(0,5)+ dayText;

上述的逻辑情况在具体的判断选择上，不管是代码的优雅程度还是性能上明显switch是比要if else要优。

2.3 数组映射

在数据查找速度方面，如果能够直接映射到的查找方式绝对比if else判断包括switch的性能好的太多。在js中,熟练的应用数组(包括后面提到的JSON)，不管是在数据的存储方面还是在业务逻辑的优化方面绝对是所有做前端开发者中必须套掌握的。

    //用空间换取时间
    var dayArr = ['天','一','二','三','四','五','六'];
    //用day做下标 指引元素
    dayText = dayArr[day];
    title.innerText = txt.substr(0,5)+ dayText;

上述代码就是通过映射的方式来查找数据，直接省去了诸多的判断过程。

2.4 使用JSON 优化

在前后台传输数据的过程中，现在用的越来越多的传输的数据格式为JSON，第一是因为JSON是基于文本的数据格式，相对于基于二进制的数据，所以JSON在传递的时候是传递符合JSON这种格式的字符串；第二就是JSON比较轻量，即相同数据，以JSON的格式占据的带宽更小，这在有大量数据请求和传递的情况下是有明显优势的。

    //用空间换取时间
    var data = {
        "0" : "日",
        "1" : "一",
        "2" : "二",
        "3" : "三",
        "4" : "四",
        "5" : "五",
        "6" : "六",
    };
    //用key做下标 指引元素
    dayText = data[key];
    title.innerText = txt.substr(0,5)+ dayText;

2.5 重构，用 OO 里面的继承或者组合

优化前逻辑

    如果是乔丹，就是23
    如果是科比，就是24
    如果是韦德，就是3
    如果是麦迪，就是1
    如果都不是，就是0

重构后逻辑，改成OO

    *定义类： 球员（或者接口）
    *定义方法：就是
    *定义子类：乔丹、科比、韦德、麦迪、无
    *重写方法 ---- 就是

未优化前代码if else：

    function getNumber(name) {
       if (name === "乔丹") {
            console.log(23);
        } else if (name === "科比") {
            console.log(24);
        } else if (name === "韦德"){
            console.log(3);
        }else if (name === "麦迪"){
            console.log(1);
        }else{
             console.log(0);
        }
    }

优化后如下：

    function getNumber(name){
        var player = {
            "乔丹" : "23",
            "科比" : "24",
            "韦德" : "3",
            "麦迪" : "1",
            "无"  : "0"
        };
        console.log(player[name] ? player[name] : player["无"] );
    }

2.6一系列的逻辑判断

多重if else 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())

(1)使用 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())

(2)通过数组的方式去优化

function returnWeekday(){

let string = "今天是星期";

let date = new Date().getDay();

// 使用数组

let dateArr = ['天','一','二','三','四','五','六'];

return string + dateArr[date]

}

console.log(returnWeekday())

(3)通过对象的方式去优化

function returnWeekday(){

let string = "今天是星期";

let date = new Date().getDay();

// 使用对象

dateObj = {

0: '天',

1: "一",

2: "二",

3: "三",

4: "四",

5: "五",

6: "六",

};

return string + dateObj[date]

}

console.log(returnWeekday())

(4)使用 charAt 字符方法

// charAt 定位方法

function returnWeekday(){

return "今天是星期" + "日一二三四五六".charAt(new Date().getDay());

}

console.log(returnWeekday())

(5)returnWeekday() 方法不仅返回今天是周几，还需要区分工作日和休息日，调用相关方法。

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

(6)使用 includes 处理多重条件

原：

if( code === '202' || code === '203' || code === '204' ){

someMethod()

}

优化后：

if( ['202','203','204'].includes(code) ){

someMethod()

}