الوصول لعناصر Array في JavaScript: شرح Index ولماذا يبدأ من 0

بعد أن أنشأت أول Array، السؤال الطبيعي هو: كيف أصل لعنصر محدد داخلها؟ الإجابة تكون عبر Index (الفهرس).

إذا كنت تبحث عن شرح index في JavaScript أو لماذا يبدأ العد من 0 أو كيف أصل لأول وآخر عنصر في المصفوفة، فهذا الدرس يشرحها بأمثلة عملية واضحة.

ما هو Index في JavaScript؟

كل عنصر في Array له رقم ترتيب يسمى index. أول عنصر رقمه 0، والثاني 1، وهكذا.

قاعدة أساسية: أول عنصر = [0] وليس [1].

1) الوصول للعنصر عبر الفهرس

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

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

ماذا يفعل هذا الكود؟ يقرأ عناصر array حسب موقع كل عنصر.

النتيجة المتوقعة: طباعة كل اسم فاكهة حسب index المطلوب.

خطأ شائع: استخدام fruits[1] ظناً أنه أول عنصر.

2) تعديل عنصر محدد داخل Array

const fruits = ['تفاح', 'موز', 'برتقال'];
fruits[0] = 'عنب';

console.log(fruits); // ['عنب', 'موز', 'برتقال']

ماذا يفعل هذا الكود؟ يغيّر قيمة عنصر موجود باستخدام نفس index.

النتيجة المتوقعة: استبدال أول عنصر فقط.

خطأ شائع: تعديل index خاطئ فيتغير عنصر غير مقصود.

3) خاصية length وعدد العناصر

const fruits = ['تفاح', 'موز', 'برتقال'];
console.log(fruits.length); // 3

ماذا يفعل هذا الكود؟ يعرض عدد العناصر الكلي داخل المصفوفة.

النتيجة المتوقعة: الرقم 3.

خطأ شائع: اعتبار length هو index آخر عنصر.

4) الوصول إلى آخر عنصر بشكل صحيح

const fruits = ['تفاح', 'موز', 'برتقال'];
const lastItem = fruits[fruits.length - 1];

console.log(lastItem); // برتقال

ماذا يفعل هذا الكود؟ يحصل على آخر عنصر مهما كان طول المصفوفة.

النتيجة المتوقعة: آخر قيمة دائماً بشكل ديناميكي.

خطأ شائع: استخدام fruits[fruits.length] فيرجع undefined.

5) الخروج عن حدود المصفوفة (Out of Bounds)

const numbers = [10, 20, 30];

console.log(numbers[5]); // undefined

ماذا يفعل هذا الكود؟ يحاول قراءة index غير موجود.

النتيجة المتوقعة: قيمة undefined بدلاً من خطأ مباشر.

خطأ شائع: افتراض أن undefined يعني أن العنصر موجود لكنه فارغ.

6) قراءة كل العناصر باستخدام for loop

const colors = ['red', 'green', 'blue'];

for (let i = 0; i < colors.length; i++) {
  console.log('Color:', colors[i]);
}

ماذا يفعل هذا الكود؟ يمر على كل index ويطبع العنصر المرتبط به.

النتيجة المتوقعة: طباعة كل العناصر بدون كتابة index يدوياً.

خطأ شائع: كتابة i <= colors.length مما يضيف دورة زائدة بقيمة undefined.

Story قصيرة: أين اختفى آخر عنصر؟

مبتدئ كتب شرط الحلقة i < colors.length - 1 بالخطأ بدل i < colors.length. النتيجة: آخر عنصر لم يُطبع أبداً. بعد تصحيح الشرط، ظهرت كل العناصر كما يجب.

const users = ['Ali', 'Sara', 'Mina'];
console.log(users[0]);
console.log(users[users.length - 1]);

Checklist سريعة قبل التعامل مع index

• هل تتذكر أن أول عنصر يبدأ من 0؟
• هل تحققت أن index داخل حدود array؟
• هل استخدمت length - 1 للوصول لآخر عنصر؟
• هل شرط الحلقة صحيح (i < array.length)؟

روابط المتابعة بعد هذا الدرس

الخطوة التالية مباشرة: أشهر methods للمصفوفات في JavaScript ثم مقدمة الكائنات Objects في JavaScript.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

كيف أصل إلى عنصر داخل Array في JavaScript؟

بكتابة اسم المصفوفة ثم index داخل أقواس مربعة مثل: arr[0].

لماذا يبدأ index من 0؟

لأن البرمجة تعتمد الإزاحة من البداية، لذلك أول عنصر يكون offset صفر.

كيف أحصل على آخر عنصر؟

عبر arr[arr.length - 1].

ماذا يحدث إذا طلبت index غير موجود؟

ستحصل على undefined.

ما الخطوة التالية بعد فهم index؟

تعلم methods المصفوفات لإضافة العناصر وحذفها وتعديلها بسهولة.

للمتابعة مباشرة: ابدأ بدرس أشهر methods للمصفوفات في JavaScript ثم انتقل إلى مقدمة الكائنات Objects في JavaScript.