كيفية إضافة عنصر إلى مصفوفة في JavaScript؟ تحليل كامل مع أمثلة
\n\nأنت تكتب كودًا بلغة JavaScript، وفجأة يطرح سؤال: «كيف أضيف عنصرًا جديدًا إلى نهاية المصفوفة؟ وإلى البداية؟ وربما إلى المنتصف؟». إذا كنت قد بحثت يومًا عن «How to append something to an array?» — فأنت لست وحدك. هذا السؤال على Stack Overflow حصد آلاف المشاهدات، واليوم سنحلّه نهائيًا.
\n\nالمصفوفات هي أساس العمل مع البيانات في JS. القدرة على إضافة العناصر بسرعة وبشكل صحيح ستوفر لك ساعات من التصحيح وتجعل الكود أنظف. في هذا الدليل التعليمي، سأعرض 5 طرق لإضافة عنصر إلى مصفوفة، من الطريقة الكلاسيكية push() إلى spread-operator الحديث. هيا بنا!
1. طريقة push(): الإضافة إلى نهاية المصفوفة
\n\nالطريقة الأكثر شيوعًا. push() تضيف عنصرًا واحدًا أو أكثر إلى نهاية المصفوفة وتعيد الطول الجديد.
const fruits = ['تفاح', 'موز'];\nconst newLength = fruits.push('برتقال');\n\nconsole.log(fruits); // ['تفاح', 'موز', 'برتقال']\nconsole.log(newLength); // 3\n\n\nيمكن إضافة عدة عناصر مرة واحدة:
\n\nfruits.push('كمثرى', 'عنب');\nconsole.log(fruits);\n// ['تفاح', 'موز', 'برتقال', 'كمثرى', 'عنب']\n\n\nمتى تستخدم: عندما تحتاج إلى إضافة بيانات إلى نهاية القائمة — مثل منتج جديد في سلة التسوق، رسالة في الدردشة، إدخال في السجل. الطريقة تعمل بسرعة (O(1)) وتعدل المصفوفة الأصلية.
\n\n2. طريقة unshift(): الإضافة إلى بداية المصفوفة
\n\nإذا كنت بحاجة إلى إدراج عنصر في البداية، استخدم unshift(). يقوم بتحريك جميع العناصر الموجودة إلى اليمين.
const numbers = [2, 3, 4];\nnumbers.unshift(1);\n\nconsole.log(numbers); // [1, 2, 3, 4]\n\n\nتعمل أيضًا مع عدة عناصر:
\n\nnumbers.unshift(-1, 0);\nconsole.log(numbers); // [-1, 0, 1, 2, 3, 4]\n\n\nهام: unshift() أبطأ من push() للمصفوفات الكبيرة، لأنه يحتاج إلى تحريك جميع العناصر. إذا كانت المصفوفة تحتوي على 100,000 عنصر — فمن الأفضل التفكير في بنية بيانات أخرى (مثل قائمة انتظار ذات deque).
3. طريقة splice(): الإدراج في أي موضع
\n\nالجندي الشامل. splice() يمكنه الحذف والاستبدال، وبالطبع إضافة عناصر في أي موضع من المصفوفة.
الصيغة: array.splice(start, deleteCount, item1, item2, ...)
- \n
start— الفهرس الذي نبدأ منه \n deleteCount— عدد العناصر التي نحذفها (نضع 0 إذا كنا نضيف فقط) \n item1, item2, ...— العناصر المراد إدراجها \n
مثال: إدراج «كرز» في الموضع الثاني (الفهرس 1):
\n\nconst colors = ['أحمر', 'أزرق', 'أخضر'];\ncolors.splice(1, 0, 'كرز');\n\nconsole.log(colors);\n// ['أحمر', 'كرز', 'أزرق', 'أخضر']\n\n\nيمكن إدراج عدة عناصر مرة واحدة:
\n\nconst letters = ['a', 'd'];\nletters.splice(1, 0, 'b', 'c');\n\nconsole.log(letters); // ['a', 'b', 'c', 'd']\n\n\nمتى تستخدم: عندما تحتاج إلى إدراج عنصر بدقة في منتصف المصفوفة — مثل إضافة عنصر قائمة جديد بين العناصر الموجودة. تذكر: splice() يعدل المصفوفة.
4. طريقة concat(): إنشاء مصفوفة جديدة
\n\nعلى عكس الطرق السابقة، concat() لا يغير المصفوفة الأصلية، بل يعيد مصفوفة جديدة، تجمع بين مصفوفتين أو أكثر (أو عناصر).
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