( for... in ) 和 (for... of ) 语句有什么区别？

Question

我知道什么是 for... in 循环（它遍历键），但我第一次听说 for... of （它遍历值）。

我对 for... of 循环感到困惑。

var arr = [3, 5, 7];
arr.foo = "hello";

for (var i in arr) {
  console.log(i); // logs "0", "1", "2", "foo"
}

for (var i of arr) {
  console.log(i); // logs "3", "5", "7"
  // it doesn't log "3", "5", "7", "hello"
}

我理解 for... of 迭代属性值。那为什么它不记录 "3", "5", "7", "hello" 而不是 "3", "5", "7" ？

与 for... in 循环不同，它遍历每个键（ "0", "1", "2", "foo" ）并遍历 foo 键， for... of 不会 遍历值 foo 属性，即 "hello" 。为什么会这样？

在这里，我安慰 for... of 循环。它应该记录 "3", "5", "7","hello" 但它记录 "3", "5", "7" 。为什么？

示例链接

原文由 Mukund Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

for in 循环遍历对象的可枚举属性名称。

for of （ES6 中的新功能）确实使用了一个 特定于对象的 迭代器 并循环由它生成的值。

在您的示例中， 数组迭代器 确实产生了数组中的所有值（忽略非索引属性）。

原文由 Bergi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我在 Iterators and Generators 找到了一个完整的答案（虽然它是针对 TypeScript 的，但对于 JavaScript 也是一样的）

for..of 和 for..in 语句遍历列表；迭代的值是不同的， for..in 返回被迭代对象的键列表，而 for..of 返回被迭代对象的数字属性的值列表。

下面是一个演示这种区别的示例：

 let list = [4, 5, 6];

for (let i in list) {
   console.log(i); // "0", "1", "2",
}

for (let i of list) {
   console.log(i); // "4", "5", "6"
}

另一个区别是 for..in 对任何对象进行操作；它用作检查此对象的属性的一种方式。 for..of 另一方面，主要对可迭代对象的值感兴趣。内置对象，如 Map 和 Set 实现 Symbol.iterator 允许访问存储值的属性。

 let pets = new Set(["Cat", "Dog", "Hamster"]);
pets["species"] = "mammals";

for (let pet in pets) {
   console.log(pet); // "species"
}

for (let pet of pets) {
    console.log(pet); // "Cat", "Dog", "Hamster"
}

原文由 Alireza Fattahi 发布，翻译遵循 CC BY-SA 4.0 许可协议