视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript条件语句的性能问题
2020-11-27 20:24:38 责编:小采
文档

条件语句

和循环一样,条件语句同样会改变运行流
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变量
    这种场合非常适合使用三目运算符


    下载本文
    显示全文
    专题