for...of、for...in、for 循环， 三者有什么区别？

for...of、for...in 和 for 是 JavaScript 中用于循环的三种不同结构，每种结构有不同的用途和特性。

1. for 循环

• 作用：最基本的循环结构，可以用于遍历数组、对象等。

• 用法：需要初始化变量、设置循环条件和更新变量。

• 示例：

  for (let i = 0; i < 5; i++) {
    console.log(i); // 输出 0, 1, 2, 3, 4
  }
  

• 特点：

  • 用于精确控制循环次数。
  • 可以用于遍历数组或其他可迭代对象，也适用于遍历对象的属性，但需要额外处理。

2. for...in 循环

• 作用：用于遍历对象的可枚举属性（包括继承的属性）。

• 用法：遍历对象的所有属性（不包括 Symbol 属性）。

• 示例：

  const obj = { a: 1, b: 2, c: 3 };
  for (let key in obj) {
    console.log(key, obj[key]); // 输出 "a 1", "b 2", "c 3"
  }
  

• 特点：

  • 遍历对象的属性名（键），不是数组元素。
  • 不保证属性的顺序。
  • 适合遍历对象的键，而不适用于遍历数组。

3. for...of 循环

• 作用：用于遍历可迭代对象（如数组、字符串、Set、Map 等）的元素。

• 用法：直接遍历迭代对象的值。

• 示例：

  const array = [10, 20, 30];
  for (let value of array) {
    console.log(value); // 输出 10, 20, 30
  }
  

• 特点：

  • 遍历可迭代对象的值。
  • 不适用于遍历对象的属性，只适用于数组或其他可迭代对象。
  • 保证了遍历的顺序。