المصفوفات Arrays في JavaScript

5:00 دقائق مجاني
في الدروس السابقة تعلمنا المتغيرات، لكن المتغير الواحد يخزن قيمة واحدة فقط. ماذا لو أردنا تخزين قائمة أسماء؟ أو درجات طلاب؟ هنا تأتي المصفوفات (Arrays).

ما هي المصفوفة؟

المصفوفة هي متغير خاص يمكنه تخزين أكثر من قيمة داخل متغير واحد.

كل قيمة داخل المصفوفة لها رقم يُسمّى الفهرس (index) ويبدأ من 0.

إنشاء مصفوفة

مثال على مصفوفة تحتوي أسماء: 


let names = ["أحمد", "سارة", "محمد", "نورة"];

هنا:

  • names[0] = "أحمد"
  • names[1] = "سارة"
  • names[2] = "محمد"
  • names[3] = "نورة"

الوصول إلى عناصر المصفوفة 


let fruits = ["تفاح", "موز", "برتقال"];

console.log(fruits[0]); // تفاح
console.log(fruits[2]); // برتقال

⚠️ إذا طلبت رقم فهرس غير موجود، النتيجة ستكون undefined.

تعديل عنصر داخل المصفوفة 


let colors = ["أحمر", "أزرق", "أخضر"];

colors[1] = "أسود";

console.log(colors);
// ["أحمر", "أسود", "أخضر"]

استبدلنا القيمة الموجودة في الفهرس 1 فقط.

عدد عناصر المصفوفة (length) 


let students = ["علي", "فاطمة", "خالد"];

console.log(students.length); // 3

خاصية length تخبرك بعدد العناصر داخل المصفوفة.

التكرار على المصفوفة باستخدام for 


let names = ["أحمد", "سارة", "محمد"];

for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

هنا استخدمنا length حتى لا نكتب عدد العناصر يدويًا.

إضافة وحذف عناصر (push / pop)

push (إضافة في النهاية)


let numbers = [1, 2, 3];
numbers.push(4);

console.log(numbers);
// [1, 2, 3, 4]

pop (حذف من النهاية)


let numbers = [1, 2, 3];
numbers.pop();

console.log(numbers);
// [1, 2]

مثال واقعي: درجات الطلاب 


let grades = [80, 90, 70, 85];
let total = 0;

for (let i = 0; i < grades.length; i++) {
  total += grades[i];
}

let average = total / grades.length;
console.log(average);

مثال بسيط لكنه يستخدم في تطبيقات حقيقية جدًا.

أخطاء شائعة مع المصفوفات

  • نسيان أن الفهرس يبدأ من 0
  • الكتابة خارج حدود المصفوفة
  • عدم استخدام length داخل الحلقات
  • الخلط بين المصفوفة والمتغير العادي

من خبرتي: المصفوفات في كل مشروع تقريبًا

المصفوفات من أكثر ما ستتعامل معه كمطوّر JavaScript. كل قائمة تراها على موقع — منتجات، تعليقات، رسائل، نتائج بحث — هي في الأصل مصفوفة بيانات تمرّ عليها حلقة لتبنيها على الشاشة. لذلك إتقانها الآن استثمار مباشر فيما ستفعله لاحقًا.

نصيحة من تجربتي: تعوّد على الدوال الجاهزة للمصفوفات مثل push للإضافة وlength لمعرفة العدد. ولاحقًا ستكتشف دوالًّ قوية مثل map لتحويل كل عنصر، وfilter لاختيار عناصر بشرط — هذه الثلاث تحديدًا أستخدمها يوميًا، وهي ما يجعل التعامل مع البيانات أنيقًا. لا تحفظها الآن، فقط اعلم أنها بانتظارك حين تتقن الأساس.

التباس شائع: المصفوفة تُنسخ بالمرجع

هذا تفصيل أوقع كثيرين في حيرة، وأنا منهم في البدايات: حين تُسند مصفوفة إلى متغيّر آخر، فإنك لا تنسخها، بل يصبح المتغيّران يشيران إلى المصفوفة نفسها. فإذا عدّلت أحدهما، يتغيّر الآخر معه.

قد يبدو هذا غريبًا، لكنه سلوك مقصود في اللغة. القاعدة العملية: إن أردت نسخة مستقلة فعلًا لتعديلها دون التأثير على الأصل، فهناك طرق خاصة للنسخ ستتعلّمها لاحقًا. الآن يكفي أن تعرف أن المصفوفات تتصرّف هكذا حتى لا تتفاجأ حين يتغيّر متغيّر لم تلمسه.

من مشاريعي: النمط الذي ستكرّره آلاف المرات

دعني أشاركك نمطًا عمليًا اكتشفت أنني أكرّره في كل مشروع تقريبًا، وفهمه الآن سيوفّر عليك حيرة لاحقًا. أي قائمة تراها على موقع — منتجات، تعليقات، إشعارات — تُبنى بثلاث خطوات: بيانات في مصفوفة، ثم حلقة تمرّ عليها، ثم بناء عنصر صفحة لكل قيمة.

بصفتي مطوّر واجهات، أنصحك أن تثبّت هذا الترتيب في ذهنك مبكرًا، فهو جوهر عرض أي بيانات على الشاشة. وتجربتي علّمتني نصيحة وقائية مهمّة: قبل أن تعرض المصفوفة، تحقّق أنها ليست فارغة، واعرض رسالة لطيفة مثل "لا توجد عناصر بعد" بدل ترك الصفحة بيضاء محيّرة. هذه اللمسة الصغيرة تفرّق بين واجهة هاوٍ وواجهة محترف يفكّر في تجربة المستخدم. ونصيحة أخيرة من التجربة: احتفظ ببياناتك في المصفوفة كمصدر وحيد للحقيقة، وأعد بناء الواجهة منها عند كل تغيير، بدل تعديل عناصر الصفحة يدويًا هنا وهناك — فهذا يبقي بياناتك وشاشتك متطابقتين دائمًا ويجنّبك أخطاءً يصعب تتبّعها.

ماذا بعد هذا الدرس؟

الدرس القادم: الكائنات Objects

سنتعلم كيف نخزن بيانات مع خصائصها مثل المستخدم (اسم، عمر، بريد).

الدرس التالي ← العودة لصفحة الدورة