for in循环和for of循环

for-in 循环和 for-of 循环都是 JavaScript 中用于迭代数据结构（如数组、对象等）的循环结构，但它们有一些重要的区别。

for-in 循环：

for-in 循环用于迭代对象的可枚举属性，通常用于遍历对象的键名（属性名）。

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

for (let key in myObject) {
  console.log(key); // 输出 'a', 'b', 'c'
  console.log(myObject[key]); // 输出 1, 2, 3
}

注意：for-in 循环也会遍历对象的原型链上的属性，因此可能会包含一些你并不期望的属性。

for-of 循环：

for-of 循环用于迭代可迭代对象的元素，通常用于遍历数组或类数组对象（如字符串、NodeList 等）。

const myArray = [1, 2, 3];

for (let value of myArray) {
  console.log(value); // 输出 1, 2, 3
}

注意：for-of 循环只能用于迭代实现了迭代器（iterator）接口的对象。

区别：

1. 迭代的内容：

   • for-in：遍历对象的键名。
   • for-of：遍历可迭代对象的元素。

2. 适用范围：

   • for-in：适用于对象，可以用来遍历对象的属性，包括继承的属性。
   • for-of：适用于可迭代对象，如数组、字符串、Map、Set 等。

3. 遍历顺序：

   • for-in：不保证属性的遍历顺序，遍历对象属性时可能会以不同的顺序返回。
   • for-of：遍历数组时会按照元素在数组中的顺序返回。

4. 原型链上的属性：

   • for-in：会遍历对象的原型链上的属性。
   • for-of：只能用于迭代实现了迭代器接口的对象。

总的来说，for-in 用于遍历对象的属性（包括继承的属性），而 for-of 用于遍历可迭代对象的元素。在大多数情况下，for-of 更适合用于遍历数组等数据结构。