废话不多说,开整!!!
简单说，for in是遍历键名，for of是遍历键值。例如：
let arr = ["a","b"];
for (a in arr) {
console.log(a);//1,2
}for (a of arr) {
console.log(a);//a,b
}
由于for of的这个特性，他还可以实现对iterator对象的遍历，而for in就是简单的遍历了。
for...of语句在可迭代对象(包括 Array, Map, Set, String, TypedArray，arguments 对象等等)上创建一个迭代循环，对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩.
也就是说，for of只可以循环可迭代对象的可迭代属性，不可迭代属性在循环中被忽略了。
并且给与了一个对比的例子
Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};let iterable = [3, 5, 7];
iterable.foo = "hello";for (let i in iterable) {
console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}for (let i of iterable) {
console.log(i); // logs 3, 5, 7
}
我们可以看到，对于array的不可迭代元属性objCustom、arrCustom和实例属性foo，在循环中都被忽略这是for in迭代KEY，for of迭代value之外最大的区别.
1.推荐在循环对象属性的时候，使用for...in,在遍历数组的时候的时候使用for...of。
2.for...in循环出的是key，for...of循环出的是value
3.注意，for...of是ES6新引入的特性。修复了ES5引入的for...in的不足
4.for...of不能循环普通的对象，需要通过和Object.keys()搭配使用
假设我们要遍历一个数组的valuelet aArray = ['a',123,{a:'1',b:'2'}]
使用for...in循环：
for(let index in aArray){
console.log(${aArray[index]});
}
使用for...of循环：
for(var value of aArray){
console.log(value);
}
咋一看好像好像只是写法不一样而已，那为什么说for...of修复了for...in的缺陷和不足。
假设我们往数组添加一个属性name:
aArray.name = 'demo',再分别查看上面写的两个循环：
for(let index in aArray){
console.log(${aArray[index]}); //Notice!!aArray.name也被循环出来了
}
for(var value of aArray){
console.log(value);
}
所以说，作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性。
for...of循环不会循环对象的key，只会循环出数组的value，因此for...of不能循环遍历普通对象,对普通对象的属性遍历推荐使用for...in
如果实在想用for...of来遍历普通对象的属性的话，可以通过和Object.keys()搭配使用，先获取对象的所有key的数组
然后遍历：
var student={
name:'wujunchuan',
age:22,
locate:{
country:'china',
city:'xiamen',
school:'XMUT'
}
}
for(var key of Object.keys(student)){
//使用Object.keys()方法获取对象key的数组
console.log(key+": "+student[key]);
}
笔没墨了..............