DIV CSS 佈局教程網

通常我們會用循環的方式來遍歷數組。但是循環是 導致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並沒有塊級作用域的存在，它在循環結束以後仍然存在於內存中，所以建議使用函數自執行的方式來避免；