javascript - 为什么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 获取数组的所有属性。

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

返回:

0 
1 
2 
foo 
boo

但是 for .. 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，但尝试通过 arr.0 访问数组元素将是语法错误，因为它们与属性不同。