Object.entries(): تطبيق عملي وتحليل الكود خطوة بخطوة

📚 مراجعة سريعة: هذا التطبيق العملي مبني على مفهوم برمجي أساسي. راجع الدرس النظري من هنا أولاً.

---

Object.entries(): تطبيق عملي وتحليل الكود خطوة بخطوة

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

تحليل الكود الأساسي

لنبدأ بالكود الذي بين أيدينا:

const user = { name: "أحمد", role: "مطور", city: "الرياض" };const entries = Object.entries(user);console.log(entries); // [["name","أحمد"], ["role","مطور"], ["city","الرياض"]]

1. الكائن الأصلي: user

السطر الأول يقوم بتعريف كائن JavaScript بسيط يسمى user. هذا الكائن يحتوي على ثلاث خصائص (أو أزواج مفتاح-قيمة):

• name بقيمة "أحمد"
• role بقيمة "مطور"
• city بقيمة "الرياض"

const user = { name: "أحمد", role: "مطور", city: "الرياض" };

هذا هو الكائن الذي نريد تحويله.

2. استخدام Object.entries()

السطر الثاني هو جوهر العملية. هنا، نقوم باستدعاء الدالة الثابتة Object.entries() ومررنا لها الكائن user كوسيطة:

const entries = Object.entries(user);

ما يحدث هنا هو أن JavaScript تمر على كل خاصية قابلة للتعداد في الكائن user وتقوم بإنشاء مصفوفة فرعية لكل زوج [مفتاح, قيمة]. ثم تجمع كل هذه المصفوفات الفرعية في مصفوفة واحدة كبيرة. النتيجة يتم تخزينها في المتغير entries.

3. عرض النتيجة: console.log(entries)

السطر الأخير يقوم بطباعة محتويات المتغير entries إلى وحدة التحكم (console) في المتصفح أو بيئة Node.js:

console.log(entries);

الناتج سيكون:

[["name","أحمد"], ["role","مطور"], ["city","الرياض"]]

كما ترى، لقد حصلنا على مصفوفة تحتوي على ثلاث مصفوفات فرعية، كل منها يمثل مفتاحًا وقيمة من الكائن user الأصلي.

أمثلة تطبيقية إضافية

لنستكشف بعض الطرق الشائعة لاستخدام entries بعد الحصول عليها:

مثال 1: التكرار على الخصائص

يمكننا استخدام حلقة for...of مع تفكيك المصفوفة (array destructuring) للتكرار بسهولة على كل زوج مفتاح-قيمة:

const user = { name: "سارة", age: 30, country: "مصر" };const userEntries = Object.entries(user);for (const [key, value] of userEntries) {  console.log(`المفتاح: ${key}, القيمة: ${value}`);}// الناتج:// المفتاح: name, القيمة: سارة// المفتاح: age, القيمة: 30// المفتاح: country, القيمة: مصر

مثال 2: تحويل البيانات لغرض العرض

تخيل أنك تريد عرض تفاصيل الكائن في قائمة HTML. يمكنك استخدام map():

const product = { id: 101, item: "كتاب", price: 25 };const productHtmlList = Object.entries(product)  .map(([key, value]) => `
${key}: ${value}
`)  .join('');console.log(`
${productHtmlList}
`);// الناتج (سلسلة HTML):// <ul><li><strong>id:</strong> 101</li><li><strong>item:</strong> كتاب</li><li><strong>price:</strong> 25</li></ul>

💡 نصيحة المطور: عند التعامل مع الكائنات التي قد تحتوي على خصائص ذات قيم معقدة (مثل كائنات متداخلة أو مصفوفات)، تذكر أن Object.entries() ستعيد هذه القيم كما هي. ستحتاج إلى منطق إضافي لمعالجة هذه القيم بشكل متكرر إذا كنت ترغب في "تسطيح" الكائن بالكامل.

خاتمة

الآن بعد أن قمت بتحليل الكود وتطبيق Object.entries() عمليًا، يجب أن تكون لديك فهم قوي لكيفية استخدامها لتحويل الكائنات إلى مصفوفات من أزواج المفتاح-القيمة. هذه الدالة لا تقدر بثمن لتبسيط عمليات التكرار والتحويل في JavaScript.