對(duì)數(shù)組的遍歷大家最常用的就是for循環(huán)，ES5的話也可以使用forEach，ES5具有遍歷數(shù)組功能的還有map、filter、some、every、reduce、reduceRight等，只不過(guò)他們的返回結(jié)果不一樣。但是使用foreach遍歷數(shù)組的話，使用break不能中斷循環(huán)，使用return也不能返回到外層函數(shù)。

那么接下來(lái)我們一起看一下for in 和for of 的區(qū)別吧。

for in

看一個(gè)簡(jiǎn)單的例子

//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)用于對(duì)象中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//首先輸出的是對(duì)象的屬性名，再是對(duì)象原型中的屬性和方法，//如果不想讓其輸出原型中的屬性和方法，可以使用hasOwnProperty方法進(jìn)行過(guò)濾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)用于對(duì)象循環(huán)返回的是對(duì)象的屬性名和原型中的方法和屬性。

使用for in 也可以遍歷數(shù)組，但是會(huì)存在以下問(wèn)題：

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更適合遍歷對(duì)象，不要使用for in遍歷數(shù)組。JavaScript for in 和 for of 的區(qū)別

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。