for...in...

仅迭代自身的属性for...in 语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。

for ... in是为遍历对象属性而构建的，不建议与数组一起使用，数组可以Array.prototype.forEach()和for ... of

const obj = {a:1, b:2, c:3};

for (let key in obj) {
  console.log(key + " = " + obj[key]);
}
// a=1 b=2 c=3

for ... of

for...of语句在可迭代对象（包括Array，Map，Set，String，TypedArray，arguments ​对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

const arr = ['a', 'b', 'c'];

for (let item of arr) {
  console.log(item);
}

// a b c

区别

无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。

for...in 语句以任意顺序迭代对象的可枚举属性。

for...of 语句遍历可迭代对象定义要迭代的数据。