JavaScript条件语句的性能问题

我会带着你远行 2024-04-18 06:51 56阅读 0赞

## 条件语句 ##

和循环一样，条件语句同样会改变运行流  
JavaScript的条件语句分为两种  
if-else和switch

if-else是我们最常用的了  
不过if-else语句与switch语句很多情况都能够互相替换  
比如说下面的代码等价

> if(foo)\{  
> …  
> \}else\{  
> …  
> \}

> switch(foo)\{  
> case true:  
> …  
> default:  
> …  
> \}

条件少的时候大家更倾向于使用if-else  
但是条件多的化switch看起来更容易理解

if(foo === 1){
        ...
    }else if(foo === 2){
        ...
    }else if(foo === 3){
        ...
    }else if(foo === 4){
        ...
    }else{
        ...
    }

switch(foo){
        case 1:
            ...
        case 2:
            ...
        case 3:
            ...
        case 4:
            ...
        default:
            ...
    }

但是我们使用的这两种条件语句哪种性能更好呢  
如果条件数量非常大的话，switch语句运行的更快更明显  
准确的说：条件增加时，if-else性能负担增加程度更大  
（大多数语言switch语句采用 branch table 分支表索引来优化）  
而且在JavaScript中，switch语句是不会发生强制类型转换的，  
也就是使用全等操作符进行比较  
这样就不会有类型转换的损耗

**所以我们在条件数量少时使用if-else，条件数量多时使用switch**  
从性能角度考虑是合理的  
（if-else适用于判断两个离散值或几个不同值域，switch适用于判断多个离散值）

我们在使用if-else语句时，应该按照概率由大变小的顺序排列  
这很好理解，但却很容易被我们忽略  
另外一点优化就是尽量把if-else组织成一系列嵌套的if-else语句  
这就类似于我们数学上的二分法，可以减少范围、减少执行时间  
像这样

if(foo >= 1 && foo < 3){
        //...
    }else if(foo >= 3 && foo < 5){
        //...
    }else if(foo >= 5 && foo < 7){
        //...
    }else{
        //...
    }

改成这样

if(foo >= 1 && foo < 5){
        if(foo < 3){
            //...
        }else{
            //...
        }
    }else{
        if(foo < 7){
            //...
        }else{
            //...
        }
    }

可以提高效率

## 查找表 ##

某些特殊情况，使用“查找表”的方法有着超高的性能，在条件数量很多的情况下

function fn(a){
        switch(a){
            case 0:
                return 0;
            case 1:
                return 1;
            case 2:
                return 2;
            case 3:
                return 3;
            case 4:
                return 4;
            case 5:
                return 5;
            case 6:
                return 6;
            case 7:
                return 7;
        }
    }

把上面的函数重构成这样

function fn(a){
        var retArr = [0,1,2,3,4,5,6,7];
        return retArr[a];
    }

这样不仅简洁，可读性好，而且性能也更佳  
在条件数量越来越多时，查找表也几乎不会产生额外的性能开销  
不过它更适用于单个键与单个值之间存在逻辑映射的情况

## 三目运算符 ##

还有一个和条件语句很像的三目运算符  
？ ：  
就相当于if-else  
三目运算符更适用于关注返回值的情景  
什么意思呢，看下面的代码

var foo;;
    if(flag){
        foo = 1;
    }else{
        foo = 2;
    }

改写成这样更好

var foo = flag ? 1 : 2;

关注的是flag ? 1 : 2的返回值  
直接赋值给foo变量  
这种场合非常适合使用三目运算符