إستخدام 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 :النتيجة
النتيجة:
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 :النتيجة
النتيجة:
Developer
101
IT