JS—for...in和for...of的区别

for...of... 和for...in...都是用来遍历循环的，但两者还是有区别的。

for...in...

• for...in...是ES5中的，用来遍历对象自身以及原型上可枚举的字符串属性，也可以用来遍历数组的键名；
• 大多数时候，我们只关心对象自身的属性，所以，一般使用Object.keys()代替，关于获取对象属性的方式，在这篇JS获取对象属性的方法中有讲到。 

for...of...

• for...of...是ES6新增的， 是用来遍历具有Symbol.iterator属性的数据结构，也就是具有iterator接口的结构，可以用for...of来遍历。

• for...of...循环可以用来遍历数组、Set结构、Map结构、类数组对象（如arguments对象、DOM NodeList 对象），Generator对象以及字符串，他们都具有Symbol.iterator属性；

• for...of...循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性，这一点以for...in...也不一样

  let arr = [3, 5, 7];
  arr.foo = 'hello';
  
  for (let i in arr) {
    console.log(i); // "0", "1", "2", "foo"
  }
  
  for (let i of arr) {
    console.log(i); //  "3", "5", "7"
  }

   

• 注意，for...of不能用来遍历普通对象，会报错，必须部署了Iterator接口才能使用。对于普通的对象，for...in循环可以遍历键名，for...of循环会报错。可以使用Generator函数将对象重新包装一下，再用for...of...进行遍历。

  function* entries(obj){
     for(let key of Object.keys(obj)){
          yield [key, obj[key]];
     }
  }
  
  for( let [key, value] of entries(obj)){
      console.log(key, '->', value);
  }