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

结论先行：

for..in 用于遍历对象的属性名，也就是会将对象的属性名作为迭代变量来遍历。

它并不适用于遍历数组和类数组对象。

for...of 适用于遍历数组，也就是会将数组的属性值作为迭代变量来遍历。 

具体分析：

for...in 和 for...of 都是 JavaScript 中的循环语句，但它们的作用和使用方式略有不同。

1、for..in 循环

for..in 循环用于遍历对象的可枚举属性，它会将对象的每个属性名称(或键名)作为迭代变量来遍历。

以下是 for...in 的基本语法

for (variable in object) {
}

其中，variable 表示每次迭代中当前属性的名称(或键名)，object 表示要遍历的对象。

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 循环遍历的是对象的可枚举属性，包括自有属性和继承属性。

因此，它并不适用于遍历数组和类数组对象。

2、for...of 循环

for...of 循环用于遍历可迭代对象的元素，它会将对象的每个元素作为迭代变量来遍历。

以下是 for..of 的基本语法:

for (variable of iterable) {
}

其中，variable 表示每次迭代中当前元素的值，iterable 表示要遍历的可迭代对象，如数组、字符串、Set、Map 等。

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

需要注意的是，for...of 循环只能遍历实现了选代器接口 (lterator) 的对象，因此它不适用于普通的对象。

此外，它遍历的是对象的元素值，而不是键名或属性名

3、总结

for...in 适用于遍历对象的属性名，而 for...of 适用于遍历数组、字符串等可迭代对象的元素值。

4、什么是可迭代对象（Iterable）

可迭代对象（Iterable）是指实现了迭代器接口的对象，它可以被迭代（遍历）的对象。

在 JavaScript 中，可迭代对象通常是指具有内部属性 Symbol.iterator 的对象。

可迭代对象是指它具有内部属性 Symbol.iterator 的对象。

迭代器接口定义了一个 next() 方法，该方法返回一个包含 value 和 done 属性的对象。其中，value 表示当前迭代位置的值，done 表示迭代是否已经结束。

可迭代对象可以通过调用其内部属性 Symbol.iterator 来获取一个迭代器对象。迭代器对象用于在可迭代对象上进行迭代操作。每次调用迭代器对象的 next() 方法，都会返回一个表示迭代结果的对象。

以下是一个简单的示例，展示了如何使用可迭代对象和迭代器对象：

const iterable = [1, 2, 3]; // 数组是可迭代对象 
 
const iterator = iterable[Symbol.iterator](); // 获取迭代器对象 
 
console.log(iterator.next()); // { value: 1, done: false } 
console.log(iterator.next()); // { value: 2, done: false } 
console.log(iterator.next()); // { value: 3, done: false } 
console.log(iterator.next()); // { value: undefined, done: true }

在上面的示例中，数组 iterable 是一个可迭代对象，我们通过访问其内部属性 Symbol.iterator 获取了一个迭代器对象 iterator。然后，我们可以使用迭代器对象的 next() 方法来逐个获取数组中的元素，直到迭代结束。

需要注意的是，并不仅限于数组，许多 JavaScript 内置对象（如字符串、Set、Map 等）都是可迭代对象，也可以自定义对象实现迭代器接口，使其成为可迭代对象。

这样，我们就可以使用统一的方式来遍历不同类型的对象。