for...in

for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性

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

for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

for...of

for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句
注意：循环迭代并记录iterable作为可迭代对象定义的迭代值，这些是数组元素 3, 5, 7，而不是任何对象的属性

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

for (const element of array1) {
  console.log(element);
}

不同点

for of 只遍历iterable定义的迭代值，并且不能遍历对象，
for in 遍历迭代对象可枚举的值，所以包括继承，还有定义的属性

Object.prototype.objCustom = function () {};
      Array.prototype.arrCustom = function () {};

      let iterable = [3, 5, 7];
      iterable.foo = "hello";
      for (let key in iterable) {
        console.log(key, "in");//0, 1, 2, "foo", "arrCustom", "objCustom"
      }
      for (let key of iterable) {
        console.log(key, "of");//3, 5, 7
      }