在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)該摒棄這種寫法嗎?不是的，還有另外一種情況，必須使用這種寫法。
請看例子：
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é)果他們的值永遠(yuǎn)不會相等，就創(chuàng)建了一個死循環(huán)。
所以，如果想要迭代一個nodelist最好使用length屬性初始化第二個變量，然后將迭代器與該變量進(jìn)行比較，修改后的代碼如下：
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進(jìn)行循環(huán)迭代的時候，使用這種方法更為保險(xiǎn)。
總結(jié)：
1.將length的值進(jìn)行緩存，到底是否有利于性能優(yōu)化，是一個需要根據(jù)具體情況進(jìn)行判斷的事情，總體來講，減少對DOM的訪問還是有好處的；
2.當(dāng)需要操作nodelist的時候，建議將length的值進(jìn)行緩存，可以避免出現(xiàn)死循環(huán)。
以上內(nèi)容就是針對是否需要緩存length值在for循環(huán)中的全部介紹，希望大家喜歡。
相關(guān)文章
JS中簡單的實(shí)現(xiàn)像C#中using功能（有源碼下載）
JS中簡單的實(shí)現(xiàn)像C#中using功能（有源碼下載）...2007-01-01
自定義排序算法在JavaScript中的應(yīng)用小結(jié)
這篇文章主要介紹了自定義排序算法在JavaScript中的應(yīng)用,通過自定義排序函數(shù),我們能夠精確控制數(shù)組元素的排序邏輯,從而滿足各種復(fù)雜的應(yīng)用場景,需要的朋友可以參考下2024-12-12
深入理解JavaScript是如何實(shí)現(xiàn)繼承的
這篇文章主要介紹了JavaScript是如何實(shí)現(xiàn)繼承的，有需要的朋友可以參考一下2013-12-12
Bootstrap導(dǎo)航條學(xué)習(xí)使用(二)
這篇文章主要為大家詳細(xì)介紹了Bootstrap導(dǎo)航條的使用方法第二篇，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
uni-app調(diào)取接口的3種方式以及封裝uni.request()詳解
我們在實(shí)際工作中要將數(shù)據(jù)傳輸?shù)椒?wù)器端,從服務(wù)器端獲取信息,都是通過接口的形式,下面這篇文章主要給大家介紹了關(guān)于uni-app調(diào)取接口的3種方式以及封裝uni.request()的相關(guān)資料,需要的朋友可以參考下2022-08-08
JavaScript實(shí)現(xiàn)的九種排序算法
這篇文章主要給大家介紹了關(guān)于利用JavaScript實(shí)現(xiàn)的九種排序算法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
使用ESLint禁止項(xiàng)目導(dǎo)入特定模塊的方法步驟
這篇文章主要介紹了使用ESLint禁止項(xiàng)目導(dǎo)入特定模塊的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
一直以來都在函數(shù)式編程的大門之外徘徊,要入門的話首先得熟悉各種高階函數(shù),數(shù)組的reduce方法就是其中之一,這篇文章主要給大家介紹了關(guān)于js利用reduce方法讓你的代碼更加優(yōu)雅的相關(guān)資料,需要的朋友可以參考下2021-08-08
本文主要介紹了圖解Javascript——作用域、作用域鏈、閉包等知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了uni-app之APP和小程序微信授權(quán)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05