Js中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属性

for of

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遍历数组。