for...in...与for...of...

for..in

• for..in 循环可以用来遍历对象的可枚举属性列表(包括 [[Prototype]] 链)。
• 实际上for..in遍历的并不是属性值,而是属性名(即键名 key).所以你想获取属性值还是需要手动使用obj[key]来获取.
• 一般在遍历对象时,推荐使用for..in.当然数组也是可以使用for..in的.在遍历数组时,推荐还是使用for..of.

for..of

• ES6 增加了一种用来遍历数组的 for..of 循环语法(如果对象本身定义了迭代器的话也可以遍历对象)
• for..of与for..in最大的不同点是,它循环的是属性值,而不是属性名.不过它只循环数组里存放的值,不会涉及到对象里的key.(关于这个我后面的例子里会说具体对比明的)
• for..of 循环首先会向被访问对象请求一个迭代器对象，然后通过调用迭代器对象的next() 方法来遍历所有返回值。数组有内置的 @@iterator，(对象没有,所以不能使用for..of,除非我们自己定义一个)因此 for..of 可以直接应用在数组上。

例子比较

let arr = ['shotCat',111,{a:'1',b:'2'}]
arr.say="IG niu pi!"
//使用for..in循环
for(let index in arr){
    console.log(arr[index]);//shotCat  111  {a:'1',b:'2'}  IG niu pi!
}
//使用for..of循环
for(var value of arr){
    console.log(value);//shotCat  111  {a:'1',b:'2'}
}
//注意 for..of并没有遍历得到` IG niu pi!`.原因`它只循环数组里存放的值,不会涉及到对象里的key.`更不用说 [[Prototype]] 链.(for..in则会)

 

如何让对象也能使用for..of ?
你可以选择使用书中的自己通过Object.defineProperty()定义一个Symbol.iterator属性来实现.这里我就不赘述了.也是最接近原生使用感受的.不过我这里要介绍一个稍微简单点的方法来实现.就是使用上节讲到的Object.keys()搭配使用.举个例子:

var shotCat={
    name:'shotCat',
    age:'forever18',
    info:{
    sex:'true man',
    city:'wuhan',
    girlFriend:'新垣结衣!'
    }
}
for(var key of Object.keys(shotCat)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key+": "+shotCat[key]);
}