for...in与for...of的区别

当学习JavaScript中的循环语句时，我们经常会遇到两个相似的语法：for...in和for...of。这两个语法在循环遍历数组和对象时非常有用，但它们有一些重要的区别。

for...in循环

for...in循环是用于遍历对象的属性的。它的语法如下：

for (variable in object) { 
// 执行代码 
}

在每次循环中，variable代表当前属性的名称，object是要遍历的对象。下面是一个示例，演示了如何使用for...in循环遍历对象的属性：

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (let key in person) {
  console.log(key + ': ' + person[key]);
}

输出结果：

name: John
age: 30
city: New York

在上面的示例中，我们使用for...in循环遍历了person对象的属性，并打印了每个属性的名称和对应的值。

需要注意的是，for...in循环不仅遍历对象自身的属性，还会遍历继承的属性。如果你只想遍历对象自身的属性，可以使用hasOwnProperty()方法进行过滤。
下面是用hasOwnProperty()方法进行过滤

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};
 
for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key, person[key]);
  }
}

for...in循环是用于遍历对象的属性的。
它的特点如下：

1. 遍历对象的属性：for...in循环会遍历对象的可枚举属性，包括自身的属性和继承的属性。
2. 遍历顺序不确定：for...in循环遍历对象的属性时，属性的遍历顺序是不确定的。因此，在使用for...in循环时，不要依赖属性的遍历顺序。
3. 遍历键名：for...in循环的变量表示当前属性的名称，而不是属性的值。如果需要获取属性的值，可以通过对象和属性名称来访问。

for...of循环

for...of循环是用于遍历可迭代对象（如数组、字符串、Set、Map等）的元素的。它的语法如下：

for (variable of iterable) {
  // 执行代码
}

在每次循环中，variable代表当前元素的值，iterable是要遍历的可迭代对象。下面是一个示例，演示了如何使用for...of循环遍历数组的元素：

const numbers = [1, 2, 3, 4, 5];

for (let number of numbers) {
  console.log(number);
}

输出结果：

1
2
3
4
5

在上面的示例中，我们使用for...of循环遍历了numbers数组的元素，并打印了每个元素的值。需要注意的是，for...of循环只能遍历可迭代对象的值，而不能获取索引或键。如果需要获取索引或键，可以使用for...in循环或结合entries()方法来实现。
 

for...of循环是用于遍历可迭代对象的元素的。
它的特点如下：

1. 遍历可迭代对象的元素：for...of循环可以遍历数组、字符串、Set、Map等可迭代对象的元素。
2. 遍历顺序确定：for...of循环遍历可迭代对象的元素时，遍历顺序是确定的，按照元素在可迭代对象中的顺序进行遍历。
3. 遍历值：for...of循环的变量表示当前元素的值，而不是索引或键名。

区别总结

现在我们来总结一下for...in和for...of的区别：

1. for...in循环用于遍历对象的属性，而for...of循环用于遍历可迭代对象的元素。
2. for...in循环遍历的是属性的名称，而for...of循环遍历的是元素的值。
3. for...in循环会遍历对象继承的属性，而for...of循环只能遍历可迭代对象自身的元素。
4. for...in循环适用于遍历对象，而for...of循环适用于遍历数组、字符串等可迭代对象。

通过以上的解释和示例代码，我们希望你能够更好地理解for...in和for...of循环的区别和用法。根据具体的需求，选择适合的循环语法可以让你的代码更加清晰和高效。