快捷導(dǎo)航

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

更新時(shí)間：2015年07月27日 14:14:07 作者：歐陽(yáng)隱

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

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

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

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

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

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

請(qǐng)看例子：

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

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

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

　　div = document.createElement("div");

    document.body.appendChild("div");

}

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

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

復(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");

}

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

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

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

您可能感興趣的文章: