ความแตกต่างระหว่าง for...in และ for...of loops
ลูปทั้งสองวนซ้ำบางสิ่ง ความแตกต่างหลักระหว่างพวกเขาคือสิ่งที่พวกเขาทำซ้ำ
1) สำหรับ...วนซ้ำ
วนซ้ำนี้วนซ้ำ คุณสมบัติที่นับได้ ของวัตถุในลำดับใดก็ได้ เน้นเฉพาะคุณสมบัติแต่ไม่เน้นค่า
ในตัวอย่างต่อไปนี้โดยใช้ for...in วน คุณสมบัติ ของอาร์เรย์จะถูกทำซ้ำ เนื่องจากเป็นอาร์เรย์ ดัชนี เป็นคุณสมบัติที่สำคัญ ดังนั้นดัชนีของแต่ละองค์ประกอบจะถูกวนซ้ำและแสดงในผลลัพธ์ นอกเหนือจากการจัดทำดัชนีคุณสมบัติที่สืบทอดมาบางอย่าง เช่น "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) สำหรับ...ของลูป
ไม่เหมือนกับสำหรับ...ใน วนซ้ำ สำหรับ...ของ วนซ้ำค่าที่วัตถุกำหนดจะวนซ้ำ
ในตัวอย่างต่อไปนี้ คุณสมบัติเช่น 'Apple ', 'ไมโครซอฟท์ ' และ 'เทสลา ' จะแสดงในผลลัพธ์โดยใช้ for...of วนซ้ำ
ตัวอย่าง
<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
