كيفية تكرار كائن في JavaScript: 5 طرق مع أمثلة

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

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

\n\n

يواجه كل مطور عاجلاً أم آجلاً مهمة: "كيف يمكنني المرور عبر جميع خصائص الكائن؟". السؤال شائع جداً لدرجة أنه حصد آلاف المشاهدات ومئات الإجابات على Stack Overflow. وهذا ليس مفاجئاً - فالكائنات في JavaScript هي أساس كل شيء: من الإعدادات إلى البيانات القادمة من الخادم.

\n\n

في هذا البرنامج التعليمي، سنستعرض جميع الطرق الأساسية لتكرار كائن في JavaScript، من الطرق الكلاسيكية إلى الأساليب الحديثة. ستتعرف على متى تستخدم for...in، وما الذي يجعل Object.keys أفضل، وكيف يبسط Object.entries الحياة. هيا بنا!

\n\n

التحضير: إنشاء كائن اختباري

\n\n

لجعل الأمثلة واضحة، سنأخذ كائن مستخدم بسيط:

\n\n

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

\n\n

مهمتنا هي عرض جميع المفاتيح والقيم. دعنا نرى الأدوات المتاحة في ترسانة JavaScript.

\n\n

1. حلقة for...in - الكلاسيكية

\n\n

أقدم وأبسط طريقة لتكرار خصائص الكائن. ظهرت في ES3 وتعمل في جميع المتصفحات.

\n\n

for (let key in user) {\n  console.log(key + ': ' + user[key]);\n}\n// name: آنا\n// age: 28\n// city: موسكو\n// isAdmin: false

\n\n

ملاحظة مهمة: for...in لا يكرر الخصائص الخاصة فقط، بل أيضاً الخصائص الموروثة عبر النموذج الأولي. لتصفيتها، استخدم hasOwnProperty:

\n\n

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

\n\n

نادراً ما تحتوي الكائنات الحديثة على خصائص نموذج أولي زائدة، لكن عادة التحقق باستخدام hasOwnProperty ستحميك من الأخطاء عند العمل مع المكتبات.

\n\n

2. Object.keys() - النهج الحديث

\n\n

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

\n\n

const keys = Object.keys(user);\nconsole.log(keys); // ['name', 'age', 'city', 'isAdmin']\n\nkeys.forEach(key => {\n  console.log(key + ': ' + user[key]);\n});

\n\n

المزايا:

يعمل فقط مع الخصائص الخاصة (غير الموروثة)
يعيد مصفوفة - يمكن استخدام forEach، map، filter
كود قابل للقراءة ويمكن التنبؤ به

\n\n

هذه هي طريقتي المفضلة عندما أحتاج فقط إلى الحصول على قائمة المفاتيح والعمل معها.

\n\n

3. Object.values() - عندما تحتاج فقط إلى القيم

\n\n

أحياناً نهتم فقط بقيم الخصائص، دون المفاتيح. على سبيل المثال، للتجميع أو عرض البيانات.

\n\n

const values = Object.values(user);\nconsole.log(values); // ['آنا', 28, 'موسكو', false]\n\nvalues.forEach(value => {\n  console.log(value);\n});

\n\n

ظهرت هذه الطريقة في ES2017 وهي مناسبة تماماً للعمل مع مجموعات البيانات حيث لا أهمية للمفاتيح.

\n\n

4. Object.entries() - ملك الطرق

\n\n

Object.entries() يعيد مصفوفة من المصفوفات، حيث كل مصفوفة داخلية هي زوج [مفتاح, قيمة]. هذه أداة متعددة الاستخدامات لتكرار كائن في JavaScript.

\n\n

const entries = Object.entries(user);\nconsole.log(entries);\n// [\n//   ['name', 'آنا'],\n//   ['age', 28],\n//   ['city', 'موسكو'],\n//   ['isAdmin', false]\n// ]\n\nentries.forEach(([key, value]) => {\n  console.log(`${key}: ${value}`);\n});

\n\n

لاحظ التفكيك في معاملات forEach: ([key, value]). هذا يجعل الكود نظيفاً وموجزاً.

\n\n

متى تستخدم: