for in和for of 的区别

1. for-in循环

for-in循环主要用于遍历对象,格式：for(let keys in zhangsan){}
keys表示obj对象的每一个键值对的键
所有循环中，需要使用obj[keys]来取到每一个值
for-in 循环，遍历时不仅能读取对象自身上面的成员属性，也能延着原型链遍历出对象的原型属性所以可以使用hasOwnProperty判断一个属性是不是对象自身上的属性obj.hasOwnProperty(keys)==true 表示这个属性是对象的成员属性，而不是原型属性。

//声明一个Peson类
function Person(){
    this.name = "张三";
    this.age = 14;
    this.func1 = function(){ 
    }
}
//实例化这个类
let zhangsan = new Person();
//使用for-in遍历这个对象
for(let keys in zhangsan){
    console.log(zhangsan[keys])
} 

2.for of

for…of循环内部调用的是数据结构的Symbol.iterator方法。
for…of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串

1. 数组

let arr = ['a', 'b', 'c', 'd']; 
for (let a in arr) {
  console.log(a); // 0 1 2 3
} 
for (let a of arr) {
  console.log(a); // a b c d
}　

上面代码表明，for…in循环读取键名，for…of循环读取键值。如果要通过for…of循环，获取数组的索引，可以借助数组实例的entries方法和keys方法

2.Set 和 Map 结构

let engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
for (let e of engines) {
  console.log(e);
}
// Gecko  Trident    Webkit

let es6 = new Map();
es6.set("edition", 6);
es6.set("committee", "TC39");
es6.set("standard", "ECMA-262");
for (let [name, value] of es6) {
  console.log(name + ": " + value);
}
// edition: 6
// committee: TC39
// standard: ECMA-262

上面代码演示了如何遍历 Set 结构和 Map 结构。值得注意的地方有两个，首先，遍历的顺序是按照各个成员被添加进数据结构的顺序。其次，Set 结构遍历时，返回的是一个值，而 Map 结构遍历时，返回的是一个数组，该数组的两个成员分别为当前 Map 成员的键名和键值。