首先，一句話概括：for in是遍歷（object）鍵名，for of是遍歷（array）鍵值。

for...in

for...in 迴圈只遍歷可列舉屬性（包括它的原型鏈上的可列舉屬性）。像 Array和Object使用內建建構函式所建立的物件都會繼承自Object.prototype和String.prototype的不可列舉屬性，例如 String 的 indexOf() 方法或 Object的toString()方法。迴圈將遍歷物件本身的所有可列舉屬性，以及物件從其建構函式原型中繼承的屬性（更接近原型鏈中物件的屬性覆蓋原型屬性）。

var obj = {a:1, b:2, c:3};
    
 
for (let key in obj) {
  console.log(key);
}
 
// a
// b
// c

for...of

for...of語句在可迭代物件（包括Array，Map，Set，String，TypedArray，arguments 物件等等）上建立一個迭代迴圈，呼叫自定義迭代鉤子，併為每個不同屬性的值執行語句

const array1 = ['a', 'b', 'c'];
 
for (const val of array1) {
  console.log(val);
}
 
// a
// b
// c

for of不可以遍歷普通物件，想要遍歷物件的屬性，可以用for in迴圈, 或內建的Object.keys()方法

for...of與for...in的區別

無論是for...in還是for...of語句都是迭代一些東西。它們之間的主要區別在於它們的迭代方式。

for...in語句以任意順序迭代物件的可列舉屬性。

for...of語句遍歷可迭代物件定義要迭代的資料。

再舉個例子，如下：

①遍歷陣列

      const arr1 = ['a', 'b', 'c'];
      for (let i in arr1) {
        console.log(i)  // 0, 1, 2
      }
      
      const arr2 = ['a', 'b', 'c'];
      
 
for (let i of arr2) {
        console.log(i) // a, b, c
      }

for in 返回陣列的下標（key）;
for of 返回陣列的元素；

②給陣列手動新增屬性

   const arr3 = ['a', 'b'];
  arr3.name = 'c';
  for (let i in arr3) {
    console.log(i) // 0, 1, name
  }

for in 迴圈可以遍歷出name這個鍵名

③遍歷物件

  const json = {"a": 1, "b": 2, "c": 3};
  for (let i in json) {
    console.log(i) // a, b, c
  }
  for (let i of json) {
    console.log(i)
  }

for in遍歷獲取物件key值;
for of 報錯；

總結：

• for..of適用遍歷數/陣列物件/字串/map/set等擁有迭代器物件的集合.但是不能遍歷物件,因為沒有迭代器物件.與forEach()不同的是，它可以正確響應break、continue和return語句
• for-of迴圈不支援普通物件，但如果你想迭代一個物件的屬性，你可以用for-in迴圈（這也是它的本職工作）或內建的Object.keys()方法：

• 遍歷物件時推薦使用for...in，其中item為物件的key。使用for...of會報錯。
• 遍歷陣列時推薦使用for...of，其中item為陣列每一項的值。使用for...in則不能保證遍歷順序且會遍歷出自定義屬性。
• for...in是ES5特性，for...of是ES6特性，因此需要注意相容性。
• 如果要使用for...of遍歷普通物件，需要配合Object.keys()一起使用。