首页 > web前端 > js教程 > JavaScript条件语句的性能问题

JavaScript条件语句的性能问题

黄舟
发布: 2017-02-28 14:48:19
原创
1029 人浏览过

条件语句

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


以上就是JavaScript中条件语句的性能问题
虽然我们很少用到条件数量很大的情况
而且现代浏览器js引擎还特别强大(比如V8引擎[]~( ̄▽ ̄)~*)
不过了解一下没坏处…

 以上就是JavaScript条件语句的性能问题的内容,更多相关内容请关注PHP中文网(www.php.cn)!


来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板