JavaScript中的for ... in和for ... of循环有什么区别?
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>
输出结果
0 1 2 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>
输出结果
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