深入解析 JavaScript 中的 for...in 和 for...of 循环

for...in 循环

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

for (const key in object) {
  // 循环体
}

其中，key 是一个变量，表示对象的属性名。object 是要遍历的对象。循环体是需要执行的代码块，它将在对象的所有属性上迭代。

需要注意的是，for...in 循环不仅会遍历对象的自身属性，还会遍历其继承的属性。因此，如果对象继承了其他对象的属性，那么这些属性也会被 for...in 循环遍历到。

for...of 循环

for...of 循环主要用于遍历数组和类数组对象。它的语法如下：

for (const value of iterable) {
  // 循环体
}

其中，value 是一个变量，表示数组或类数组对象中的元素值。iterable 是要遍历的数组或类数组对象。循环体是需要执行的代码块，它将在 iterable 的所有元素上迭代。

与 for...in 循环不同，for...of 循环只遍历 iterable 的自身元素，不会遍历其继承的元素。

for...in 和 for...of 循环的区别

下表总结了 for...in 和 for...of 循环之间的区别：

特性	for...in 循环	for...of 循环
遍历对象	是	否
遍历数组	否	是
遍历类数组对象	否	是
遍历继承的属性	是	否
循环变量	属性名	元素值

使用场景

for...in 循环通常用于遍历对象的属性，并对每个属性进行操作。例如，以下代码使用 for...in 循环来遍历对象 myObj 的所有属性，并将每个属性名和值输出到控制台：

const myObj = {
  name: "John",
  age: 30,
  city: "New York"
};

for (const key in myObj) {
  console.log(`${key}: ${myObj[key]}`);
}

输出结果如下：

name: John
age: 30
city: New York

for...of 循环通常用于遍历数组和类数组对象中的元素，并对每个元素进行操作。例如，以下代码使用 for...of 循环来遍历数组 myArr 中的所有元素，并将每个元素输出到控制台：

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

for (const value of myArr) {
  console.log(value);
}

输出结果如下：

1
2
3
4
5

结论

for...in 和 for...of 循环是 JavaScript 中常用的两种循环结构，它们都有各自的适用场景。for...in 循环主要用于遍历对象的属性，而 for...of 循环主要用于遍历数组和类数组对象中的元素。通过理解这两