通過實例解析JavaScript for in及for of區(qū)別
對數(shù)組的遍歷大家最常用的就是for循環(huán),ES5的話也可以使用forEach,ES5具有遍歷數(shù)組功能的還有map、filter、some、every、reduce、reduceRight等,只不過他們的返回結(jié)果不一樣。但是使用foreach遍歷數(shù)組的話,使用break不能中斷循環(huán),使用return也不能返回到外層函數(shù)。
那么接下來我們一起看一下for in 和for of 的區(qū)別吧。
for in
看一個簡單的例子
//for in 應(yīng)用于數(shù)組Array.prototype.sayHello = function(){ console.log('Hello')}Array.prototype.str = ’world’;var myArray = [1,2,10,30,100];myArray.name=’數(shù)組’; for(let index in myArray){ console.log(index);}//輸出結(jié)果如下0,1,2,3,4,name,str,sayHello //for in 應(yīng)用于對象中Object.prototype.sayHello = function(){ console.log(’Hello’);}Obeject.prototype.str = ’World’;var myObject = {name:’zhangsan’,age:100}; for(let index in myObject){ console.log(index);}//輸出結(jié)果name,age,str,sayHello//首先輸出的是對象的屬性名,再是對象原型中的屬性和方法,//如果不想讓其輸出原型中的屬性和方法,可以使用hasOwnProperty方法進行過濾for(let index in myObject){ if(myObject.hasOwnProperty(index)){ console.log(index) }}//輸出結(jié)果為name,age//你也可以用Object.keys()方法獲取所有的自身可枚舉屬性組成的數(shù)組。Object.keys(myObject)
可以看出for in 應(yīng)用于數(shù)組循環(huán)返回的是數(shù)組的下標和數(shù)組的屬性和原型上的方法和屬性,而for in應(yīng)用于對象循環(huán)返回的是對象的屬性名和原型中的方法和屬性。
使用for in 也可以遍歷數(shù)組,但是會存在以下問題:
1.index索引為字符串型數(shù)字,不能直接進行幾何運算
2.遍歷順序有可能不是按照實際數(shù)組的內(nèi)部順序
3.使用for in會遍歷數(shù)組所有的可枚舉屬性,包括原型。例如上栗的原型方法method和name屬性
Object.prototype.sayHello = function(){ console.log(’Hello’);}var myObject = { name:’zhangsan’, age:10} for(let key of myObject){ consoloe.log(key);}//輸出結(jié)果//typeError Array.prototype.sayHello = function(){ console.log('Hello');}var myArray = [1,200,3,400,100];for(let key of myArray){ console.log(key);}//輸出結(jié)果1,200,3,400,100
for in遍歷的是數(shù)組的索引(即鍵名),而for of遍歷的是數(shù)組元素值。 所以for in更適合遍歷對象,不要使用for in遍歷數(shù)組。JavaScript for in 和 for of 的區(qū)別
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. java加載屬性配置properties文件的方法2. PHP正則表達式函數(shù)preg_replace用法實例分析3. php redis setnx分布式鎖簡單原理解析4. CSS3中Transition屬性詳解以及示例分享5. 什么是Python變量作用域6. js select支持手動輸入功能實現(xiàn)代碼7. 如何在PHP中讀寫文件8. 《Java程序員修煉之道》作者Ben Evans:保守的設(shè)計思想是Java的最大優(yōu)勢9. bootstrap select2 動態(tài)從后臺Ajax動態(tài)獲取數(shù)據(jù)的代碼10. vue使用moment如何將時間戳轉(zhuǎn)為標準日期時間格式
