实践干货，探索for…in和for…of循环区别

在 JavaScript 中，遍历数组或对象是常见的操作。为了实现这一目的，开发者可以使用for循环，也可以使用更现代的循环结构，如for...in和for...of。尽管for…in和for…of在语法上相似，但它们在用途和功能上有显著的区别。

本文将讨论这两种循环的用法和差异，并通过实战代码示例来解释它们。

for…in循环

for...in循环设计用于遍历对象的可枚举属性。它将遍历对象的所有属性名，包括原型链上的属性。

const person = {
  firstName: 'Alice',
  lastName: 'Smith',
  age: 25
};

for (const key in person) {
  console.log(key, person[key]);
}
// firstName Alice
// lastName Smith
// age 25

注意事项:

• for...in循环会遍历对象的所有可枚举属性，包括原型链上的属性。为了避免这种情况，通常需要配合hasOwnProperty方法来检查属性是否是对象自身的属性。
• for...in循环不保证属性的顺序，因此在不同的 JavaScript 引擎中遍历属性的顺序可能会有所不同。

for…of循环

for...of循环是ES6引入的一种新循环机制，它允许遍历可迭代对象（如数组、字符串、Map和Set等）的值。

// 1、遍历数组
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
  console.log(number);
}
// 1
// 2
// 3
// 4
// 5

// 2、遍历字符串
const greeting = 'Hello';
for (const char of greeting) {
  console.log(char);
}
// H
// e
// l
// l
// o

但是，请注意：

• for...of循环只遍历可迭代对象的值，而不是键。
• for...of循环不能直接用于普通对象，因为普通对象不是可迭代对象。

但是，可以通过使用Object.keys()或Object.entries()方法，来遍历对象的键或键值对。

// 3、遍历对象
const person = {
  firstName: 'Alice',
  lastName: 'Smith',
  age: 25
};

// Object.keys()方法返回一个由给定对象自己的所有可枚举属性名组成的数组。
// Object.keys(person) ['firstName', 'lastName', 'age']
for (const key of Object.keys(person)) { 
  console.log(key, person[key]);
}
// firstName Alice
// lastName Smith
// age 25

// Object.entries()方法返回一个二维数组，其元素是与直接在对象上找到的可枚举属性键值对对应的数组。每个键值对数组都有两个元素，第一个元素是属性名，第二个元素是属性值。
// Object.entries(person) [['firstName', 'Alice'], ['lastName', 'Smith'], ['age', 25]]
for (const [key, value] of Object.entries(person)) {
  console.log(key, value);
}
// firstName Alice
// lastName Smith
// age 25

• Object.keys()和Object.entries()方法都是快速和简便的方式来遍历对象的键或键值对。
• 当你需要遍历对象的键或键值对，并且不关心遍历的顺序时，这些方法非常有用。

结论

for...in循环用于遍历对象的属性名，而for...of循环用于遍历可迭代对象的值。

在处理数组时，for...of循环通常是更好的选择，因为它提供了更简洁的语法和更好的性能。对于对象，如果需要遍历属性名，for...in循环是必要的，但需要小心处理原型链上的属性。