for..in循環是一種用于遍歷對象的屬性的方法。它的語法如下：

for (variable in object) {
  // code to be executed
}

for...of循環是一種用于遍歷可迭代對象（例如數組、字符串、Map 和 Set）的方法。它的語法如下：

for (variable of iterable) {
  // code to be executed
}

相同點兩者都可用作遍歷，只不過for...in遍歷的是數組的索引，而for...of遍歷的是數組的值

const arr = ["a","b","c"]

for (const item of arr) {
  console.log(item)
}

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

for (key in arr) {
  console.log(key)
}

// Expected output: "0"
// Expected output: "1"
// Expected output: "2"

for...in：更適合遍歷對象（也可以遍歷數組，遍歷出的數組索引是字符串類型），遍歷順序有可能不是按照實際數組的內部順序。

for...in：會遍歷出數組所有的可枚舉屬性，包括原型。如果不想遍歷原型的方法和屬性，可以使用hasOwnProperty()方法進行判斷。

for...of：遍歷的是數組元素值，且for...of遍歷的只是數組內的元素，不包括原型的屬性、方法和索引。

for...of：上面提到for...of循環是一種用于遍歷可迭代對象（例如數組、字符串、Map 和 Set）的方法。因此它不能遍歷對象，因為沒有迭代器對象。如果你非要使用它來遍歷對象，也不是不行。你可以使用對象內置的Object.keys()方法。如下：

let personalInformation = {
  name: "梁予安",
  age: 18,
  height: "175cm",
  weight: "60kg",
}

for (key of Object.keys(personalInformation)) {
  console.log(key + ": " + personalInformation[key])
}

另外使用for...of遍歷出來的對象的key是number類型（升序）排在最前。

let personalInformation = {
  b: "梁予安",
  a: 18,
  1: "175cm",
  str: "60kg",
  Boolean: true,
  null: null,
  undefined: undefined,
  Symbol: Symbol(),
  function: function () {}
}

for (key in personalInformation) {
  console.log(key)
}

Expected output:
/*
1
2
4
b
a
str
Boolean
null
undefined
Symbol
function
*/