通過實例解析JavaScript for in及for of區別
對數組的遍歷大家最常用的就是for循環,ES5的話也可以使用forEach,ES5具有遍歷數組功能的還有map、filter、some、every、reduce、reduceRight等,只不過他們的返回結果不一樣。但是使用foreach遍歷數組的話,使用break不能中斷循環,使用return也不能返回到外層函數。
那么接下來我們一起看一下for in 和for of 的區別吧。
for in
看一個簡單的例子
//for in 應用于數組Array.prototype.sayHello = function(){ console.log('Hello')}Array.prototype.str = ’world’;var myArray = [1,2,10,30,100];myArray.name=’數組’; for(let index in myArray){ console.log(index);}//輸出結果如下0,1,2,3,4,name,str,sayHello //for in 應用于對象中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);}//輸出結果name,age,str,sayHello//首先輸出的是對象的屬性名,再是對象原型中的屬性和方法,//如果不想讓其輸出原型中的屬性和方法,可以使用hasOwnProperty方法進行過濾for(let index in myObject){ if(myObject.hasOwnProperty(index)){ console.log(index) }}//輸出結果為name,age//你也可以用Object.keys()方法獲取所有的自身可枚舉屬性組成的數組。Object.keys(myObject)
可以看出for in 應用于數組循環返回的是數組的下標和數組的屬性和原型上的方法和屬性,而for in應用于對象循環返回的是對象的屬性名和原型中的方法和屬性。
使用for in 也可以遍歷數組,但是會存在以下問題:
1.index索引為字符串型數字,不能直接進行幾何運算
2.遍歷順序有可能不是按照實際數組的內部順序
3.使用for in會遍歷數組所有的可枚舉屬性,包括原型。例如上栗的原型方法method和name屬性
Object.prototype.sayHello = function(){ console.log(’Hello’);}var myObject = { name:’zhangsan’, age:10} for(let key of myObject){ consoloe.log(key);}//輸出結果//typeError Array.prototype.sayHello = function(){ console.log('Hello');}var myArray = [1,200,3,400,100];for(let key of myArray){ console.log(key);}//輸出結果1,200,3,400,100
for in遍歷的是數組的索引(即鍵名),而for of遍歷的是數組元素值。 所以for in更適合遍歷對象,不要使用for in遍歷數組。JavaScript for in 和 for of 的區別
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。
相關文章:
