JavaScript中for-in遍歷方式示例介紹

2019-11-20 21:08:19

字體：大中小

來源：轉載

供稿：網(wǎng)友

摘要：for-in遍歷方式的循環(huán)計數(shù)器是字符串類型，遍歷對象時為對象屬性/方法名，遍歷數(shù)組時為數(shù)組元素下標索引，與普通的for循環(huán)不同，for-in會將繼承的屬性/方法列出，這一點在使用時需要特別關注。

除了傳統(tǒng)的for循環(huán)，JavaScript為遍歷操作定義了for-in方式，根據(jù)數(shù)據(jù)源的不同，在使用時存在差異。
（1）遍歷對象：

復制代碼代碼如下:

 
var fish = { 
head : 1, 
tail : 1, 
} 
for(var prop in fish) { 
console.log(fish[prop]); 
} 

調試時觀察：prop依次為'head','tail',即遍歷對象屬性時是以字符串類型存在的，循環(huán)計數(shù)器為對象的屬性名。
（2）遍歷數(shù)組

復制代碼代碼如下:

 
var arr = ['one', 'two', 'three']; 
for(var prop in arr) { 
console.log(prop); 
} 

調試時觀察：prop依次為'0','1',即遍歷數(shù)組時仍是以字符串類型存在，不同的是循環(huán)計數(shù)器為數(shù)組元素的下標。（這時可以試試用for循環(huán)輸出，結果與for-in是一致的）
如果代碼中加入：

復制代碼代碼如下:

 
if(Object.prototype.clone === 'undefined') 
Object.prototype.clone = function() {}; 

則輸出結果為：0,1,clone
如果這時用for循環(huán)輸出，則仍為0,1；也就是說for-in循環(huán)會將當前操作的數(shù)據(jù)源所屬類型具有的屬性遍歷出來（同樣對對象fish用for-in時，也會輸出clone），所以就要求在使用for-in遍歷時拉著一根弦：如果僅對對象自有屬性操作，需要將繼承來的屬性加以剔除，比如用hasOwnProperty()方法。

上一篇：Eclipse去除js(JavaScript)驗證錯誤

下一篇：Chrome擴展頁面動態(tài)綁定JS事件提示錯誤