Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing

إستخدام Map في TypeScript لتنظيم البيانات

  • مقدمة
  • مفهوم الـ Map
  • الفرق بين الـ Map و الـ Object
  • مثال على استخدام Map
  • مثال على استخدام object

مقدمة

كمطور تطبيقات ويب و جوال، تُعد إدارة البيانات و تنظيمها بشكل فعال من الأساسيات التي تساهم بشكل كبير في تحسين كفاءة التطبيقات. واحدة من هذه الأدوات هي Map و التي هي بمثابة هيكل بيانات ( Data Structure ) يسمح بتخزين العلاقات بين المفاتيح ( Keys ) و القيم ( Values ).

في هذا المقال، سأشارك تجربتي في استخدام Map لتنظيم بيانات المشاريع و الصور المرتبطة بكل مشروع، و كيف ساعدتني في تحسين كفاءة العمل في عرض قائمة المشاريع في لوحة تحكم التطبيق.

مفهوم الـ Map

الـ Map في TypeScript هو نوع من أنواع الكائنات ( Objects ) يُستخدم لتخزين البيانات على شكل أزواج من القيم، حيث تكون كل قيمة مرتبطة بمفتاح فريد، مما يعني أنها تتيح تخزين كل مفتاح مع قيمته الخاصة. و هي تسمح بالوصول للقيمة باستخدام المفتاح الخاص بها.

الفرق بين الـ Map و الـ Object

Map و Object كلاهما يُستخدمان لتخزين البيانات كمجموعات من المفاتيح و القيم. الفرق الرئيسي بينهما هو أنّ Map يدعم أنواع مفاتيح متنوعة و يحفظ ترتيب العناصر في حين أن Object محدود في نوع المفاتيح (نصوص و رموز) و لا يهتم بترتيب الإدراج.

الخاصية Map Object
نوع المفتاح أي نوع (رقم، نص، كائن...) نصوص أو رموز فقط
ترتيب العناصر يحفظ الترتيب لا يحفظ الترتيب
الوظائف المدمجة set get has delete فقط الوصول عبر المفتاح

مثال على استخدام Map

في المثال التالي أنشأنا كائن نوعه Map و جربنا فيه إضافة عناصر، البحث عن عناصر، حذف عناصر، عرض قيم العناصر.

مثال

// employees إسمه Map هنا قمنا بإنشاء كائن
let employees = new Map<any, any>();

// "Developer" و قيمته "Ibrahim" مفتاحه employees هنا قمنا بإضافة عنصر في الكائن
employees.set("Ibrahim", "Developer");

// "Manager" مفتاحه 101 و قيمته employees هنا قمنا بإضافة عنصر في الكائن
employees.set(101, "Manager");

// "Ibrahim" هنا قمنا بطباعة قيمة العنصر الذي يملك المفتاح
console.log(employees.get("Ibrahim")); // Developer :النتيجة

// 101 هنا قمنا بطباعة قيمة العنصر الذي يملك المفتاح
console.log(employees.get(101)); // Manager :النتيجة

// "Ibrahim" يملك عنصر مفتاحه employees هنا قمنا بطباعة ما إن كان الكائن
console.log(employees.has("Ibrahim")); // true :النتيجة

// 101 يملك عنصر مفتاحه employees هنا قمنا بطباعة ما إن كان الكائن
console.log(employees.has(102)); // false :النتيجة

// employees من الكائن "Ibrahim" هنا قمنا بحذف العنصر الذي يملك المفتاح
employees.delete("Ibrahim");

// مع علمنا بأنه لم يعد موجوداً "Ibrahim" هنا حاولنا طباعة قيمة العنصر الذي يملك المفتاح
console.log(employees.get("Ibrahim")); // لأنها غير موجودة undefined :النتيجة

// "Ibrahim" يملك عنصر مفتاحه employees هنا قمنا بطباعة ما إن كان الكائن
console.log(employees.has("Ibrahim")); // لأنه تم حذفه false :النتيجة

النتيجة:

Developer
Manager
true
false
undefined
false

مثال على استخدام object

في المثال التالي أنشأنا كائن نوعه object وضعنا فيه 4 خصائص، ثم قمنا بعرض قيمها.
ملاحظة: إستخدمنا الدالة Symbol() لضمان الحصول على أسماء موحدة للخصائص.

مثال

// departmentKey و الثانية في المتغير employeeId هنا قمنا بإنشاء قيمتين موحدتين، الأولى قمنا بتخزينها في المتغير
const employeeId = Symbol("id");
const departmentKey = Symbol("department");

// وضعنا فيه 4 خصائص employee هنا قمنا بإنشاء كائن إسمه
const employee = {
    name: "Ibrahim", // إسم هذه الخاصية وضعناه كنص عادي
    jobTitle: "Developer", // إسم هذه الخاصية وضعناه كنص عادي
    [employeeId]: 101, // employeeId إسم هذه الخاصية هو القيمة الموحدة التي يمثلها المتغير
    [departmentKey]: "IT" // departmentKey إسم هذه الخاصية هو القيمة الموحدة التي يمثلها المتغير
};

// employee هنا قمنا بطباعة قيم خصائص الكائن
console.log(employee.name); // Ibrahim :النتيجة
console.log(employee.jobTitle); // Developer :النتيجة
console.log(employee[employeeId]); // 101 :النتيجة
console.log(employee[departmentKey]); // IT :النتيجة

النتيجة:

Ibrahim
Developer
101
IT
آخر تحديث في 26-03-2025

ibrahim alomar

خريج من كلية الهندسة المعلوماتية، شغوف بتطوير البرمجيات وبرمجة تطبيقات الويب وأتمتع بمهارات قوية في حل المشكلات والخوارزميات، وسبق لي العمل على العديد من المشاريع البرمجية التي عززت من قدراتي التقنية والعملية وأسعى باستمرار للتعلم وتطوير نفسي .

تعليقات

لا يوجد أي تعليق بعد

أضف تعليق

يجب تسجيل الدخول حتى تتمكن من إضافة تعليق أو رد.