مقدمة Arrays في JavaScript للمبتدئين: كيف تخزن قائمة بيانات في متغير واحد؟
تخيّل أنك تريد تخزين أسماء 100 طالب. هل ستنشئ 100 متغير؟ الحل الأفضل هو Array في JavaScript.
إذا كنت تبحث عن ما هي المصفوفة في JavaScript أو كيف أنشئ Array أو متى أستخدم array بدل متغير عادي، فهذا الدرس يعطيك الأساس العملي.
ما هي Array في JavaScript؟
المصفوفة هي متغير خاص يخزن عدة قيم في قائمة واحدة. بدلاً من متغير لكل عنصر، تجمعهم جميعاً في Array واحدة.
قاعدة بسيطة: Array = صندوق كبير فيه عناصر مرتبة.
لماذا نستخدم Arrays؟
- تنظيم البيانات المتشابهة في مكان واحد.
- سهولة التكرار والمعالجة باستخدام الحلقات.
- تقليل عدد المتغيرات في الكود.
- سهولة الإضافة والحذف لاحقاً عبر methods.
1) إنشاء Array بطريقة مباشرة
const students = ['أحمد', 'سارة', 'خالد', 'ليلى'];
ماذا يفعل هذا الكود؟ ينشئ مصفوفة أسماء داخل متغير واحد.
النتيجة المتوقعة: أصبح عندك قائمة منظمة من 4 عناصر.
خطأ شائع: استخدام أقواس {} بدل [] عند تعريف Array.
2) Array من أرقام (مثال درجات)
const scores = [18, 15, 20, 13, 17];
console.log(scores);
ماذا يفعل هذا الكود؟ يخزن مجموعة درجات في مصفوفة واحدة.
النتيجة المتوقعة: طباعة قائمة الدرجات كاملة.
خطأ شائع: كتابة الأرقام كنصوص بدون سبب مثل '18'.
3) هل يمكن مزج أنواع مختلفة؟
const mixed = ['Sara', 22, true, null];
console.log(mixed);
ماذا يفعل هذا الكود؟ يوضح أن JavaScript تسمح بأنواع مختلفة داخل نفس array.
النتيجة المتوقعة: القائمة تحتوي نصاً ورقماً وقيمة منطقية وnull.
خطأ شائع: الإكثار من المزج عشوائياً مما يصعب فهم الكود لاحقاً.
4) مقارنة سريعة: متغيرات منفصلة vs Array
// متغيرات منفصلة
let city1 = 'Rabat';
let city2 = 'Casablanca';
let city3 = 'Marrakesh';
// Array أنظف
const cities = ['Rabat', 'Casablanca', 'Marrakesh'];
ماذا يفعل هذا الكود؟ يظهر كيف تختصر Arrays الكود وتنظمه.
النتيجة المتوقعة: التعامل مع القيم يصبح أسهل خاصة مع الحلقات.
خطأ شائع: الاستمرار في نمط city1/city2/city3 ثم صعوبة الصيانة.
Story قصيرة: من 30 متغير إلى Array واحدة
مبتدئ كان يخزّن أسماء المنتجات في متغيرات منفصلة. عند إضافة منتج جديد، اضطر لتعديل أماكن كثيرة. بعد التحويل إلى Array، صار التوسّع أسهل بكثير.
النتيجة في المتصفح (Console concept)
const products = ['Phone', 'Laptop', 'Keyboard'];
console.log(products);Checklist سريعة قبل استخدام Array
- هل لديك قائمة من القيم المتشابهة؟ استخدم Array.
- هل استخدمت
[]لتعريف المصفوفة بشكل صحيح؟ - هل نوع البيانات داخل القائمة منظم وواضح؟
- هل اخترت اسم Array يعبّر عن محتواها (مثل
students)؟
users وorders لتوضيح أنها تحتوي عدة عناصر.
روابط المتابعة بعد هذا الدرس
الخطوة التالية مباشرة: الوصول لعناصر المصفوفة (Index) ثم أشهر methods للمصفوفات في JavaScript.
الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)
ما هي Array في JavaScript؟
هي بنية بيانات تخزن عدة قيم داخل متغير واحد.
لماذا أستخدم Array بدل متغيرات كثيرة؟
لأنها تنظّم البيانات وتسهّل التكرار والمعالجة والصيانة.
هل يمكن أن تحتوي Array على أنواع مختلفة؟
نعم، لكن يفضّل الحفاظ على نوع متناسق قدر الإمكان لسهولة الفهم.
كيف أكتب Array في JavaScript؟
باستخدام الأقواس المربعة مثل: const items = [1, 2, 3].
ما أول خطوة بعد مقدمة Arrays؟
تعلم الوصول للعناصر عبر index ثم تعلّم methods الأساسية للإضافة والحذف.
للمتابعة مباشرة: ابدأ بدرس الوصول لعناصر المصفوفة (Index) ثم انتقل إلى أشهر methods للمصفوفات في JavaScript.