對(duì)數(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è)簡(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)行過濾
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ì)存在以下問題:
1.index索引為字符串型數(shù)字,不能直接進(jìn)行幾何運(yùn)算
2.遍歷順序有可能不是按照實(shí)際數(shù)組的內(nèi)部順序
3.使用for in會(huì)遍歷數(shù)組所有的可枚舉屬性席舍,包括原型布轿。例如上栗的原型方法method和name屬性
##### for of
```
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ù)組。