كيفية إضافة عنصر إلى مصفوفة في JavaScript: 5 طرق مع أمثلة

مدرب بايثون أونلاين للمبتدئين

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

ابدأ الدورة

كيفية إضافة عنصر إلى مصفوفة في JavaScript؟ تحليل كامل مع أمثلة

\n\n

أنت تكتب كودًا بلغة JavaScript، وفجأة يطرح سؤال: «كيف أضيف عنصرًا جديدًا إلى نهاية المصفوفة؟ وإلى البداية؟ وربما إلى المنتصف؟». إذا كنت قد بحثت يومًا عن «How to append something to an array?» — فأنت لست وحدك. هذا السؤال على Stack Overflow حصد آلاف المشاهدات، واليوم سنحلّه نهائيًا.

\n\n

المصفوفات هي أساس العمل مع البيانات في JS. القدرة على إضافة العناصر بسرعة وبشكل صحيح ستوفر لك ساعات من التصحيح وتجعل الكود أنظف. في هذا الدليل التعليمي، سأعرض 5 طرق لإضافة عنصر إلى مصفوفة، من الطريقة الكلاسيكية push() إلى spread-operator الحديث. هيا بنا!

\n\n

1. طريقة push(): الإضافة إلى نهاية المصفوفة

\n\n

الطريقة الأكثر شيوعًا. push() تضيف عنصرًا واحدًا أو أكثر إلى نهاية المصفوفة وتعيد الطول الجديد.

\n\n
const fruits = ['تفاح', 'موز'];\nconst newLength = fruits.push('برتقال');\n\nconsole.log(fruits);    // ['تفاح', 'موز', 'برتقال']\nconsole.log(newLength); // 3\n
\n\n

يمكن إضافة عدة عناصر مرة واحدة:

\n\n
fruits.push('كمثرى', 'عنب');\nconsole.log(fruits);\n// ['تفاح', 'موز', 'برتقال', 'كمثرى', 'عنب']\n
\n\n

متى تستخدم: عندما تحتاج إلى إضافة بيانات إلى نهاية القائمة — مثل منتج جديد في سلة التسوق، رسالة في الدردشة، إدخال في السجل. الطريقة تعمل بسرعة (O(1)) وتعدل المصفوفة الأصلية.

\n\n

2. طريقة unshift(): الإضافة إلى بداية المصفوفة

\n\n

إذا كنت بحاجة إلى إدراج عنصر في البداية، استخدم unshift(). يقوم بتحريك جميع العناصر الموجودة إلى اليمين.

\n\n
const numbers = [2, 3, 4];\nnumbers.unshift(1);\n\nconsole.log(numbers); // [1, 2, 3, 4]\n
\n\n

تعمل أيضًا مع عدة عناصر:

\n\n
numbers.unshift(-1, 0);\nconsole.log(numbers); // [-1, 0, 1, 2, 3, 4]\n
\n\n

هام: unshift() أبطأ من push() للمصفوفات الكبيرة، لأنه يحتاج إلى تحريك جميع العناصر. إذا كانت المصفوفة تحتوي على 100,000 عنصر — فمن الأفضل التفكير في بنية بيانات أخرى (مثل قائمة انتظار ذات deque).

\n\n

3. طريقة splice(): الإدراج في أي موضع

\n\n

الجندي الشامل. splice() يمكنه الحذف والاستبدال، وبالطبع إضافة عناصر في أي موضع من المصفوفة.

\n\n

الصيغة: array.splice(start, deleteCount, item1, item2, ...)

\n\n
    \n
  • start — الفهرس الذي نبدأ منه
  • \n
  • deleteCount — عدد العناصر التي نحذفها (نضع 0 إذا كنا نضيف فقط)
  • \n
  • item1, item2, ... — العناصر المراد إدراجها
  • \n
\n\n

مثال: إدراج «كرز» في الموضع الثاني (الفهرس 1):

\n\n
const colors = ['أحمر', 'أزرق', 'أخضر'];\ncolors.splice(1, 0, 'كرز');\n\nconsole.log(colors);\n// ['أحمر', 'كرز', 'أزرق', 'أخضر']\n
\n\n

يمكن إدراج عدة عناصر مرة واحدة:

\n\n
const letters = ['a', 'd'];\nletters.splice(1, 0, 'b', 'c');\n\nconsole.log(letters); // ['a', 'b', 'c', 'd']\n
\n\n

متى تستخدم: عندما تحتاج إلى إدراج عنصر بدقة في منتصف المصفوفة — مثل إضافة عنصر قائمة جديد بين العناصر الموجودة. تذكر: splice() يعدل المصفوفة.

\n\n

4. طريقة concat(): إنشاء مصفوفة جديدة

\n\n

على عكس الطرق السابقة، concat() لا يغير المصفوفة الأصلية، بل يعيد مصفوفة جديدة، تجمع بين مصفوفتين أو أكثر (أو عناصر).

\n\n
const arr1 = [1, 2, 3];\nconst arr2 = [4, 5];\nconst result = arr1.concat(arr2);\n\nconsole.log(result); // [1, 2, 3, 4, 5]\nconsole.log(arr1);   // [1, 2, 3] — لم يتغير\n
\n\n

يمكن إضافة ليس فقط المصفوفات، ولكن أيضًا قيم فردية:

\n\n

المدونات

توصيات الكتب