في هذا الدرس 5تصفّح المواضيع
بينما تناسب الكائنات التقليدية تمثيل السجلات ذات الحقول النصية الثابتة، قدّم إصدار ES6 بنية Map بوصفها قاموساً متخصصاً عالي الأداء لأزواج المفتاح والقيمة. فبخلاف الكائن العادي الذي يحول المفاتيح قسراً إلى نصوص ويرث أسماء دوال جاهزة مثل toString، تحتفظ Map بالنوع الحقيقي لكل مفتاح وترتيب إدخاله وتوفر عدد الأزواج مباشرةً عبر map.size.
تُنشأ الخريطة فارغة عبر new Map() أو بتمرير مصفوفة ثنائية من الأزواج [key, value]، وتُضاف العناصر حصراً بالدالة map.set(key, value) التي تقبل التسلسل؛ أما الكتابة الخاطئة بالأقواس map[key] = value فتتجاهل مخزن الخريطة الداخلي وتبقى map.size صفراً!
const prices = new Map([
['HTML', 29],
['CSS', 35],
]);
prices.set('JS', 49).set('HTML', 25);
document.getElementById('map-set').textContent =
`Courses: ${prices.size} | HTML now: $${prices.get('HTML')}`;توفر Map واجهة دوال متكاملة للقراءة عبر get(key) والفحص عبر has(key) والحذف عبر delete(key) أو clear()، وتتضح أفضليتها في المقارنة التالية:
| المعيار | الخريطة Map | الكائن التقليدي {} |
|---|---|---|
| أنواع المفاتيح المدعومة | أي قيمة (كائنات، عناصر DOM، أرقام، نصوص) | النصوص والرموز Symbols فقط |
| تصادم المفاتيح الموروثة | لا يوجد؛ فضاء مفاتيح معزول ونقي تماماً | يرث أسماء دوال جاهزة مثل toString |
| معرفة عدد العناصر | مباشرة عبر خاصية map.size | يتطلب استدعاء Object.keys(obj).length |
| كثرة الإضافة والحذف | مصممة ومُحسّنة للتعديل المتكرر السريع | إعادة تشكيل داخلية أبطأ مع الحذف المتكرر |
في الكائن العادي يؤدي استخدام كائنين مختلفين كمفاتيح إلى تحويل كليهما للنص الواحد "[object Object]" فيمسح الثاني الأول! أما في Map فيعمل كل كائن أو عنصر DOM كمفتاح مرجعي مستقل، مما يسهّل ربط حالة الواجهة أو عدادات النقرات بعناصر الصفحة دون تلويث خصائصها.
يتيح المرور المباشر على الخريطة عبر for (const [key, value] of map) استخراج المفتاح والقيمة معاً بترتيب الإدخال بفضل صيغة التفكيك. كما يمكنك المرور على المفاتيح وحدها عبر map.keys() أو القيم وحدها عبر map.values() أو الدالة map.forEach((value, key) => ...).
const stock = new Map([
['Keyboard', 12],
['Monitor', 5],
['Headset', 19],
]);
const summary = [];
for (const [item, qty] of stock) {
summary.push(`${item}: ${qty}`);
}
document.getElementById('map-loop').textContent =
summary.join(' | ');ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس بناء وتحديث القواميس المفتاحية Map بالدالة set()، والقراءة والفحص عبر get() وhas() وsize، واستخدام الأرقام والكائنات كمفاتيح حقيقية دون تحويل قسري، والتكرار بالتفكيك عبر for...of. الخطوة التالية: انتقل إلى درس «الوحدات البرمجية Modules» لتنظيم المشاريع متعددة الملفات في وحدات معزولة نظيفة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Map الخريطة المفتاحية Map
- بنية قاموس مرتبة في ES6 تربط المفاتيح بالقيم وتقبل أي نوع بيانات للمفاتيح بمعزل عن الخصائص الموروثة.
- للمراجعة
- 02 map.set(key, value) دالة الإدراج والتحديث map.set
- تضيف زوج مفتاح وقيمة أو تحدث قيمته إن وُجد مسبقاً وترجع الخريطة نفسها لدعم التسلسل.
- للمراجعة
- 03 map.get(key) دالة الاسترجاع map.get
- ترجع القيمة المرتبطة بالمفتاح المطابق تماماً، أو القيمة undefined عند عدم وجوده.
- للمراجعة
- 04 Reference Key المفتاح المرجعي الكائني
- استخدام كائن أو عنصر DOM مباشرةً كمفتاح في Map تتم مطابقته بهوية عنوانه في الذاكرة دون تحويله لنص.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 DOM DOM
- Document Object Model
- عناصر شجرة المستند التي يمكن استخدامها مباشرةً كمفاتيح حقيقية داخل خريطة Map.
- للمراجعة
- 02 API API
- Application Programming Interface
- واجهة الدوال القياسية الموحدة لإدارة الإدراج والفحص والحذف في مجموعات اللغة الحديثة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افحص التبويبين الأول والثاني في محاكي Map لملاحظة التمييز الدقيق بين المفاتيح الرقمية والكائنية.
-
افتح محرر تجربة حلقة Map وأضف عنصراً جديداً بالدالة set ثم تحقق من ظهوره في نهاية الترتيب.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.