在for循環(huán)中l(wèi)ength值是否需要緩存

更新時間：2015年07月27日 14:14:07 作者：歐陽隱

這篇文章主要介紹了在for循環(huán)中l(wèi)ength值是否需要緩存,需要的朋友可以參考下

在for循環(huán)中是否需要緩存length值，相信很多程序猿們都糾結(jié)過此問題，下面就這一問題的分析請看下文：

在JS性能優(yōu)化中，有一個常見的小優(yōu)化，即

// 不緩存 
for (var i = 0; i < arr.length; i++) {
　　...
}

// 緩存
var len = arr.length;
for (var i = 0; i < len; i++) {
　　...
}

那么，我們就應(yīng)該摒棄這種寫法嗎?不是的，還有另外一種情況，必須使用這種寫法。

請看例子：

復(fù)制代碼代碼如下:

var divs = document.getElementsByTagName("div"), i, div ;

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

　　div = document.createElement("div");

    document.body.appendChild("div");

}

以上代碼會導(dǎo)致無限循環(huán)：第一行代碼會取得所有的div元素的nodelist，由于nodelist是動態(tài)的，因此只要有新的div添加到頁面中，下一次的for循環(huán)就會再對divs.length求值，因此i和divs.length每次都會同時遞增，結(jié)果他們的值永遠不會相等，就創(chuàng)建了一個死循環(huán)。

所以，如果想要迭代一個nodelist最好使用length屬性初始化第二個變量，然后將迭代器與該變量進行比較，修改后的代碼如下：

復(fù)制代碼代碼如下:

var divs = document.getElementsByTagName("div"), i, div ,len ;

for(i=0;len=divs.length;i<len;i++){

　　div = document.createElement("div");

　　document.body.appendChild("div");

}

這個例子中初始化了len，由于len中保存著divs.length在循環(huán)開始時的一個快照，因此會避免上一個例子中出現(xiàn)的無限循環(huán)問題，因此當(dāng)需要對nodelist進行循環(huán)迭代的時候，使用這種方法更為保險。

總結(jié)：
1.將length的值進行緩存，到底是否有利于性能優(yōu)化，是一個需要根據(jù)具體情況進行判斷的事情，總體來講，減少對DOM的訪問還是有好處的；
2.當(dāng)需要操作nodelist的時候，建議將length的值進行緩存，可以避免出現(xiàn)死循環(huán)。

以上內(nèi)容就是針對是否需要緩存length值在for循環(huán)中的全部介紹，希望大家喜歡。

您可能感興趣的文章: