for in与for of的区别

for...in 和 for...of 是 JavaScript 中两种不同的循环语句，用于遍历数据结构（如数组、对象等）。它们的主要区别在于它们遍历的对象类型和遍历的方式。

1. for...in 循环：
for...in 循环用于遍历对象的可枚举属性。它会将对象的每个可枚举属性（包括原型链上的属性）作为迭代变量来循环遍历。

示例：

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

for (let prop in obj) {
  console.log(prop); // 输出：'a', 'b', 'c'
}

注意：for...in 循环不保证对象属性的顺序，并且还会遍历继承的属性。因此，在遍历数组等类数组对象时，可能会得到意外的结果。

2. for...of 循环：
for...of 循环用于遍历可迭代对象（如数组、字符串、Map、Set 等）。它会将对象的每个可迭代项作为迭代变量来循环遍历。

示例：

const arr = [1, 2, 3];

for (let item of arr) {
  console.log(item); // 输出：1, 2, 3
}

for...of 循环提供了一个简洁的语法来遍历数组和其他可迭代对象，并且保证遍历的顺序和对象的迭代器定义的顺序一致。然而，它无法直接用于遍历普通对象的属性，因为普通对象不是可迭代对象。

总结：for...in 循环用于遍历对象的属性，for...of 循环用于遍历可迭代对象的值。

相关问题

for of与for in的区别

for of用于遍历可迭代对象的值，而for in用于遍历对象的属性。

例如，对于一个数组，使用for of可以遍历数组中的每个值：

const arr = [1, 2, 3];

for (const val of arr) {
  console.log(val);
}
// 输出: 1, 2, 3

而使用for in可以遍历对象的属性名：

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

for (const prop in obj) {
  console.log(prop);
}
// 输出: a, b, c

需要注意的是，使用for in遍历对象时会遍历对象的原型链上的所有属性，因此需要使用hasOwnProperty方法来判断属性是否是对象自身的属性。

for of和for in区别

for...in和for...of都是用来遍历的属性，但是它们有以下区别：

共性：
- 都可以遍历数组和对象

区别：
- for...in语句用于遍历对象的属性，而for...of语句用于遍历可迭代对象的元素
- for...in语句返回的是对象的键名，而for...of语句返回的是对象的键值
- for...in语句可以遍历对象的原型链上的属性，而for...of语句不行
- for...in语句可以遍历字符串类型的键名，而for...of语句不行

以下是两个例子来说明它们的区别：

1. 遍历对象

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

// for...in语句遍历对象的属性
for (let i in obj) {
  console.log(i) // 输出：a b c
}

// for...of语句不能用于对象
for (let i of obj) {
  console.log(i) // 输出：Uncaught TypeError: obj is not iterable 报错了
}

2. 遍历数组

const arr = [1, 2, 3]

// for...in语句遍历数组的下标
for (let i in arr) {
  console.log(i) // 输出：0 1 2
}

// for...of语句遍历数组的元素
for (let i of arr) {
  console.log(i) // 输出：1 2 3
}