JavaScript 中for/of,for/in 的详细介绍

当我们需要遍历一个对象或数组的时候，可以使用 JavaScript 中的 for/of 或 for/in 循环语句。但是它们的使用方式和适用范围有所不同，本文将带你详细介绍这两种循环的语法规则和使用场景。

for/of

for/of 循环主要用于遍历可迭代对象（Iterable），例如数组、Map、Set 等。

for/of 循环语法：

for (variable of iterable) {
  // Code block to be executed
}

其中，variable 是变量名，用于保存每次迭代时的值。iterable 是可迭代对象，也就是需要遍历的对象。在每一次循环，变量 variable 都将已经被分配了一个可迭代对象的下一个值。

以下是一个遍历数组的示例代码：

const myArray = [10, 20, 30, 40, 50];

for (const element of myArray) {
  console.log(element);
}

输出结果：

10
20
30
40
50

另一个示例是，遍历 Map 对象：

const myMap = new Map([
  ['name', '张三'],
  ['age', 18],
  ['gender', '男']
]);

for (const [key, value] of myMap) {
  console.log(`${key}: ${value}`);
}

输出结果：

name: 张三
age: 18
gender: 男

for/in

for/in 循环主要用于遍历对象的属性，例如一个普通对象。

for/in 循环语法：

for (variable in object) {
  // Code block to be executed
}

其中，variable 是变量名，用于保存每次迭代时的属性名称。object 是要遍历的对象。

以下是遍历对象属性的示例代码：

const person = {
  name: '张三',
  age: 18,
  gender: '男'
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

输出结果：

name: 张三
age: 18
gender: 男

需要注意的是，for/in 循环也会遍历对象原型链上的属性，因此需要先使用 hasOwnProperty() 方法来判断当前属性是否为对象自身的属性。

const person = {
  name: '张三',
  age: 18,
  gender: '男'
};

person.__proto__.address = '北京市';

for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(`${key}: ${person[key]}`);
  }
}

输出结果：

name: 张三
age: 18
gender: 男

通过以上的例子，我们可以看出 for/of 和 for/in 循环语句的异同点。for/of 循环用于遍历可迭代对象，而 for/in 用于遍历对象的属性。需要根据具体场景来选择使用哪种循环语句。