通過實(shí)例解析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
看一個(gè)簡單的例子
//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方法進(jìn)行過濾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ù)組的下標(biāo)和數(shù)組的屬性和原型上的方法和屬性,而for in應(yīng)用于對象循環(huán)返回的是對象的屬性名和原型中的方法和屬性。
使用for in 也可以遍歷數(shù)組,但是會(huì)存在以下問題:
1.index索引為字符串型數(shù)字,不能直接進(jìn)行幾何運(yùn)算
2.遍歷順序有可能不是按照實(shí)際數(shù)組的內(nèi)部順序
3.使用for in會(huì)遍歷數(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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 基于javaweb+jsp實(shí)現(xiàn)企業(yè)財(cái)務(wù)記賬管理系統(tǒng)2. Java 生成帶Logo和文字的二維碼3. asp讀取xml文件和記數(shù)4. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案5. XHTML 1.0:標(biāo)記新的開端6. python中的socket實(shí)現(xiàn)ftp客戶端和服務(wù)器收發(fā)文件及md5加密文件7. xml中的空格之完全解說8. python 實(shí)現(xiàn)圖片修復(fù)(可用于去水印)9. 怎樣才能用js生成xmldom對象,并且在firefox中也實(shí)現(xiàn)xml數(shù)據(jù)島?10. Javaweb工程運(yùn)行報(bào)錯(cuò)HTTP Status 404解決辦法
