js for of 和for in

当我们需要遍历一个集合或者数组时，JavaScript提供了两种常用的循环方式：for...of和for...in。

1. for...of循环：
for...of循环是ES6引入的一种遍历方式，它可以用来遍历可迭代对象（如数组、字符串、Set、Map等）。它的语法结构如下：

for (variable of iterable) {
  // 循环体
}

其中，variable是每次迭代时的变量，iterable是要遍历的可迭代对象。在每次循环中，variable会被赋值为可迭代对象中的当前元素。例如：

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

for...of循环会自动遍历可迭代对象中的所有元素，并且不需要我们手动管理索引或者迭代器。

2. for...in循环：
for...in循环是一种用于遍历对象属性的循环方式。它的语法结构如下：

for (variable in object) {
  // 循环体
}

其中，variable是每次迭代时的变量，object是要遍历的对象。在每次循环中，variable会被赋值为对象的一个属性名。例如：

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

for...in循环会遍历对象的所有可枚举属性（包括继承得到的属性），但不会遍历数组或者字符串的索引。