JS 中的遍历方法: for in 和 for of

在 JavaScript 中，遍历是一个非常重要的概念。遍历是指对一个集合（如数组或对象）中的每个元素进行迭代并执行某些操作。

JavaScript 中有很多种遍历方式，其中 for-in 和 for-of 是两种最常用的方法。这两种方法的区别在于它们如何遍历一个集合中的元素。

1. for-in 循环

for-in 循环通过迭代一个对象的属性，来遍历集合中的每个元素。例如：

const person = { name: "John", age: 30 };

for (let key in person) {
  console.log(key + ": " + person[key]);
}

// 输出结果：
// name: John
// age: 30

遍历对象时，for-in 循环会遍历对象本身的属性以及继承自原型链的属性。如果你只需要遍历对象本身的属性，可以使用 hasOwnProperty() 方法来检查属性是否为对象本身的属性。例如：

for (let key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key + ": " + person[key]);
  }
}

2. for-of 循环

for-of 循环用于遍历可迭代对象（如数组和字符串）。与 for-in 循环不同，for-of 循环通过遍历集合中的值，而不是属性。例如：

const fruits = ["apple", "banana", "orange"];

for (let fruit of fruits) {
  console.log(fruit);
}

// 输出结果：
// apple
// banana
// orange

注意，这里的 fruit 是一个变量，它代表了 fruits 数组中的每个值。

for-of 循环不能用于遍历普通对象，因为普通对象没有实现迭代器协议。

3. for-in 和 for-of 在遍历数组上的区别

在遍历数组时，for-in 和 for-of 有不同的行为。for-in 循环遍历的是数组中的索引，而 for-of 循环遍历的是数组中的值。

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

// for-in 循环遍历数组的索引
for (let index in numbers) {
  console.log(index); // 输出 0 1 2 3 4
}

// for-of 循环遍历数组的值
for (let number of numbers) {
  console.log(number); // 输出 1 2 3 4 5
}

4. for-in 和 for-of 在遍历包含对象的数组上的区别

当遍历包含对象的数组时，for-in 循环和 for-of 循环的区别更加明显。

const people = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 }
];

// for-in 循环遍历数组的索引
for (let index in people) {
  console.log(index); // 输出 0 1
}

// for-of 循环遍历数组的值
for (let person of people) {
  console.log(person.name + ": " + person.age); // 输出 John: 30 Jane: 25
}

为了遍历包含对象的数组并访问对象的属性，必须使用 for-of 循环。如果使用 for-in 循环，会访问到数组的索引，而不是对象的属性。