JavaScript中的for ... in和for ... of循环有什么区别？

Z时代
2024-01-10
分类：综合

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

这两个循环都对某事进行迭代。它们之间的主要区别在于它们迭代的内容。

1）for ...在循环中

此循环以任意顺序遍历对象的可枚举属性。它只关心属性，而不关心值。

在下面的示例中，通过使用for ... in循环，可以迭代数组的属性。由于它是一个数组，因此Index是重要的属性，因此将迭代每个元素的索引并将其显示在输出中。除索引外，还将显示一些继承的属性，例如“ inherProp2 ”，“ inherProp1 ”。

示例1

<html>
<body>
<script>
   Object.prototype.inherProp1 = function() {};
   Array.prototype.inherProp2= function() {};
   var org = ["Apple", "Microsoft", "Tesla"]
   org.anotherOrg = "solarCity";
   for (var key in org) {
      document.write(key);
      document.write("</br>");
}
</script>
</body>
</html>

输出结果

anotherOrg // own property

inherProp2 // inherited property

inherProp1 // inherited property

在下面的示例中，由于使用了hasOwnProperty()，因此仅显示自己的属性（例如索引）和其他属性，而不会显示继承的属性（例如“ inherProp1 ”和“ inherProp2 ”）。

示例2

<html>
<body>
<script>
   Object.prototype.objCustom = function() {};
   Array.prototype.arrCustom = function() {};
   var org = ["Apple", "Microsoft", "Tesla"]
   org.anotherOrg = "solarCity";
   for (var i in org) {
      if (org.hasOwnProperty(i)) {
         document.write(i);
         document.write("</br>");
      }
   }
</script>
</body>
</html>

输出结果

anotherOrg

2）for ... of循环

与 for ... in循环不同，for ... of循环迭代对象定义要迭代的值。

在以下示例中，使用for ... of循环在输出中显示“ Apple ”，“ Microsoft ”和“ Tesla ”等属性。

示例

<html>
<body>
<script>
   var org = ["Apple", "Microsoft", "Tesla"]
   for (var key of org) {
   document.write(key);
   document.write("</br>");
}
</script>
</body>
</html>