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

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

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

摘要：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()方法。

您可能感興趣的文章:

微信小程序如何在頁面跳轉時進行頁面導航
小程序能夠在不同的頁面進行跳轉切換,路由起到了至關重要的作用,下面這篇文章主要給大家介紹了關于微信小程序如何在頁面跳轉時進行頁面導航的相關資料,需要的朋友可以參考下
2022-09-09
JavaScript獲取當前cpu使用率的方法
這篇文章主要介紹了JavaScript獲取當前cpu使用率的方法,涉及JavaScript針對系統(tǒng)硬件操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-12-12
javascript實現(xiàn)的圖片預覽功能
這篇文章主要介紹了javascript實現(xiàn)的圖片預覽功能,結合實例形式分析了javascript針對圖片預覽相關功能實現(xiàn)技巧與注意事項,需要的朋友可以參考下
2017-03-03
js 判斷附件后綴的簡單實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 判斷附件后綴的簡單實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
js獲取日期：昨天今天和明天、后天
這篇文章主要介紹了js獲取日期，可以獲取前天、昨天、今天、明天、后天,需要的朋友可以參考下
2014-06-06
原生JavaScript實現(xiàn)異步多文件上傳
這篇文章主要介紹了原生JavaScript實現(xiàn)異步多文件上傳，感興趣的小伙伴們可以參考一下
2015-12-12
Grid得到選擇行數(shù)據(jù)的方法總結
Grid得到選擇行數(shù)據(jù)的方法總結，需要的朋友可以參考下。
2011-01-01
JavaScript中判斷數(shù)據(jù)類型的方法總結
這篇文章主要為大家詳細介紹了一些JavaScript中判斷數(shù)據(jù)類型的方法，文中的示例代碼講解詳細，具有一定的學習價值，需要的小伙伴可以了解一下
2023-07-07
echarts中圖例右置且豎排完整代碼
這篇文章主要給大家介紹了關于echarts中圖例右置且豎排的相關資料,Echarts可以幫助我們快速構建柱狀圖、餅圖、條形圖,這對于多圖形化展示數(shù)據(jù)來說尤其方便,可幫助我們快速開發(fā),需要的朋友可以參考下
2023-08-08
詳解Javascript中document.execCommand()的用法以及指令參數(shù)列表
execCommand方法是執(zhí)行一個對當前文檔，當前選擇或者給出范圍的命令。在HTML5中，execCommand可以通過JavaScript代碼來調用，使得開發(fā)者可以在網(wǎng)頁中實現(xiàn)一些復雜的文本操作。在HTML編輯器中這個命令用得很多，酷炫的強大功能。
2023-07-07