先说结论：

推荐在循环对象属性的时候，使用for...in,在遍历数组的时候的时候使用for...of。
for...in循环出的是key，for...of循环出的是value
注意，for...of是ES6新引入的特性。修复了ES5引入的for...in的不足
for...of不能循环普通的对象，需要通过和Object.keys()搭配使用

假设我们要遍历一个数组的valuelet aArray = ['a',123,{a:'1',b:'2'}]

使用for...in循环：

for(let index in aArray){
    console.log(`${aArray[index]}`);
}

使用for...of循环：

for(var value of aArray){
    console.log(value);
}

咋一看好像好像只是写法不一样而已，那为什么说for...of修复了for...in的缺陷和不足。
假设我们往数组添加一个属性name:
aArray.name = 'demo',再分别查看上面写的两个循环：

for(let index in aArray){
    console.log(`${aArray[index]}`); //Notice!!aArray.name也被循环出来了
}
for(var value of aArray){
    console.log(value);
}

所以说，作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性。

for...of循环不会循环对象的key，只会循环出数组的value，因此for...of不能循环遍历普通对象,对普通对象的属性遍历推荐使用for...in

如果实在想用for...of来遍历普通对象的属性的话，可以通过和Object.keys()搭配使用，先获取对象的所有key的数组
然后遍历：

var student={
    name:'wujunchuan',
    age:22,
    locate:{
    country:'china',
    city:'xiamen',
    school:'XMUT'
    }
}
for(var key of Object.keys(student)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key+": "+student[key]);
}

迭代器和for-of循环

最早的数组遍历方式

var a = ["a", "b", "c"];
for(var index = 0;index < a.length;index++){
  console.log(a[index]);
}

自从ES5发布以后,可以用内建的forEach来遍历数组

var a = ["a", "b", "c"];
a.forEach(function(element) {
    console.log(element);
});

简洁了许多不是,但是你不能使用break来退出循环, 不能使用return语句来返回到外层

当然你也可以使用for循环语法来遍历数组,那么你一定会想到for-in

var a = ["a", "b", "c"];
for(var index in a){
//   console.log(a[index]);
  console.log(typeof index);
}

这是一个糟糕的选择!

赋值给index并不是一个数字,而是一个String,可能无意进行字符串计算,这给编程带来不便

作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性,举个例子,如果你的数组中有一个课枚举的类型a.name,那么循环将额外执行一次,遍历到名为name的索引,甚至数组原型链上的属性都能被访问到

这段代码可能按照随机顺序遍历数组

for-in 这个代码是为普通对象设计的,不适用于数组的遍历

var a = ["a", "b", "c"];
for(var value of a){
  console.log("for of:"+value);
}

这个方法是最简洁的,并且修复了for-in循环的所有缺点,与forEach()不同的是,它可以正确的响应break,contine,return语句

不仅如此,for-of还可以支持大部分的类数组对象注意:for-of循环不支持普通对象,但是如果你想迭代一个对象的属性,可以使用for-in循环(这也是它的本职工作)或者内建的Object.keys()方法

var student={
    name:'wujunchuan',
    age:22,
    locate:{
    country:'china',
    city:'xiamen',
    school:'XMUT'
    }
}
for(var key of Object.keys(student)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key+": "+student[key]);
}

那还不如用for-in

for(var prop in  student){
  console.log(prop+': '+student[prop]);
}

迭代器和for-of循环（转自wujunchuan 的github）

迭代器和for-of循环

猜你喜欢