[Javascript] for loop vs for-in loop 與效能改善

2013-09-05

5100
0
Javascript
2013-09-05

摘要:[Javascript] for vs for-in

Logo

for loop 介紹

引用W3C school上的內容

Loops are handy, if you want to run the same code over and over again, each time with a different value. Often this is the case when working with arrays:

這邊他也特別說明幾種迴圈，引用上面的出處的內容

for - loops through a block of code a number of times
for/in - loops through the properties of an object
while - loops through a block of code while a specified condition is true
do/while - also loops through a block of code while a specified condition is true

這邊很簡單的說明了一般For,while,do/while 這三個類型的loop都是可以取得一整群物件或是重復做某動作時使用，只有for/in 是取得物件內屬性(properties)時使用

在使用for/in loop的時候需要注意因為物件屬性在被存入物件的時候會以key-value的方式存放，物件內屬性排序是依照屬性名稱去排序的，有時會發生你宣告的順序與讀出的順序不同的情況，如下：

//變數宣告
var items=[1,2,3,4,5],
    items_ch=["tse","123","abc","gg","中文"],
    item={
      "first":"first",
      "2":"2",
      "34":"34",
      "1":"1",
      "second":"second"
    };

上面三種物件只有item是單一物件其他都是陣列的方式，這邊使用for loop與for-in loop來比較一下呈現結果

for與for-in比較

可以看到在讀出屬性時他的順序的確是按照key值去排序，而不是按照我們宣告的順序(properties本來宣告也就沒再分順序)，使用時要稍微注意一下

更有效的使用for loop

原始的迴圈版本

for(var i=0;i<items.length;i++){

}

調整1：將items.length宣告成一個變數，並讓迴圈的判斷改成每次去比對該變數

for(var i=0;i<items.length;i++){

}

調整2：將迴圈改為遞減至0

for(var i=items.length;i>0;i--){

}

調整3:透過while迴圈改善

var i=items.length;
while(i--){

}

三者的實際比較可以看下圖(測試的電腦為mac air 2011 cpu i5，1.7 GHz (i5-2557M) dual-core Intel Core i5 with 3 MB shared L3 cache)

效能圖

這邊也額外加上了for-in loop的比較，由此可知錯用for-in loop來跑真的是一件很可怕的事情....(跟原本的迴圈比降低了90%以上的效能)

而改善二跟改善三在我桌機上(i7 3770) 基本上秒數是一樣差不了太多，效能改善跟原本的相比改善二跟改善三大概差了1%左右

結語

以自己開發上來說我會盡量作改善三，少部分情況我也會只做改善一而已(迴圈內數量不大且沒雙層迴圈的情況)

小小的一個迴圈可能就可以讓你的程式效能差距甚遠，改善一只是將變數往前提出宣告就可以進步10%的效能，這可能是CP值最高的必修項目了，而如果你錯用for-in再跑迴圈的話可能會跑到哭出來，在這邊分享心得給大家一下摟，如果有更好的寫法也麻煩提出建議讓小弟也學習一下～！

題外話-撰寫保持ＣＰＵ使用率在50%的程式

因為在跑for loop 每次透過console.log印出結果時發現CPU會飆到100％，這時我想到幾年前看過一個號稱是微軟面試程式人員的題目，要面試人員寫出一個可以讓CPU維持50%運作情況的程式，這邊我們可以透過for loop + setTimeout 來作，程式如下：

setInterval("doLoop()",300);
function doLoop(){
    console.log("do looping...");
    //變數宣告與前置處理
    var items=[];
    for(var i=0;i<5150;i++){
        items.push(i);
    }
    for(var i=0,itemLength=items.length;i<itemLength;i++){
        console.log("");
    }
}

Mac的用戶可以用iStat pro來看，結果截圖如下

50%圖