for in 与 for of 之间的区别

1. 推荐在循环对象属性的时候，使用 for in ,在遍历数组的时候的时候使用 for of 。
2. for in 循环出的是 key，for of 循环出的是 value
3. 注意，for of 是ES6新引入的特性。修复了ES5引入的 for in 的不足
4. for of 不能循环普通的对象，需要通过和 Object.keys() 搭配使用

假设我们要遍历一个数组的 var arr= ['1',2,{a:'1',b:'2'}]

使用 for in 循环：

var arr = ['1',2,{a:'1',b:'2'}];
for(let key in arr ){
    console.log(`${arr[key]}`);
    // 1
    // 2
    // [object Object]
}

使用 for of 循环：

var arr = ['1',2,{a:'1',b:'2'}];
for(var value of arr){
    console.log(value);
    // 1
    // 2
    // {a: "1", b: "2"}
}

咋一看好像好像只是写法不一样而已，那为什么说 for of 修复了 for in 的缺陷和不足。
假设我们往数组添加一个属性 name : arr.name = 'demo' ,再分别查看上面写的两个循环：

使用 for in 循环：

var arr = ['1',2,{a:'1',b:'2'}];
arr.name = 'demo';
for(let key in arr){
    console.log(`${arr[key]}`); //Notice!!arr.name也被循环出来了
    // 1
    // 2
    // [object Object]
    // demo
}

使用 for of 循环：

var arr = ['1',2,{a:'1',b:'2'}];
arr.name = 'demo';
for(var value of arr){
    console.log(value);
    // 1
    // 2
    // {a: "1", b: "2"}
}

所以说，作用于数组的 for in 循环除了遍历数组元素以外,还会遍历自定义属性。

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

如果实在想用 for of 来遍历普通对象的属性的话，可以通过和 Object.keys() 搭配使用，先获取对象的所有 key 的数组
然后遍历：

var obj = {
    name : '小明',
    age : 9,
    locate : {
    country : 'china',
    city : 'xiamen'
    }
}
for(var key of Object.keys(obj)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key+": "+obj[key]);
    // name: 小明
    // age: 9
    // locate: [object Object]
}

再简单点说，for in 是遍历键名，for of 是遍历键值。
例如：

let arr = ["a","b"];
// for in 的方式
for (a in arr) {
    console.log(a);//1,2
}
// for of 的方式
for (a of arr) {
    console.log(a);//a,b
}
// 由于for of的这个特性，他还可以实现对iterator对象的遍历，而for in就是简单的遍历了。

用两种做一个小练习, 寻找两个有序数组a,b中最小相同元素

使用 for in 的方式

var a = [3, 4, 6, 8, 10, 15, 25];
var b = [1, 2, 10, 15, 25, 26, 27, 28];
var c = [];
for(let x in a){
    for(let y in b){
        if(a[x] == b[y]){
            c.push(a[x]);
        }
    }
}
console.log(`数组A,B最小的相同元素是：${c[0]}`);// 10

使用 for of 的方式

var a = [3, 4, 6, 8, 10, 15, 25];
var b = [1, 2, 10, 15, 25, 26, 27, 28];
var c = [];
for(let x of a){
    for(let y of b){
        if(x == y){
            c.push(x);
        }
    }
}
console.log(`数组A,B最小的相同元素是：${c[0]}`);// 10