أشهر دوال المصفوفات في JavaScript: أضف واحذف وابحث داخل Arrays بسهولة

بعد أن تعلمت إنشاء Array والوصول لعناصرها، الخطوة المهمة الآن هي: كيف نضيف عناصر؟ كيف نحذف؟ وكيف نبحث داخل القائمة؟ هنا تأتي Array Methods.

إذا كنت تبحث عن شرح push pop shift unshift أو كيف أحذف عنصر من المصفوفة أو كيف أتحقق أن عنصر موجود داخل Array، فهذا الدرس يعطيك الأدوات الأساسية.

ما هي Array Methods في JavaScript؟

هي دوال جاهزة تساعدك على التعامل مع المصفوفات بسرعة: إضافة، حذف، بحث، تعديل، وغيرها.

قاعدة مهمة: كثير من methods تعدّل المصفوفة الأصلية مباشرة. راقب الحالة قبل وبعد التنفيذ.

1) push() لإضافة عنصر في النهاية

const fruits = ['تفاح', 'موز'];
fruits.push('عنب');

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

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

النتيجة المتوقعة: زيادة عدد العناصر بمقدار 1.

خطأ شائع: توقع أن push تضيف في البداية.

2) pop() لحذف آخر عنصر

const fruits = ['تفاح', 'موز', 'عنب'];
const removed = fruits.pop();

console.log(removed); // عنب
console.log(fruits);  // ['تفاح', 'موز']

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

النتيجة المتوقعة: المصفوفة تصغر عنصرًا واحداً.

خطأ شائع: نسيان أن pop تعيد العنصر المحذوف.

3) unshift() لإضافة عنصر في البداية

const fruits = ['موز', 'عنب'];
fruits.unshift('تفاح');

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

ماذا يفعل هذا الكود؟ يضيف عنصرًا في أول array.

النتيجة المتوقعة: العنصر الجديد يصبح عند index 0.

خطأ شائع: الخلط بين unshift وpush.

4) shift() لحذف أول عنصر

const fruits = ['تفاح', 'موز', 'عنب'];
const first = fruits.shift();

console.log(first);  // تفاح
console.log(fruits); // ['موز', 'عنب']

ماذا يفعل هذا الكود؟ يحذف أول عنصر ويرجعه.

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

خطأ شائع: توقع أن shift تحذف من النهاية.

5) splice() للتعديل المرن (إضافة/حذف في أي مكان)

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

// احذف عنصر واحد من index 1 ثم أضف 'yellow'
colors.splice(1, 1, 'yellow');

console.log(colors); // ['red', 'yellow', 'blue']

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

النتيجة المتوقعة: استبدال green بـ yellow.

خطأ شائع: الخلط بين ترتيب معاملات splice (start, deleteCount, items...).

6) includes() و indexOf() للبحث

const users = ['Ali', 'Sara', 'Mina'];

console.log(users.includes('Sara')); // true
console.log(users.indexOf('Mina'));  // 2
console.log(users.indexOf('Omar'));  // -1

ماذا يفعل هذا الكود؟ يتحقق من وجود عنصر ويحدد موقعه.

النتيجة المتوقعة: includes تعطي true/false وindexOf يعيد index أو -1.

خطأ شائع: اعتبار -1 index صالح داخل المصفوفة.

Story قصيرة: لماذا اختفت أول مهمة من القائمة؟

مبتدئ أراد حذف آخر مهمة فكتب shift() بدلاً من pop(). اختفت أول مهمة بدل الأخيرة. بعد فهم الفرق بين البداية والنهاية، صار التعديل دقيقاً.

const tasks = ['Read', 'Code'];
tasks.push('Test');
tasks.shift();
console.log(tasks); // ['Code', 'Test']

Checklist سريعة قبل استخدام Array Method

• هل تريد التعامل مع البداية أم النهاية؟
• هل method تعدّل array الأصلية أم تعيد قيمة فقط؟
• هل تحتاج العنصر المحذوف (مثل pop/shift)؟
• هل تحققت من النتيجة عبر console.log بعد كل خطوة؟

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

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

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

ما أهم دوال المصفوفات للمبتدئ؟

ابدأ بـ push وpop وshift وunshift وincludes وindexOf.

ما الفرق بين push و unshift؟

push تضيف في النهاية، وunshift تضيف في البداية.

ما الفرق بين pop و shift؟

pop تحذف من النهاية، وshift تحذف من البداية.

متى أستخدم splice؟

عندما تحتاج حذف/إضافة عناصر في موقع داخلي محدد داخل array.

كيف أعرف إذا عنصر غير موجود؟

باستخدام includes() أو التحقق أن indexOf() تساوي -1.

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