JavaScript中，for...in 和 for...of 循环遍历对象和数组

for...in

for...in 循环主要用于遍历对象的可枚举属性（包括继承的属性）。然而，它也可以遍历数组，但此时它遍历的是数组的索引（作为字符串），而不是数组的值。

对数组使用 for...in：

const array = ['apple', 'banana', 'cherry'];  
for (const key in array) {  
  console.log(key); // 输出：'0', '1', '2'（字符串形式的索引）  
  console.log(array[key]); // 输出数组的值  
}

但是，使用 for...in 遍历数组通常不是一个好主意，因为它会遍历数组的所有可枚举属性，包括继承的属性（如果有的话），并且它不能按照数组索引的顺序遍历（虽然对于标准数组来说，它通常看起来是顺序的）。

对对象使用 for...in：

const obj = { a: 1, b: 2, c: 3 };  
for (const key in obj) {  
  console.log(key); // 输出：'a', 'b', 'c'（对象的属性名）  
  console.log(obj[key]); // 输出对应的属性值  
}

for...of

for...of 循环用于遍历可迭代对象（包括 Array、Map、Set、String、TypedArray、函数的 arguments 对象等等）的值。

对数组使用 for...of：

const array = ['apple', 'banana', 'cherry'];  
for (const value of array) {  
  console.log(value); // 输出：'apple', 'banana', 'cherry'（数组的值）  
}

这是遍历数组的首选方法，因为它直接遍历数组的值，而不是索引。

对对象使用 for...of（通常不可行）：

默认情况下，普通对象不是可迭代的，因此你不能用 for...of 直接遍历一个对象的属性。但你可以使用像 Object.keys(), Object.values(), 或 Object.entries() 这样的方法获取对象的可枚举属性，然后将它们转换为可迭代对象。

const obj = { a: 1, b: 2, c: 3 };  
for (const key of Object.keys(obj)) {  
  console.log(key); // 输出：'a', 'b', 'c'（对象的属性名）  
}  
  
for (const value of Object.values(obj)) {  
  console.log(value); // 输出：1, 2, 3（对象的属性值）  
}  
  
for (const [key, value] of Object.entries(obj)) {  
  console.log(key, value); // 输出：['a', 1], ['b', 2], ['c', 3]（属性名和值）  
}

当遍历数组时，应优先使用 for...of；当遍历对象的属性时，应使用 for...in（但通常最好与 Object.keys(), Object.values(), 或 Object.entries() 一起使用）。