cocos JS 幾種迴圈遍曆對象的比較

標籤：屬性   ++   選取器   firefox   com   htm   object   key   body   

通常我們會用迴圈的方式來遍曆數組。但是迴圈是 導致js 效能問題的原因之一。一般我們會採用下幾種方式來進行數組的遍曆：

方式1：

for in 迴圈：

　　var arr = [1,2,3,4,5];

　　var obj = { a : 1, b : 2, c : 3 };

　　for( var item in arr|obj ){

　　　　fn(item){
　　　　　// do sth with arr[item];

　　　　　//do sth wtih obj[item];
　　　　};

　　}

這裡的 item：

• array 的索引值，對應於 arr 的下標值；
• object 的 key 值，對應於 obj 的 a,b,c；

方式2：

for 迴圈：

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

　　　　//do sth with arr[i];

　　}

這兩種方法應該非常常見且使用很頻繁。但實際上，這兩種方法都存在效能問題。

在方式一中，for-in 需要分析出array 的每個屬性，這個操作效能開銷很大。用在 key 已知的數組上是非常不划算的。所以盡量不要用 for-in，除非你不清楚要處理哪些屬性，例如 JSON 對象這樣的情況。

在方式2中，迴圈每進行一次，就要檢查一下數組長度。讀取屬性（數組長度）要比讀局部變數慢，尤其是當 array 裡存放的都是 DOM 元素，因為每次讀取都會掃描一遍頁面上的選取器相關元素，速度會大大降低。

所以這時候我們就有必要對方式2進行最佳化。

加速的 ：

var arr = [1,2,3,4,5];

var length =arr.length;

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

　　fn(arr[i]);

}

現在只需要讀取一次 array 的 length 屬性，速度已經加快了。但是還能不能更快呢？

事實是，如果迴圈終止條件不進行比較運算，那麼迴圈的速度還可以更快。

加速且優雅的：

 var arr = [1,2,3,4,5];

var i = arr.length;

while(i--){

　　fn(arr[i]);

}

方式 3：

forEach:

var arr = [1,2,3,4,5];

arr.forEach(

　　fn(value,index){

　　　　//Do sth with value ;

　　}

)

注意：

• 這裡的 forEach回調中兩個參數分別為 value，index，其位置剛好和 jQuery 的$.each 相反；
• forEach 無法遍曆對象；
• IE不支援該方法；Firefox 和 chrome 支援；
• forEach 無法使用 break，continue 跳出迴圈，且使用 return 是跳過本次迴圈；
• 可以添加第二個參數，為一個數組，回調中的 this 會指向這個數組，若沒有添加，則是指向 window；

關於跳出迴圈的幾種方式：

• return ==》結束迴圈並中斷函數執行；
• break ==》結束迴圈函數繼續執行；
• continue ==》跳過本次迴圈；
• for 迴圈中的變數 i，由於 ES5並沒有塊級範圍的存在，它在迴圈結束以後仍然存在於記憶體中，所以建議使用函數自執行的方式來避免；

 

cocos JS 幾種迴圈遍曆對象的比較