大家都知道在JavaScript中提供了兩種方式迭代對象：

• for 循環(huán)；
• for..in循環(huán)；
  

一、for循環(huán)

不足：

在于每次循環(huán)的時候數(shù)組的長度都要去獲?。?br /> 終止條件要明確；
在for循環(huán)中，你可以循環(huán)取得數(shù)組或是數(shù)組類似對象的值，譬如arguments和HTMLCollection對象。通常的循環(huán)形式如下：

// 次佳的循環(huán)
for (var i = 0; i < myarray.length; i++) {
 // 使用myarray[i]做點什么
}

這種形式的循環(huán)的不足在于每次循環(huán)的時候數(shù)組的長度都要去獲取下。這回降低你的代碼性能，尤其當myarray不是數(shù)組，而是一個HTMLCollection對象的時候。

HTMLCollections指的是DOM方法返回的對象，例如：

document.getElementsByName()
document.getElementsByClassName()
document.getElementsByTagName()

還有其他一些HTMLCollections，這些是在DOM標準之前引進并且現(xiàn)在還在使用的。有：

document.images: 頁面上所有的圖片元素
document.links : 所有a標簽元素
document.forms : 所有表單
document.forms[0].elements : 頁面上第一個表單中的所有域

集合的麻煩在于它們實時查詢基本文檔（HTML頁面）。這意味著每次你訪問任何集合的長度，你要實時查詢DOM，而DOM操作一般都是比較昂貴的。

這就是為什么當你循環(huán)獲取值時，緩存數(shù)組(或集合)的長度是比較好的形式，正如下面代碼顯示的：

for (var i = 0, max = myarray.length; i < max; i++) {
 // 使用myarray[i]做點什么
}

這樣，在這個循環(huán)過程中，你只檢索了一次長度值。

在所有瀏覽器下，循環(huán)獲取內(nèi)容時緩存HTMLCollections的長度是更快的，2倍(Safari3)到190倍(IE7)之間。//此數(shù)據(jù)貌似很老

注意到，當你明確想要修改循環(huán)中的集合的時候（例如，添加更多的DOM元素），你可能更喜歡長度更新而不是常量。

伴隨著單var形式，你可以把變量從循環(huán)中提出來，就像下面這樣：

function looper() {
 var i = 0,
  max,
  myarray = [];
 // ...
 for (i = 0, max = myarray.length; i < max; i++) {
  // 使用myarray[i]做點什么
 }
}

這種形式具有一致性的好處，因為你堅持了單一var形式。不足在于當重構(gòu)代碼的時候，復制和粘貼整個循環(huán)有點困難。例如，你從一個函數(shù)復制了一個循環(huán)到另一個函數(shù)，你不得不去確定你能夠把i和max引入新的函數(shù)（如果在這里沒有用的話，很有可能你要從原函數(shù)中把它們刪掉）。

最后一個需要對循環(huán)進行調(diào)整的是使用下面表達式之一來替換i++。

i = i + 1
i += 1

JSLint提示您這樣做，原因是++和–-促進了“過分棘手(excessive trickiness)”。如果你直接無視它，JSLint的plusplus選項會是false（默認是default）。

兩種變化的形式：

• 少了一個變量(無max)
• 向下數(shù)到0，通常更快，因為和0做比較要比和數(shù)組長度或是其他不是0的東西作比較更有效率01
  

//第一種變化的形式：

var i, myarray = [];
for (i = myarray.length; i–-;) {
 // 使用myarray[i]做點什么
}

//第二種使用while循環(huán)：

var myarray = [],
 i = myarray.length;
while (i–-) {
 // 使用myarray[i]做點什么
}

這些小的改進只體現(xiàn)在性能上，此外JSLint會對使用i–-加以抱怨。

二、for …in 循環(huán)—也被稱為“枚舉”

for …in 循環(huán)經(jīng)常用來迭代對象的屬性或數(shù)組的每個元素，for…in循環(huán)中的循環(huán)計數(shù)器是字符串，而不是數(shù)字。它包含當前屬性的名稱或當前數(shù)組元素的索引。 下面直接上幾個例子：

