نوفيل
الرئيسيةالكورساتالتحديات⚔️ المبارزاتالمقالاتالأدواتتغريداتالمجتمع
دخولابدأ مجاناً
نوفيل

منصة تعليم البرمجة الأولى بالعربي. تعلم من الصفر حتى الاحتراف مع كورسات احترافية وتحديات ذكاء اصطناعي.

المنصة

  • الكورسات
  • التحديات
  • المقالات
  • الأدوات

الحساب

  • إنشاء حساب
  • تسجيل الدخول
  • لوحة التحكم
  • الملف الشخصي

روابط

  • سياسة الخصوصية
  • شروط الاستخدام
  • عن نوفيل
  • تواصل معنا

© 2026 نوفيل. جميع الحقوق محفوظة.

صُنع بـ في مصر

نوفيل
الرئيسيةالكورساتالتحديات⚔️ المبارزاتالمقالاتالأدواتتغريداتالمجتمع
دخولابدأ مجاناً
AN

منهج Angular v22.1

دليل مرجعي شامل

كل اللغات
مدرسة البرمجة/منهج Angular v22.1/التعامل مع المصفوفات

التعامل مع المصفوفات

المصفوفات في تايبسكربتTypeScript Arrays, Tuplesالتعامل مع القوائم في Angularأنواع البيانات المعقدة

جدول مرجعي سريع

1
النمط البرمجيالشرح بالعربية
المصفوفة القياسية (Standard Array)تخزين مجموعة متجانسة من العناصر من نفس النوع مع السماح بالتعديل والإضافة
المصفوفة المقيدة (Tuple)تخزين عناصر محددة العدد بترتيب صارم وأنواع بيانات مختلفة لكل موقع
مصفوفة الحماية الثابتة (Readonly Array)حماية القوائم الثابتة ومنع أي تعديل أو إضافة عناصر جديدة بعد التهيئة

الشرح

في أي تطبيق ويب حقيقي، نادراً ما نتعامل مع بيانات مفردة؛ فغالباً ما نستقبل قوائم تحتوي على عشرات أو مئات العناصر (مثل قائمة المنتجات، قائمة المستخدمين، أو رسائل الإشعارات). في لغة TypeScript وداخل بيئة تطوير Angular 22.1، يتم التعامل مع هذه القوائم من خلال المصفوفات (Arrays) والمصفوفات المحددة (Tuples) مع ضمان أن تكون الأنواع آمنة بالكامل ومحمية من الأخطاء.

تفصيل التعامل مع المصفوفات و Tuples في TypeScript

المصفوفات العادية (Standard Arrays):

يمكننا تعريف المصفوفة بإضافة الأقواس المربعة [] بعد نوع البيانات (وهي الطريقة الأكثر شيوعاً واحترافية)، مما يضمن أن أي عنصر تحاول إضافته خارج نوع البيانات المحدد سيتم رفضه فوراً من محرر الأكواد.

المصفوفات المحددة (Tuples):

تعتبر ميزة متقدمة تتيح لك إنشاء مصفوفة بعدد عناصر ثابت وترتيب أنواع محدد بدقة. على سبيل المثال، لتمثيل بيانات مستخدم تتكون من (معرف رقمي + اسم نصي)، فإن Tuple هو الخيار الأمثل.

أمثلة برمجية: تطبيق عملي على المصفوفات

المثال الأول: إنشاء والتعامل مع مصفوفة عادية في مكون Angular

هنا نقوم بتعريف مصفوفة لأسماء الأقسام وكيفية إضافة عنصر جديد بأمان:

typescript
1// مصفوفة نصوص لتخزين الأقسام
2let categories: string[] = ['إلكترونيات', 'ملابس', 'مفروشات'];
3
4// إضافة عنصر جديد بالطريقة الصحيحة
5categories.push('أتباع الغذاء');
6
7// خطأ برمجوي يكتشفه المحرر إذا حاولت إدخال رقم:
8// categories.push(500);

المثال الثاني: استخدام Tuple لتمثيل بيانات مركبة

typescript
1// تعريف Tuple يتكون حصراً من رقم (ID) يليه نص (الاسم)
2let employee: [number, string] = [101, 'محمد خالد'];
3
4// استخدام صحيح للبيانات
5let empId: number = employee[0];
6let empName: string = employee[1];
7
8// خطأ: لا يمكنك تبديل الأماكن أو إضافة أنواع خاطئة
9// employee = ['محمد خالد', 101];

نصائح احترافية

  • —استخدم مصفوفات القراءة فقط (Readonly Array) للبيانات الثابتة!
  • —عندما تتعامل مع قوائم لا يجب أن تتغير أثناء دورة حياة المكون (مثل قائمة الصلاحيات الثابتة أو حالات الطلب الأساسية)، قم بتعريفها كـ readonly. هذا يمنع الدوال الأخرى من تعديل البيانات بالخطأ، مما يجعل تطبيقك أكثر استقراراً وأماناً.

الدرس السابق

مقدمة إلى المزخرفات واهميتها

الدرس التالي

إنشاء أنواع بيانات مخصصة باستخدام الواجهات

نوفيل

منصة تعليم البرمجة الأولى بالعربي. تعلم من الصفر حتى الاحتراف مع كورسات احترافية وتحديات ذكاء اصطناعي.

المنصة

  • الكورسات
  • التحديات
  • المقالات
  • الأدوات

الحساب

  • إنشاء حساب
  • تسجيل الدخول
  • لوحة التحكم
  • الملف الشخصي

روابط

  • سياسة الخصوصية
  • شروط الاستخدام
  • عن نوفيل
  • تواصل معنا

© 2026 نوفيل. جميع الحقوق محفوظة.

صُنع بـ في مصر