先说论断：

  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]);}

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之外最大的区别