JavaScript的for...of循环

Question

在MDN中，https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/for...of，它说for...in循环遍历的是属性名，而for...of循环遍历的是属性值。那么，为什么第二个for...of没有输出"hello"呢？

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

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

for (let i of arr) {
   console.log(i); // logs "3", "5", "7"
}

- Xuzheng Wang

---

使用 forEach 和 for..of 迭代数组时，只会遍历从零到 length-1 的索引位置的属性（即使值为 undefined）。而使用 for..in 则不同，它会遍历任何可枚举的属性。 - Touffy

非常感谢您的及时回复。现在，我不知道如何接受您的答案 :-) - Xuzheng Wang

抱歉，我正在写一些更详细的内容，请给我几分钟 :) - Touffy

Answer 1

for...in语句按任意顺序迭代对象的可枚举属性，包括原型链中的可枚举属性。

更确切地说，这包括原型链中的可枚举属性。对于每个对象都是相同的。虽然在数组上使用for..in语句会让很多人感到困惑，但它很简单明了。

for..of内部使用Symbol。任何带有[Symbol.iterator]的对象都可以被for..of迭代，但是迭代的内容和顺序由Symbol定义，而不是语句本身的语义（允许延迟迭代器，其中属性最初未知）。

在数组的情况下，迭代器遍历从零到数组的length-1之间的每个属性，甚至是未定义的属性，这些属性无法通过for..in获取。但它完全忽略其他属性，就像自始至终的Array.toString()和ES5中的Array.forEach()及其相关函数一样。这使得数组迭代变得一致。

- Touffy

---

非常感谢您的回答，我希望其他遇到相同问题的人也能从中受益 :-) - Xuzheng Wang

事实上，这是我今天写的第二个与for..in array相关的答案。数组适用于有编号、有序的值。 - Touffy

这是正确的，arr.foo = "hello" 应该作为键值对在对象中使用。 - Xuzheng Wang