for...in 循环和 for...of 循环的区别

JavaScript 中的 for...in 循环和 for...of 循环是两种不同的迭代方式，用于遍历数据结构中的元素。它们具有一些区别：

1. for...in 循环：
   • 用于遍历对象的可枚举属性（包括原型链上的属性）。
   • 迭代的是键（属性名），而非值。
   • 不保证迭代顺序，因为对象的属性顺序在规范中并未定义。
   • 比较适合用于遍历对象的属性。

以下是使用 for...in 循环遍历对象的示例：

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

for (let key in obj) {
  console.log(key); // 输出属性名：a、b、c
  console.log(obj[key]); // 输出属性值：1、2、3
}

2. for...of 循环：
   • 用于遍历可迭代对象（如数组、字符串、Set、Map 等）中的元素。
   • 迭代的是值本身，而非键。
   • 保证按照迭代顺序依次访问每个元素。
   • 比较适合用于遍历数组、字符串等数据结构。

以下是使用 for...of 循环遍历数组的示例：

const arr = [1, 2, 3];

for (let value of arr) {
  console.log(value); // 输出元素值：1、2、3
}

需要注意的是，for...in 循环不应该用于遍历数组，因为它会迭代数组原型链上的非数字属性，而这往往不是我们所期望的行为。而 for...of 常用于遍历数组等可迭代对象，提供了一种简洁的语法来访问集合中的每个元素。

总结来说，for...in 循环适用于遍历对象的属性，for...of 循环适用于遍历可迭代对象（如数组）的元素。在选择使用哪种循环时，需要考虑数据结构的特点和迭代需求。