for in和for of的区别

for...in 和 for...of 是 JavaScript 中用于迭代对象和数组的两种不同循环。

for...in 循环：

1. 用于迭代对象属性： for...in 循环用于迭代对象的可枚举属性。

2. 遍历对象属性： 它遍历对象的属性并返回字符串类型的属性名。

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

3. 原型链上的属性也会被迭代： for...in 循环会遍历对象自身以及继承的可枚举属性。

   javascript
   function Parent() {
     this.parentProp = 'parent';
   }
   
   Parent.prototype.inheritedProp = 'inherited';
   
   const child = new Parent();
   child.childProp = 'child';
   
   for (const key in child) {
     console.log(key); // 输出：'parentProp', 'inheritedProp', 'childProp'
   }
   

for...of 循环：

1. 用于迭代可迭代对象的值： for...of 循环用于迭代可迭代对象（如数组、字符串、Map、Set 等）的值。

2. 遍历值而非索引： 它遍历可迭代对象并返回对象中的值，而不是索引或属性名。

   javascript
   const arr = [1, 2, 3];
   
   for (const value of arr) {
     console.log(value); // 输出：1, 2, 3
   }
   

3. 不适用于普通对象： for...of 循环不适用于普通对象，因为普通对象不是可迭代对象。要在普通对象上使用 for...of，需要通过转换（比如使用 Object.values()）将其转为可迭代对象。

   javascript
   const obj = { a: 1, b: 2, c: 3 };
   
   // 错误示例：for...of 循环不适用于普通对象
   // for (const value of obj) {
   //   console.log(value);
   // }
   
   // 正确示例：使用 Object.values() 将对象转换为可迭代对象
   for (const value of Object.values(obj)) {
     console.log(value); // 输出：1, 2, 3
   }
   

总结：

• for...in 适用于迭代对象的可枚举属性，包括自身属性和继承属性。
• for...of 适用于迭代可迭代对象（如数组、字符串、Map、Set 等）的值，但不适用于普通对象。