التكرار عبر الكائنات في JavaScript: تحليل كامل للمبتدئين

كيفية تكرار خصائص الكائن في JavaScript: من المبتدئ إلى المحترف

كل مطور يكتب بلغة JavaScript، عاجلاً أم آجلاً، يواجه مهمة: "كيف يمكنني المرور عبر جميع خصائص الكائن؟". إذا كنت معتاداً على العمل مع المصفوفات، حيث توجد for و forEach و map، فقد تبدو الكائنات غير مطواعة. لكن لا تتعجل في الإحباط! في هذه المقالة، سنشرح جميع طرق التكرار عبر الكائن في JavaScript — من الكلاسيكي for...in إلى الحديث Object.keys() و Object.values() و Object.entries().

لن نعرض فقط الصياغة. سنشرح أي طريقة تختار لمهمة محددة، وما هي المزالق الموجودة، وكيف لا تقع في فخ الخصائص الموروثة. هيا بنا!

ما هو الكائن في JavaScript ولماذا تحتاج إلى تكراره؟

الكائن هو مجموعة من أزواج "مفتاح: قيمة". على عكس المصفوفة، حيث يتم ترتيب العناصر حسب الفهرس، في الكائن لا يتم ضمان ترتيب الخصائص (على الرغم من أن المحركات الحديثة تحاول الحفاظ عليه).

تخيل أن لديك كائنًا يحتوي على بيانات مستخدم:

const user = {\n  name: 'آنا',\n  age: 28,\n  city: 'موسكو',\n  isAdmin: false\n};

تحتاج إلى عرض جميع البيانات على الشاشة، أو إرسالها إلى الخادم، أو ببساطة حساب شيء ما. بدون التكرار، سيتعين عليك كتابة user.name و user.age وهكذا — هذا غير مرن ولا يتوسع. ماذا لو كان الكائن يحتوي على 50 خاصية؟ هنا تأتي طرق التكرار لإنقاذك.

الطريقة رقم 1: الكلاسيكي for...in

أقدم وأبسط طريقة لتكرار خصائص الكائن هي استخدام حلقة for...in. تم إنشاؤها خصيصًا للكائنات.

const user = {\n  name: 'آنا',\n  age: 28,\n  city: 'موسكو'\n};\n\nfor (let key in user) {\n  console.log(key + ': ' + user[key]);\n}\n// الإخراج:\n// name: آنا\n// age: 28\n// city: موسكو

هنا key هو اسم الخاصية (قيمة نصية)، و user[key] هو قيمتها.

مهم! for...in لا يتكرر فقط عبر الخصائص الخاصة بالكائن، بل أيضًا عبر تلك الموروثة عبر سلسلة النماذج الأولية. قد يؤدي هذا إلى نتائج غير متوقعة، خاصة إذا قمت بتوسيع النماذج الأولية للكائنات المضمنة (وهو ما لا ينبغي فعله، لكن من يدري).

لتجنب ذلك، استخدم طريقة hasOwnProperty:

for (let key in user) {\n  if (user.hasOwnProperty(key)) {\n    console.log(key + ': ' + user[key]);\n  }\n}

البديل الحديث هو Object.hasOwn() (ES2022):

for (let key in user) {\n  if (Object.hasOwn(user, key)) {\n    console.log(key + ': ' + user[key]);\n  }\n}

متى تستخدم for...in؟ عندما تحتاج إلى أسماء الخصائص (المفاتيح) وتكون متأكدًا من أنك لن تواجه خصائص موروثة. أو عندما تعمل مع كائنات بسيطة تم إنشاؤها باستخدام حرفية {}.

الطريقة رقم 2: Object.keys() — نحصل على مصفوفة من المفاتيح

طريقة Object.keys() ترجع مصفوفة من الخصائص القابلة للتعداد الخاصة بالكائن (غير الموروثة). هذه هي الطريقة الأكثر شيوعًا وأمانًا للتكرار في الوقت الحالي.

const user = {\n  name: 'آنا',\n  age: 28,\n  city: 'موسكو'\n};\n\nconst keys = Object.keys(user);\nconsole.log(keys); // ['name', 'age', 'city']\n\n// الآن يمكنك استخدام forEach أو for...of\nkeys.forEach(key => {\n  console.log(key + ': ' + user[key]);\n});

الميزة: تحصل على مصفوفة عادية، يمكنك فعل أي شيء بها — تصفية، تحويل، فرز.

مثال مع التصفية:

const filteredKeys = Object.keys(user).filter(key => key !== 'isAdmin');\nfilteredKeys.forEach(key => console.log(user[key]));

متى تستخدم Object.keys()؟ في جميع الحالات تقريبًا