JavaScript 中 for...of 和 for...in 循环之间的区别。

大家好，

在我学习 JavaScript 的时候，for-of 和 for-in 循环的区别确实困扰了我。这篇博客，我将尝试彻底解答我的困惑。

让我们逐一了解一下。

for...of 循环

MDN 定义：

for...of 语句创建一个循环，对可迭代对象进行迭代，包括：内置 String、Array、类数组对象（例如，参数或 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 语句遍历对象的所有以字符串为键的可枚举属性（忽略以符号为键的属性），包括继承的可枚举属性。

解释：

那么，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 key does not show up in the for...in loop result.

for...in 也适用于字符串和数组，因为字符串和数组属性的可枚举标志默认也是 true。

• 简单来说，使用 for...in 循环遍历对象。虽然 for...in 可以循环处理字符串和数组，但不建议这样做。

结论

• for...of——用于循环字符串和数组。
• for...in——用于循环对象。

这篇文章就到这里。

谢谢你！