for of与for in的区别

for…in
for…in 语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性(enumerable)
for…in 不应该用于迭代一个关注索引顺序的 Array。

for … in是为遍历对象属性而构建的，不建议用来遍历数组，
遍历数组我们可以用Array.prototype.forEach()和for … of

for…in 最常用的地方应该是用于调试，可以更方便的去检查对象属性

const obj = {
	name: 'zhangsan',
	age: 20,
	address: 'beijing'
}

for (let prop in obj) {
	// if (obj.hasOwnProperty(prop))
	console.log(`obj.${prop} = ${obj[prop]}`)
}

for…of
for…of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代方法，并为每个不同属性的值执行语句
迭代Array

const arr = ['apple', 'banana', 'peach', 'mango']
for (let option of arr) {
	console.log(option)
}

迭代Map

let map = [['name', 'zhangsan'], ['age', 20], ['gender', 'male'], ['address', 'beijing']]
for (let entry of map) {
	console.log(entry)
}
for (let [key, val] of map) {
	console.log(`key is ${key} and value is ${val}`)
}

迭代Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value)
}

迭代Arguments对象

(function() {
  for (let argument of arguments) {
    console.log(argument)
  }
})(1, 2, 3)

迭代Dom集合

let divs = document.querySelectorAll('div')
for (let div of divs) {
	console.log(div)
}

迭代生成器

var gen = (function *(){
    yield 1
    yield 2
    yield 3
})();
for (let o of gen) {
    console.log(o)
    break // 对于for...of的循环，可以由break或return终止，在这些情况下，迭代器关闭
} 

迭代其他可迭代对象 可以迭代显式实现可迭代协议的对象

var iterable = {
  [Symbol.iterator]() {
    return {
      i: 0,
      next() {
        if (this.i < 3) {
          return { 
          	value: this.i++, 
          	done: false 
          }
        }
        return { 
        	value: undefined, 
        	done: true 
        }
      }
    }
  }
}
for (var value of iterable) {
  console.log(value)
}

区别：
1.for in 遍历的是对象的属性名(key)，for of 遍历的是对象的元素值(value)，所以用for in 来遍历对象
2.用for of 来遍历数组可以保证顺序，以及实现了iterator接口的对象，遍历普通对象会报错
也可参考博客关于普通对象的遍历：https://www.cnblogs.com/blogs-xlf/p/11274884.html