🗺️ مقدمة إلى كائن Map في جافا سكريبت: دليلك الشامل للمبتدئين

مرحباً بك في رحلة تعلم JavaScript! اليوم سنتعرف على واحد من هياكل البيانات المهمة وهي كائنات Map. إذا كنت معتاداً على الكائنات العادية (Objects)، فاستعد لاكتشاف طريقة أكثر مرونة وقوة لتخزين البيانات!

🤔 ما هو كائن Map؟

كائن Map هو مجموعة من العناصر حيث يتم تخزين كل عنصر على شكل زوج مفتاح وقيمة (Key-Value Pair). يشبه هذا الفكرة إلى حد كبير الكائن العادي، لكن مع بعض المميزات الإضافية الهامة.

الفكرة الأساسية: تخزين البيانات بطريقة يمكنك من خلالها الوصول إليها باستخدام مفتاح محدد.

// مثال بسيط: تخزين أسماء الطلاب وأعمارهم
// Key: Student name
// Value: Student age

🆚 ما الفرق بين Map والكائن العادي (Object)؟

قد تتساءل: "لماذا نستخدم Map بينما لدينا كائنات عادية؟" إليك أهم الفروق:

  1. المفاتيح في Map يمكن أن تكون من أي نوع (أرقام، كائنات، دوال) بينما في الكائنات العادية تكون نصوصاً فقط
  2. الحفاظ على ترتيب الإضافة في Map بينما الكائنات العادية لا تضمن الترتيب
  3. أسهل في معرفة الحجم باستخدام خاصية .size
// في الكائن العادي
let student = {
    name: "Ahmed",
    age: 20
};

// في Map
let studentMap = new Map();

🔧 كيفية إنشاء كائن Map

لإنشاء كائن Map جديد، نستخدم الكلمة المفتاحية new Map():

// إنشاء Map فارغ
let myFirstMap = new Map();
console.log(myFirstMap); // Map(0) {}

// إنشاء Map مع قيم ابتدائية
let preFilledMap = new Map([
    ['name', 'Sarah'],
    ['age', 25],
    ['city', 'Riyadh']
]);
console.log(preFilledMap); // Map(3) {'name' => 'Sarah', 'age' => 25, 'city' => 'Riyadh'}

➕ إضافة عناصر إلى Map

لإضافة عناصر جديدة إلى Map، نستخدم الدالة set():

let studentMap = new Map();

// إضافة عناصر باستخدام set(key, value)
studentMap.set('name', 'Mohamed');
studentMap.set('age', 22);
studentMap.set('grade', 'A');

console.log(studentMap); // Map(3) {'name' => 'Mohamed', 'age' => 22, 'grade' => 'A'}

ملاحظة: إذا أضفت مفتاحاً موجوداً مسبقاً، سيتم تحديث قيمته وليس إضافة عنصر جديد.

🔍 قراءة القيم من Map

لقراءة قيمة عنصر معين، نستخدم الدالة get() مع تمرير المفتاح:

let productMap = new Map([
    ['name', 'Laptop'],
    ['price', 3000],
    ['brand', 'Dell']
]);

// قراءة القيم
console.log(productMap.get('name')); // 'Laptop'
console.log(productMap.get('price')); // 3000
console.log(productMap.get('color')); // undefined (لأن المفتاح غير موجود)

❌ حذف العناصر من Map

يمكننا حذف العناصر بعدة طرق:

let tasksMap = new Map([
    [1, 'Buy supplies'],
    [2, 'Finish exercises'],
    [3, 'Prepare dinner']
]);

// حذف عنصر محدد
tasksMap.delete(2);
console.log(tasksMap); // Map(2) {1 => 'Buy supplies', 3 => 'Prepare dinner'}

// حذف جميع العناصر
tasksMap.clear();
console.log(tasksMap); // Map(0) {}

📊 الخصائص الأساسية لـ Map

let exampleMap = new Map([
    ['a', 1],
    ['b', 2],
    ['c', 3]
]);

// معرفة عدد العناصر
console.log(exampleMap.size); // 3

// التحقق من وجود مفتاح
console.log(exampleMap.has('a')); // true
console.log(exampleMap.has('z')); // false

💡 مثال عملي متكامل

لنطبق ما تعلمناه في مثال واقعي: نظام إدارة مواعيد الطبيب

// إنشاء Map لمواعيد الطبيب
let doctorAppointments = new Map();

// إضافة مواعيد
doctorAppointments.set('10:00', 'Ahmed');
doctorAppointments.set('11:30', 'Fatima');
doctorAppointments.set('14:00', 'Khaled');

// التحقق من موعد محدد
if (doctorAppointments.has('11:30')) {
    console.log('The appointment is booked for: ' + doctorAppointments.get('11:30'));
}

// إلغاء موعد
doctorAppointments.delete('14:00');
console.log('Number of remaining appointments: ' + doctorAppointments.size);

🎯 خلاصة الدرس

تعلمنا في هذا الدرس:

  • ما هو كائن Map ومميزاته عن الكائنات العادية
  • كيفية إنشاء Map جديد
  • إدارة العناصر باستخدام set()، get()، delete()
  • الخصائص الأساسية مثل size و has()