for...in 与 for...of 的区别

参考自:https://segmentfault.com/q/1010000006658882

for...in循环的是key。for...of循环的是value

结论:

  1. 推荐在循环对象属性的时候,使用for...in,在遍历数组的时候的时候使用for...of。

  2. for...in循环出的是key,for...of循环出的是value

  3. 注意,for...of是ES6新引入的特性。修复了ES5引入的for...in的不足

  4. for...of不能循环普通的对象,需要通过和Object.keys()搭配使用

示例:

假设我们要遍历一个数组的valuelet aArray = ['a',123,{a:'1',b:'2'}]:
  1. 使用for...in循环:
for(let index in aArray){
    console.log(`${aArray[index]}`);
}
// index为索引
// a
// 123
// [object Object]
  1. 使用for...of循环:
for(var value of aArray){
    console.log(value);
}
// a
// 123
// {a: "1", b: "2"}
作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性。

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

  • 假设往数组添加一个属性name: aArray.name = 'demo',再分别查看上面写的两个循环
for(let index in aArray){
    console.log(`${aArray[index]}`);  //Notice!!aArray.name也被循环出来了
}
// a
// 123
// [object Object]
// demo


for(var value of aArray){
    console.log(value);
}
// a
// 123
// {a: "1", b: "2"}

如果实在想用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]);
}
// name: wujunchuan
// 25 age: 22
// 25 locate: [object Object]

你可能感兴趣的:(for...in 与 for...of 的区别)