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

更新時(shí)間：2014年02月11日 10:12:02 作者：

for-in遍歷方式的循環(huán)計(jì)數(shù)器是字符串類型，遍歷對(duì)象時(shí)為對(duì)象屬性/方法名，遍歷數(shù)組時(shí)為數(shù)組元素下標(biāo)索引，與普通的for循環(huán)不同,需要的朋友可以參考下

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

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

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

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

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

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

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

JavaScript中yield實(shí)用簡(jiǎn)潔實(shí)現(xiàn)方式
原以為是一個(gè)蠻復(fù)雜的題目，想了許久沒思路，當(dāng)然要實(shí)現(xiàn)絕對(duì)能實(shí)現(xiàn)，但如果分析JavaScript腳本或是動(dòng)態(tài)產(chǎn)生代碼，都太復(fù)雜了。
2010-06-06
javascript實(shí)現(xiàn)左右緩動(dòng)動(dòng)畫函數(shù)
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)左右緩動(dòng)動(dòng)畫函數(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
ionic 上拉菜單(ActionSheet)實(shí)例代碼
ionic js 上拉菜單(ActionSheet)通過往上彈出的框，來讓用戶選擇選項(xiàng)；點(diǎn)擊取消按鈕或者點(diǎn)擊空白的地方來讓它消失。本文給大家分享實(shí)現(xiàn)代碼，感興趣的朋友一起看看吧
2016-06-06
前端實(shí)現(xiàn)各種類型文件保存的方案總結(jié)
在Web開發(fā)中,文件下載是常見的交互需求,本文將系統(tǒng)總結(jié)前端實(shí)現(xiàn)文件保存的三大核心場(chǎng)景（圖片、文本、網(wǎng)頁）及對(duì)應(yīng)技術(shù)方案,幫助開發(fā)者根據(jù)具體需求選擇最優(yōu)解,需要的朋友可以參考下
2025-04-04
javascript concat數(shù)組累加示例
javascript concat數(shù)組累加使用實(shí)例。
2009-09-09
JavaScript JMap類定義與使用方法示例
這篇文章主要介紹了JavaScript JMap類定義與使用方法,涉及javascript類的定義、內(nèi)部變量、函數(shù)的定義及使用相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
淺析JavaScript 函數(shù)防抖和節(jié)流
這篇文章主要介紹了JavaScript 函數(shù)防抖和節(jié)流的相關(guān)資料，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
2020-07-07
淺談FastClick 填坑及源碼解析
這篇文章主要介紹了淺談FastClick 填坑及源碼解析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-03-03
JavaScript 上萬關(guān)鍵字瞬間匹配實(shí)現(xiàn)代碼
發(fā)一篇之前寫的文章，平時(shí)還是經(jīng)常用到的，尤其是河蟹詞特別多的聊天系統(tǒng)里
2013-07-07
JavaScript多態(tài)與封裝實(shí)例分析
這篇文章主要介紹了JavaScript多態(tài)與封裝,結(jié)合實(shí)例形式分析了JavaScript多態(tài)與封裝的概念、功能、優(yōu)缺點(diǎn)以及相關(guān)問題與注意事項(xiàng),需要的朋友可以參考下
2018-07-07