當遍歷一個對象的時候，變量 i 也就是循環(huán)計數(shù)器 為 對象的屬性名 ：

//使用for..in循環(huán)遍歷對象屬性 
varperson={ 
 name: "Admin", 
 age: 21, 
 address:"shandong" 
}; 
for(var i in person){ 
 console.log(i); 
} 

執(zhí)行結(jié)果為：

name

age

address

當遍歷一個數(shù)組的時候，變量 i 也就是循環(huán)計數(shù)器 為 當前數(shù)組元素的索引 ：

//使用for..in循環(huán)遍歷數(shù)組 
vararray = ["admin","manager","db"] 
for(vari in array){ 
 console.log(i); 
} 

執(zhí)行結(jié)果：

0

1

2

但是，現(xiàn)在看來for .. in循環(huán)還挺好用啊，不過，別高興太早，看看下面的例子：

var array =["admin","manager","db"]; 
//給Array的原型添加一個name屬性 
Array.prototype.name= "zhangsan"; 
for(var i in array){ 
 alert(array[i]); 
} 

運行結(jié)果：

admin

manager

db

zhangsan
咦，奇觀了，怎么平白無故的冒出來一個zhangsan
現(xiàn)在，再看看使用 for循環(huán)會怎樣？

vararray = ["admin","manager","db"]; 
//給Array的原型添加一個name屬性 
Array.prototype.name = "zhangsan"; 
for(var i =0 ; i<array.length; i++){ 
 alert(array[i]); 
}; 

運行結(jié)果：

admin

manager

db
哦， 現(xiàn)在明白了，for..in循環(huán)會把某個類型的原型(prototype)中方法與屬性給遍歷出來，所以這可能會導致代碼中出現(xiàn)意外的錯誤。為了避免這個問題，我們可以使用對象的hasOwnProperty()方法來避免這個問題，如果對象的屬性或方法是非繼承的，那么hasOwnProperty() 方法返回true。即這里的檢查不涉及從其他對象繼承的屬性和方法，只會檢查在特定對象自身中直接創(chuàng)建的屬性。

vararray = ["admin","manager","db"]; 
Array.prototype.name= "zhangshan"; 
for(var i in array){ 
//如果不是該對象自身直接創(chuàng)建的屬性（也就是該屬//性是原型中的屬性），則跳過顯示 
 if(array.hasOwnProperty(i)){ 
  alert(array[i]); 
  }
} 

運行結(jié)果：

admin

manager

db
另外一種使用hasOwnProperty()的形式是取消Object.prototype上的方法。像這樣：

// 對象
var man = {
 hands: 2,
 legs: 2,
 heads: 1
};
for (var i in man) {
 if (Object.prototype.hasOwnProperty.call(man, i)) { // 過濾
  console.log(i, ":", man[i]);
 }
}

其好處在于在man對象重新定義hasOwnProperty情況下避免命名沖突。也避免了長屬性查找對象的所有方法，你可以使用局部變量“緩存”它。

var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) {
 if (hasOwn.call(man, i)) { // 過濾
  console.log(i, ":", man[i]);
 }
}

嚴格來說，不使用hasOwnProperty()并不是一個錯誤。根據(jù)任務以及你對代碼的自信程度，你可以跳過它以提高些許的循環(huán)速度。但是當你對當前對象內(nèi)容（和其原型鏈）不確定的時候，添加hasOwnProperty()更加保險些。

格式化的變化（通不過JSLint）會直接忽略掉花括號，把if語句放到同一行上。其優(yōu)點在于循環(huán)語句讀起來就像一個完整的想法（每個元素都有一個自己的屬性”X”，使用”X”干點什么）：

// 警告： 通不過JSLint檢測
var i, hasOwn = Object.prototype.hasOwnProperty;
for (i in man) if (hasOwn.call(man, i)) { // 過濾
 console.log(i, ":", man[i]);
}

以上就是介紹了JavaScript提供的兩種方式迭代對象：for循環(huán)和for...in循環(huán)，希望這篇文章對大家的學習有所幫助。

最新評論