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ì)象：
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ù)組
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是一致的）
如果代碼中加入：
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()方法。
除了傳統(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()方法。
您可能感興趣的文章:
- jQuery的Each比JS原生for循環(huán)性能慢很多的原因
- javascript for循環(huán)設(shè)法提高性能
- JS常用的幾種數(shù)組遍歷方式以及性能分析對(duì)比實(shí)例詳解
- JavaScript遍歷數(shù)組的三種方法map、forEach與filter實(shí)例詳解
- JS數(shù)組的遍歷方式for循環(huán)與for...in
- js中的for如何實(shí)現(xiàn)foreach中的遍歷
- JavaScript中的數(shù)組遍歷forEach()與map()方法以及兼容寫法介紹
- JavaScript forEach()遍歷函數(shù)使用及介紹
- javascript forEach通用循環(huán)遍歷方法
- JS 使用for循環(huán)遍歷子節(jié)點(diǎn)查找元素
- javascript for循環(huán)性能測(cè)試示例
相關(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)頁(yè)）及對(duì)應(yīng)技術(shù)方案,幫助開發(fā)者根據(jù)具體需求選擇最優(yōu)解,需要的朋友可以參考下2025-04-04
javascript concat數(shù)組累加使用實(shí)例。2009-09-09
這篇文章主要介紹了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 填坑及源碼解析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
JavaScript 上萬(wàn)關(guān)鍵字瞬間匹配實(shí)現(xiàn)代碼
發(fā)一篇之前寫的文章，平時(shí)還是經(jīng)常用到的，尤其是河蟹詞特別多的聊天系統(tǒng)里2013-07-07
這篇文章主要介紹了JavaScript多態(tài)與封裝,結(jié)合實(shí)例形式分析了JavaScript多態(tài)與封裝的概念、功能、優(yōu)缺點(diǎn)以及相關(guān)問題與注意事項(xiàng),需要的朋友可以參考下2018-07-07