حلقة `for...in` في JavaScript: كيفية استخدامها لتكرار خصائص الكائنات

حلقة `for...in` هي من هياكل التحكم في JavaScript التي تُستخدم لتكرار خصائص الكائنات. سنقوم في هذا الشرح بشرح كيفية استخدامها بالتفصيل مع أمثلة عملية.

كيف تعمل حلقة `for...in`؟

عند استخدام حلقة `for...in`، يتم تكرار الخصائص القابلة للتمرير (enumerable) في كائن معين. يتم تنفيذ الكود داخل الحلقة مرة لكل خصية من الخصائص.

 مثال عملي على استخدام حلقة `for...in`

فلنفترض أن لدينا كائن `students` يحتوي على معلومات الطلاب، ونريد بناء قائمة HTML تعرض هذه المعلومات:

var students = [
{ name: "Ahmed", grade: "40", gradePercentage: "50", status: "passed" },
{ name: "Mohammed", grade: "30", gradePercentage: "37.5", status: "N/P" },
{ name: "Basel", grade: "60", gradePercentage: "75", status: "passed" },
{ name: "Nader", grade: "20", gradePercentage: "25", status: "N/P" },
{ name: "Mahmoud", grade: "70", gradePercentage: "87.5", status: "passed" },
{ name: "Wael", grade: "80", gradePercentage: "100", status: "passed" },
{ name: "Belal", grade: "50", gradePercentage: "62.5", status: "passed" }
];

var _ol = document.getElementById('score');
var html_students = '';

students.forEach(function(student) {
html_students += '<li>';
if (student.name) {
html_students += '<h3>' + student.name + '</h3>';
delete student.name;
}
html_students += '<ol>';
for (var key in student) {
html_students += '<li>' + key + ': ' + student[key] + '</li>';
}
html_students += '</ol></li>';
});

_ol.innerHTML += html_students;

يزات استخدام حلقة `for...in`

-  تُستخدم `for...in` للوصول إلى جميع الخصائص المتاحة داخل كائن معين، مما يسهل عمليات التحليل والتلاعب بها.

-  يمكن استخدام حلقة `for...in` لتكرار الخصائص في أي كائن قابل للتمرير بدون الحاجة إلى تحديد العناصر بشكل مباشر.

-  بفضل بنية `for...in`، يمكن تقليل كمية الكود المطلوبة لتكرار الخصائص بداخل كائن.

الخلاصة

يمكنك بناء شرحٍ منسق ومتسلسل يوضح كيفية استخدام حلقة `for...in` بشكل واضح ومفهوم لقراء مدونتك.