JavaScript中for...of和for...in循环的区别-CFANZ编程社区

for...of循环

MDN定义：

for...of语句创建循环来迭代可迭代对象，包括：内置字符串、数组、类数组对象（例如，参数或NodeList）、TypedArray、Map、Set以及用户定义的可迭代对象。

也就是说，for...of循环仅适用于可迭代对象。JavaScript中的可迭代对象，是可以循环遍历的对象。String、Array、TypedArray、Map和Set都是内置的可迭代对象，因为它们的原型对象都实现了@@iterator方法。因此，for...of循环适用于上述提到的对象类型。JavaScript中的对象默认是不可迭代的。因此，for...of循环不适用于对象。简而言之，for...of可以处理字符串和数组，但不能处理对象。

例如：

cosnt str = "Hello World";

for(element of str) {
  console.log(element);
}
// H e l l o " " W o r l d

for...in循环

MDN 定义

for...in语句迭代对象的所有以字符串为键的可枚举属性（忽略以Symbols为键的对象），包括继承的可枚举属性。

我们上面说到，for...of不适用于（非可迭代的）对象，那么我们如何遍历对象的键和值呢？答案是for...in循环。

for...in适用于可枚举标志设置为true的那些属性。

通过简单赋值或属性初始值设定项创建的属性，其可枚举标志默认为true。
通过Object.defineProperty创建的属性，其可枚举标志默认为false。

例如：

const student = {
    registration: "123456",
    name: "Sandeep",
    age: 33,
}

for(key in student) {
  console.log(key, student[key]);
}
/*
registration "123465"

name "Sandeep"

age 33
*/

现在我们向student对象添加一个新属性（marks），并将其可枚举标志设置为false。随着我们将可枚举标志设置为false，marks键不会出现在for...in循环的结果中。

const student = {
    registration: "123456",
    name: "Sandeep",
    age: 33,
}

Objec.defineProperty(student, "marks", {
  value: 98,
  enumerable: false,
})

console.log(student.marks);
// 98

for(key in student) {
  console.log(key, student[key]);
}
/*
registration "123465"

name "Sandeep"

age 33
*/

// marks键不会出现在for...in循环的结果中.

for...in也适用于字符串和数组，因为字符串和数组属性的可枚举标志在默认情况下也是true。简而言之，使用for...in来循环对象。虽然for...in也可用于字符串和数组，但不建议。

总结

for...of —— 用于循环字符串和数组。

for...in —— 用于循环对象。