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

حتى الآن كان كل متغير يحمل قيمة واحدة. لكن ماذا لو أردت أن تحفظ أسماء 30 طالباً في فصلك؟ لن تنشئ 30 متغيراً! في هذا الدرس ستتعلم المصفوفات (Arrays): كيف تحفظ قائمة كاملة في متغير واحد، وتضيف إليها وتحذف منها، وتمر عليها، وتحوّلها بدوال قوية مثل map و filter.

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

المصفوفة قائمة مرتبة من القيم. تخيّلها مثل قطار له عربات مرقّمة، وكل عربة تحمل قيمة. نكتبها بين قوسين مربعين، ونفصل بين القيم بفواصل:

let fruits = ["تفاح", "موز", "برتقال"];
console.log(fruits[0]);
console.log(fruits.length);

الناتج

تفاح
3

مثل حروف النص تماماً، العناصر مرقّمة من صفر: fruits[0] أول عنصر، و fruits[2] الثالث. و .length تعطيك عدد العناصر.

تعديل عنصر

يمكنك تغيير أي عنصر برقمه:

fruits[1] = "مانجو";
console.log(fruits);
console.log(fruits[5]);

الناتج

[ 'تفاح', 'مانجو', 'برتقال' ]
undefined

وإذا طلبت رقماً غير موجود، تحصل على undefined.

ملاحظة

المصفوفة المعرّفة بـ const يمكن تعديل عناصرها والإضافة إليها. ما تمنعه const هو فقط استبدال المصفوفة كلها بمصفوفة أخرى.

الإضافة والحذف والبحث

let cart = ["قلم", "دفتر"];

cart.push("مسطرة");       // أضف في النهاية
console.log(cart);

let last = cart.pop();    // احذف آخر عنصر وأرجعه
console.log(last);
console.log(cart);

console.log(cart.includes("قلم")); // هل موجود؟
console.log(cart.indexOf("دفتر")); // ما رقمه؟

الناتج

[ 'قلم', 'دفتر', 'مسطرة' ]
مسطرة
[ 'قلم', 'دفتر' ]
true
1

push و pop تعملان على نهاية المصفوفة، مثل كومة صحون: تضع الصحن الجديد فوق، وتأخذ من فوق.

المرور على العناصر

يمكنك استخدام حلقة for العادية، لكن JavaScript توفر طريقتين أسهل:

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

for (const color of colors) {
  console.log(color);
}

colors.forEach((color, index) => {
  console.log(index, color);
});

الناتج

أحمر
أخضر
أزرق
0 أحمر
1 أخضر
2 أزرق

• for...of تعطيك كل عنصر مباشرة: «لكل لون في الألوان…».
• forEach تأخذ دالة (غالباً سهمية) وتستدعيها مع كل عنصر ورقمه.

map: حوّل كل عنصر

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

const prices = [10, 25, 40];
const doubled = prices.map((p) => p * 2);
console.log(doubled);
console.log(prices);

الناتج

[ 20, 50, 80 ]
[ 10, 25, 40 ]

لاحظ أن المصفوفة الأصلية لم تتغير.

filter: اختر بعض العناصر

filter تأخذ دالة تُرجع true أو false، وتحتفظ فقط بالعناصر التي أعطت true. مثل مصفاة الشاي: تحتفظ بما تريده وتترك الباقي يمر.

const scores = [45, 80, 92, 30, 67];
const passed = scores.filter((s) => s >= 50);
console.log(passed);

الناتج

[ 80, 92, 67 ]

join: من مصفوفة إلى نص

console.log(["أحمد", "سارة", "علي"].join(" و "));

الناتج

أحمد و سارة و علي

معلومة

map و filter من أكثر الدوال استخداماً في JavaScript الحديثة، خصوصاً مع مكتبات مثل React. أتقنهما جيداً وستوفر على نفسك كتابة حلقات كثيرة.

جرّب بنفسك

قائمة مهام صغيرة. أضف مهام جديدة بـ push، وغيّر شرط filter، وجرّب map لتحويل كل المهام:

جرّب بنفسكJavaScript

محرر الكود (JavaScript)const tasks = ["مذاكرة", "رياضة"]; tasks.push("قراءة"); console.log(`عندك ${tasks.length} مهام:`); tasks.forEach((task, i) => console.log(`${i + 1}. ${task}`)); const long = tasks.filter((t) => t.length > 5); console.log(long);

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• البدء بالرقم 1: أول عنصر هو arr[0]، وآخر عنصر هو arr[arr.length - 1].
• توقع أن map تغيّر الأصل: map و filter تُرجعان مصفوفة جديدة، فاحفظ النتيجة في متغير.
• نسيان return داخل map: إذا استخدمت أقواساً معقوفة في الدالة السهمية دون return، ستحصل على مصفوفة مليئة بـ undefined.

اختبر نفسك

سؤال

ما ناتج [5, 10, 15].filter((n) => n > 7)؟

[ 10, 15 ][ 5 ][ true, true ]

سؤال

إذا كانت const nums = [3, 7, 9]، فما قيمة nums[nums.length - 1]؟

3undefined9

الخلاصة

• المصفوفة قائمة مرتبة بين [ ]، وعناصرها مرقّمة من صفر، و .length عددها.
• push تضيف في النهاية، و pop تحذف من النهاية، و includes تبحث.
• for...of و forEach للمرور على العناصر.
• map تحوّل كل عنصر، و filter تختار بعض العناصر، وكلتاهما تُرجعان مصفوفة جديدة.
• join تحوّل المصفوفة إلى نص.