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
*/