首頁 > web前端 > js教程 > 主體

JavaScript條件語句的效能問題

黄舟
發布: 2017-02-28 14:48:19
原創
1023 人瀏覽過

條件語句

和循環一樣,條件語句同樣會改變運行流
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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板