for in 和 for of 有什么区别

for...in和for...of是两种用于遍历数据结构的循环语句，它们在用法和功能上有一些区别。

for...in循环：

• for...in循环用于遍历对象的可枚举属性。
• 在循环中，变量代表当前遍历到的属性名（字符串类型）。
• 循环会遍历对象的自身属性以及继承的属性。
• 适合用于遍历对象属性，但不适合遍历数组或类数组对象（因为会遍历索引或键名）。
• 不保证遍历的顺序。

示例:

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

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

for...of循环 :

• for...of循环用于遍历可迭代对象（例如数组、字符串、Set、Map等）的元素。
• 在循环中，变量代表当前遍历到的元素。
• 循环不会访问对象的属性，只会访问其可迭代的值。
• 不适用于遍历普通对象。
• 保证按照迭代器的顺序遍历。

示例:

for (variable of iterable) {
  // code to be executed
}
//在每次循环迭代中，variable 会被赋值为可迭代对象中的一个元素。
//例如，遍历一个数组：

const arr = [1, 2, 3];

for (let element of arr) {
  console.log(element); // 输出数组元素：1, 2, 3
}

const str = "Hello";

for (let char of str) {
  console.log(char); // 输出字符串的字符：H, e, l, l, o
}

const set = new Set([1, 2, 3]);

for (let element of set) {
  console.log(element); // 输出集合元素：1, 2, 3
}

需要注意的是，for...of 循环只能用于可迭代对象，而不能直接用于普通对象。如果想要遍历普通对象的属性，仍然需要使用 for...in 循环。

小结:

• for...in适用于遍历对象属性，而for...of适用于遍历可迭代对象的元素。
• for...in循环返回属性名，而for...of循环返回元素值。
• for...in会遍历对象的所有可枚举属性，包括继承的属性，而for...of只会遍历对象自身可迭代的值。
• for...in不适用于遍历数组，因为会遍历索引；for...of循环更适用于遍历数组和其他可迭代对象。