For..in 和 For..of

在循环对象属性的时候，使用for…in；
在遍历数组的时候的时候使用for…of；
for…in循环出的是key，for…of循环出的是value；
注意，for…of是ES6新引入的特性。修复了ES5引入的for…in的不足

For in是遍历键名
作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性；
一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

var forInArray = ['A', 'B', 'C'];
forInArray .name = 'Hello';
for (var x in forInArray ) {
    alert(x); // '0', '1', '2', 'name'
    alert(forInArray[i]); // 'A', 'B', 'C'，‘Hello’
}

var forInObj = {1:"a", 2:"b", 3:"c"}; 
forInObj.name= "d"
for (var x in forInObj)
{
  console.log(x); //1,2,3,name
   console.log(forInObj[x]);//a,b,c,d
}

for … in循环将把name包括在内，但Array的length属性却不包括在内。

For of是遍历键值
不会遍历对象的key，只会循环数组的value值，它只循环集合本身的元素
for…of循环不会循环对象的key，只会循环出数组的value，因此for…of不能循环遍历普通对象,对普通对象的属性遍历推荐使用for…in;

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
    alert(x);//'A', 'B', 'C'
}
for (var x of s) { // 遍历Set
    alert(x);//'A', 'B', 'C'
}
for (var x of m) { // 遍历Map
    alert(x[0] + '=' + x[1]);//1='x',2='y',3='z'
}

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

var student = {
    name:'A',
    age:1,
    like:{
   	 color:'red',
    }
}
for(var key of Object.keys(student)){
    //使用Object.keys()方法获取对象key的数组
    console.log(key+": "+student[key]);//name:A,age:1,like:[object]
}