في هذا الدرس 6تصفّح المواضيع
قبل عرض الكائن في واجهة التطبيق، احرص على تنظيم كتابته داخل المحرر بوضع كل زوج key: value في سطر مستقل مع إضافة فاصلة ختامية (Trailing Comma) بعد آخر خاصية.
تُعد الفاصلة الختامية صياغة قياسية صحيحة تماماً في JavaScript، وتسهل إضافة خصائص جديدة أو إعادة ترتيب الأسطر دون الوقوع في أخطاء نسيان الفواصل.
![مخطط مقارنة ظهور [object Object] عند الطباعة المباشرة مقابل استخراج المفاتيح والقيم والأزواج](/lesson-assets/tutorials/javascript/java-script-print-object/l028-object-inspection-extractors.svg)
يُفاجأ كل متعلم في بداياته بظهور العبارة الغامضة [object Object] فور محاولة عرض كائن كامل مباشرةً عبر element.textContent = user! والسبب التقني هو أن الكائنات العادية—بخلاف المصفوفات—ترث دالة التحويل النصي الافتراضية العامة التي تكتفي بإرجاع وسم النوع الداخلي "[object Object]" دون قراءة الخصائص.
في الواجهات الحقيقية، تتمثل الطريقة الأنظف لعرض بطاقة بيانات في اختيار الخصائص المحددة التي تهم الزائر وتنسيقها داخل قالب نصي مقروء ثم تمريرها بأمان إلى textContent.
const speaker = {
name: 'Dr. Salma',
topic: 'Web Security',
hall: 'B2',
};
document.getElementById('spk-out').textContent =
`${speaker.name} — ${speaker.topic} (Hall ${speaker.hall})`;عندما تريد جمع قيم الكائن كلها دفعةً واحدة دون كتابة كل مفتاح يدوياً، استدعِ الدالة القياسية Object.values(obj)؛ فهي ترجع مصفوفة حقيقية تضم قيم الخصائص، مما يتيح لك وصلها فوراً بالدالة .join(" | ") لعرضها بتنسيق أنيق:
| الدالة القياسية | الكائن المدخل | شكل المصفوفة المرجعة |
|---|---|---|
Object.keys(obj) | { a: 10, b: 20 } | ["a", "b"] |
Object.values(obj) | { a: 10, b: 20 } | [10, 20] |
Object.entries(obj) | { a: 10, b: 20 } | [["a", 10], ["b", 20]] |
const plan = { tier: 'Team', seats: 15, region: 'MENA' };
const labels = Object.keys(plan).join(', ');
const vals = Object.values(plan).join(' | ');
document.getElementById('val-out').textContent =
`Fields (${labels}): ${vals}`;تحول الدالة Object.entries(obj) الكائن إلى مصفوفة ثنائية الأبعاد من الأزواج [key, value]—رابطةً مهارات المصفوفات المتداخلة من الفصل الرابع بالكائنات مباشرةً! وبذلك يمكنك قراءة أول خاصية عبر pairs[0] أو آخر خاصية نصية عبر pairs.at(-1).
const server = { host: 'db.local', port: 5432, tls: true };
const pairs = Object.entries(server);
const firstPair = pairs[0].join(': ');
const lastPair = pairs.at(-1).join(': ');
document.getElementById('ent-out').textContent =
`First [${firstPair}] | Last [${lastPair}]`;لأغراض الفحص البرمجي السريع حالياً، يتيح تمرير الكائن إلى console.log(server) أو console.table(server) تصفح جميع خصائصه تفاعلياً في لوحة المطور، بينما تتكفل القوالب النصية ودوال Object.values وObject.entries ببناء واجهات عرض أنيقة للزائر.
وفي الفصل التاسع عشر المخصص لتنسيق البيانات، سنتعمق في أداة التسلسل النصي الشامل JSON.stringify لتحويل الكائنات المتداخلة بالكامل إلى نصوص قياسية صالحة للنقل الشبكي والتخزين.
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس تنسيق الكائن بأسطر متعددة مع الفاصلة الختامية، وتفسير ظهور [object Object]، وعرض الخصائص المحددة، واستخراج المصفوفات عبر Object.keys() وObject.values() وObject.entries(). الخطوة التالية: انتقل الآن إلى درس «دوال وخصائص الكائنات في JavaScript» لإضافة وحذف وفحص الخصائص وبناء الدوال الداخلية باستخدام this.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 [object Object] وسم النوع الافتراضي [object Object]
- السلسلة النصية الافتراضية التي ينتجها تحويل الكائن العادي مباشرةً إلى نص دون تحديد خصائصه.
- للمراجعة
- 02 Object.values(obj) دالة استخراج القيم Object.values
- دالة قياسية ترجع مصفوفة تحتوي جميع قيم الخصائص الذاتية الموجودة داخل الكائن.
- للمراجعة
- 03 Object.entries(obj) دالة استخراج الأزواج Object.entries
- دالة قياسية ترجع مصفوفة ثنائية الأبعاد يمثل كل عنصر فرعي فيها زوجاً من [المفتاح، القيمة].
- للمراجعة
- 04 Trailing Comma الفاصلة الختامية بالكائن
- فاصلة اختيارية توضع بعد آخر خاصية في الكائن متعدد الأسطر لتسهيل الإضافات اللاحقة بسلام.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 JSON JSON
- JavaScript Object Notation
- تنسيق نصي خفيف لتبادل البيانات مستلهم من صياغة الكائنات والمصفوفات في JavaScript.
- للمراجعة
- 02 UI UI
- User Interface
- واجهة المستخدم التي تُعرض فيها خصائص الكائن المنتقاة بتنسيق مقروء وآمن.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال استخراج المفاتيح والقيم في محرر التجربة وأضف خاصية رابعة price: 49 للكائن وتحقق من النتيجة.
-
بدّل بين التبويبات الثلاثة في المحاكي للمقارنة بين [object Object] واستخراج القيم والأزواج.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.