为什么 for .. in 获取所有属性，但 for .. of 没有获取所有值？

Question

我测试了以下代码：

arr = [3, 5, 7];

arr.foo = "hello";

arr["boo"] ="moo"


for (i in arr) {
   console.log(i);
}

for (i of arr) {
   console.log(i); 
}

for .. in 获取 all 数组的属性。

for (i in arr) {
   console.log(i); 
}

返回：

0 
1 
2 
foo 
boo

但是对于 .. of 并没有得到所有的值

  for (i of arr) {
       console.log(i); 
    }

返回：

3
5
7

造成这种差异的技术原因是什么？为什么这种明显的不一致被接受为默认行为？

Answer 1

for (... in ...) 语法可用于任何对象，并将遍历该对象的所有属性。从技术上讲，这个循环将遍历对象中的任何属性，这些属性在内部定义为 [[Enumerbale]] 属性设置为 true。

for (... of ...) 语法是 ES6 中的新语法，它特定于 集合，而不是所有对象。它提供了一种迭代集合元素的简写方式，而不必使用带有索引的普通for 或while 循环。它将以这种方式遍历具有[Symbol.iterator] 属性的任何集合的任何元素。

这不是“不一致”，它们是两个不同的运算符，旨在用于两个不同的目的。我可以理解像arr["boo"] ="moo" 这样的操作会如何向数组中添加一个元素——因为您可以通过类似的语法访问数组的元素，如arr[0]。但是很容易确认它们实际上并不相同 - 使用arr["boo"] ="moo"，您正在创建一个也可以由arr.boo 访问的属性，但尝试通过@987654331 访问数组的元素@ 将是一个语法错误，因为它们与属性不同。

Answer 2

您试图将数组视为对象或关联数组（不是 JavaScript 中的东西）。

这是一个数组；非整数属性永远不会是数组的值，这就是 for...of 将得到的。

您正在向arr 对象添加额外属性，但期望arr.foo 的值出现在for..of 中就像期望arr.length 的值出现一样。