شرح Arrays في JavaScript للمبتدئين | إنشاء المصفوفات والوصول للعناصر
شرح Arrays في JavaScript للمبتدئين | إنشاء المصفوفات والوصول للعناصر
بعد أن تعلمت المتغيرات وأنواع البيانات في JavaScript، ستحتاج إلى طريقة لتخزين أكثر من قيمة داخل متغير واحد. وهنا تأتي Arrays أو المصفوفات.
بدلًا من إنشاء متغير منفصل لكل اسم:
let student1 = "Ahmed";
let student2 = "Ali";
let student3 = "Omar";يمكنك وضع جميع الأسماء داخل Array واحدة:
let students = ["Ahmed", "Ali", "Omar"];وهذا يجعل التعامل مع مجموعة من البيانات أسهل بكثير.
ما هي الـ Array؟
الـ Array هي نوع من أنواع هياكل البيانات في JavaScript، وتسمح لك بتخزين مجموعة من القيم داخل متغير واحد.
مثال:
let fruits = ["Apple", "Banana", "Orange"];
الـ Array هنا اسمها fruits وتحتوي على ثلاثة عناصر.
يمكنك أيضًا إنشاء Array فارغة:
let fruits = [];إنشاء Array تحتوي على أرقام
لا يشترط أن تحتوي الـ Array على نصوص فقط، فمن الممكن تخزين الأرقام:
let numbers = [10, 20, 30, 40];ومثال آخر لدرجات الطلاب:
let grades = [90, 85, 70, 95];ويمكن أيضًا أن تحتوي على أنواع مختلفة من القيم:
let data = ["Hisham", 17, true];لكن في البداية، من الأفضل التركيز على الأمثلة البسيطة.
ما هو الـ Index؟
عند إنشاء Array، يحصل كل عنصر بداخلها على رقم يسمى Index، ونستخدم هذا الرقم للوصول إلى العنصر.
وهنا توجد قاعدة مهمة جدًا:
الـ Index يبدأ من 0 وليس من 1.
مثلًا:
let fruits = ["Apple", "Banana", "Orange"];يكون ترتيب العناصر:
Apple → 0
Banana → 1
Orange → 2إذن أول عنصر رقمه 0، والثاني 1، والثالث 2.
الوصول إلى عناصر الـ Array
للوصول إلى عنصر معين، نكتب اسم الـ Array ثم رقم الـ Index بين الأقواس المربعة.
let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits[0]);الناتج:
Appleوللوصول إلى العنصر الثاني:
console.log(fruits[1]);الناتج:
Bananaوالعنصر الثالث:
console.log(fruits[2]);الناتج:
Orangeمثال آخر
let languages = ["HTML", "CSS", "JavaScript", "Python"];
console.log(languages[2]);الناتج:
JavaScriptلأن JavaScript موجودة في الـ Index رقم 2.
ماذا يحدث إذا استخدمنا Index غير موجود ؟
إذا حاولت الوصول إلى عنصر غير موجود، فستكون النتيجة:
undefinedمثال:
let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits[5]);لا يوجد عنصر في Index رقم 5، لذلك ستكون النتيجة:
undefinedتعديل عنصر داخل Array
يمكنك تغيير قيمة أي عنصر باستخدام الـ Index الخاص به.
مثال:
let fruits = ["Apple", "Banana", "Orange"];
fruits[1] = "Mango";
console.log(fruits);الناتج:
["Apple", "Mango", "Orange"]كان العنصر الموجود في Index رقم 1 هو Banana، وقمنا بتغييره إلى Mango.
مثال آخر:
let colors = ["Red", "Blue", "Green"];
colors[0] = "Black";
console.log(colors);الناتج:
["Black", "Blue", "Green"]معرفة عدد العناصر باستخدام length
إذا أردت معرفة عدد العناصر الموجودة داخل Array، يمكنك استخدام length.
let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits.length);الناتج:
3لأن الـ Array تحتوي على ثلاثة عناصر.
ومثال آخر:
let numbers = [10, 20, 30, 40, 50];
console.log(numbers.length);الناتج:
5أما الـ Array الفارغة:
let numbers = [];
console.log(numbers.length);فستكون النتيجة:
0الفرق بين length والـ Index
قد يحدث بعض الالتباس بين length والـ Index.
إذا كانت لدينا:
let fruits = ["Apple", "Banana", "Orange"];فإن عدد العناصر هو:
3لكن آخر Index هو:
2لأن العد يبدأ من 0:
Apple → 0
Banana → 1
Orange → 2ويمكنك تذكر هذه القاعدة:
آخر Index = length - 1أمثلة عملية
مثال 1: أسماء الطلاب
let students = ["Ahmed", "Ali", "Omar"];
console.log(students[1]);الناتج:
Aliمثال 2: درجات الطلاب
let grades = [80, 90, 75, 95];
console.log(grades[2]);الناتج:
75مثال 3: تغيير قيمة
let numbers = [10, 20, 30];
numbers[0] = 100;
console.log(numbers);الناتج:
[100, 20, 30]مثال 4: معرفة عدد العناصر
let countries = ["Egypt", "Germany", "England", "France"];
console.log(countries.length);الناتج:
4أخطاء شائعة عند استخدام Arrays
1. نسيان أن الـ Index يبدأ من 0
إذا أردت الوصول إلى أول عنصر:
let fruits = ["Apple", "Banana", "Orange"];
console.log(fruits[0]);وليس:
console.log(fruits[1]);لأن fruits[1] هو العنصر الثاني.
2. استخدام Index غير موجود
let numbers = [10, 20, 30];
console.log(numbers[5]);الناتج:
undefined3. الخلط بين length وآخر Index
إذا كان لديك أربعة عناصر، فإن:
numbers.lengthتساوي 4، لكن آخر Index هو 3.
خلاصة الدرس
الـ Array تسمح لك بتخزين مجموعة من القيم داخل متغير واحد.
لإنشاء Array:
let fruits = ["Apple", "Banana", "Orange"];للوصول إلى عنصر:
console.log(fruits[0]);لتعديل عنصر:
fruits[0] = "Mango";لمعرفة عدد العناصر:
console.log(fruits.length);وأهم قاعدة في هذا الدرس:
الـ Index يبدأ من 0 وليس من 1.
إذا فهمت إنشاء الـ Arrays، والـ Index، والوصول إلى العناصر، وتعديلها، واستخدام length، فقد فهمت أهم الأساسيات التي تحتاجها للانتقال إلى الدروس القادمة. 🚀
🎯 اختبر نفسك الآن !!!!
تهانينا! لقد أنهيت هذا الدرس بنجاح. 🎉
لكن هل فهمت كل ما تعلمته بالفعل؟
لا تكتفِ بالقراءة، بل اختبر معلوماتك من خلال الاختبار التفاعلي الذي صممته خصيصًا لهذا الدرس ضمن سلسلة Hisham Academy.
تعليم
🧠 مميزات الاختبار:
أسئلة متنوعة تقيس مدى فهمك.
نتيجة فورية بعد الانتهاء.
تصميم بسيط وسريع يعمل على الهاتف والكمبيوتر.
أجهزةاتصالات
يساعدك على معرفة نقاط القوة والجوانب التي تحتاج إلى مراجعتها.
🔗 ابدأ الاختبار الآن:
https://hishamabdulrashid999.github.io/test_12/
اضغط هنا للبدء في الاختبار
📚 تابع الدرس التالي في سلسلة Hisham Academy ولا تنسَ حفظ المقال ومشاركته مع من يريد تعلم برمجة الويب من الصفر.
وأخبرني رأيك في التعليقات هل فعلاً أستفدت من هذا المقال
