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

1. 场景

有一天，面试官和蔼可亲地说：来说一说 for... in ，for...of 和 forEach 的区别吧。

我：#&%…

面试官：别支支吾吾了同学，听好了:

2. 概念

for...in 循环

• 用于遍历对象的可枚举属性，包括原型链上的属性。
• 语法：for (key in object) { ... }
• key 是不同属性的键名，object 是要遍历的对象。
• 示例：

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

for (let prop in obj) {
  console.log(prop); // 输出属性名：a, b, c
  console.log(obj[prop]); // 输出属性值：1, 2, 3
}

注意：for-in 循环并不是按照对象属性在对象中的顺序迭代的。因为 JavaScript 中的对象属性没有固定的顺序（对象存在在堆中，其属性是用hash方式映射的，方便删除和添加，感兴趣可读英文论文A tour of V8: object representation — jayconrod.com）。因此，我们在使用 for-in 循环迭代对象时，不能保证它们的顺序。

for...of 循环

• 用于遍历可迭代对象的元素，例如数组、字符串、Map、Set 等。
• 语法：for (ele of iterable) { ... }
• ele 是可迭代对象中的元素，iterable 是要遍历的可迭代对象。
• 示例：

const arr = [1, 2, 3];

for (let element of arr) {
  console.log(element); // 输出数组元素：1, 2, 3
}

forEach 方法

• 是数组对象的方法，用于遍历数组元素。
• 语法：array.forEach(callback(currentValue, index, array))
• callback 是在每次迭代中调用的函数，接收当前元素、索引和数组本身作为参数。
• forEach 方法没有返回值，通常用于在数组上执行某些操作，而不是生成一个新的数组。
• 示例：

const arr = [1, 2, 3];

arr.forEach((element, index) => {
  console.log(element); // 输出数组元素：1, 2, 3
  console.log(index);   // 输出索引：0, 1, 2
});

3. 区别：

通常来说：

• 使用 for...in 循环来遍历对象的属性。
• 使用 for...of 循环来遍历可迭代对象的元素。
• 使用 forEach 方法来遍历数组的元素。

4. 记忆

for...in和 for...of从字面上乍一看都有在…里面取东西的感觉，要怎么记忆才能不混淆呢，或许可以从单词in和of本身在英文语法的使用的区别来理解。

• a in b中的 a 和 b 通常可以是不同类的，比如 Stefen is tallest in the class. Stefen跟class不是相同类型。
• a of b中的 a 和 b 通常是相同类的，比如 Stefen is tallest of the students. Stefen跟students都是学生。

这只是简单的辅助记忆，最佳的记忆方法应该是多用！