JavaScript 中的 for...in 和 for...of 循环有什么区别?
javascriptobject oriented programmingprogramming
for...in 和 for...of 循环的区别
这两个循环都会迭代某些内容。它们之间的主要区别在于迭代的内容。
1) for...in 循环
此循环以任意顺序迭代对象的可枚举属性。它只关心属性而不关心值。
在下面的示例中，通过使用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>
输出
0 1 2 anotherOrg // 自身属性 inherProp2 // 继承属性 inherProp1 // 继承属性
在下面的例子中，由于使用了 hasOwnProperty()，因此只显示自身属性(例如 indexes )和其他属性，而不显示继承属性(例如 "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>
输出
0 1 2 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>
输出
Apple Microsoft Tesla
