إدارة المصفوفات في جافاسكريبت: دليل شامل لإضافة العناصر باستخدام Push و Unshift و Concat

مقدمة إلى المصفوفات في جافاسكريبت: مرونة وكفاءة

تُعد المصفوفات في جافاسكريبت (JavaScript Arrays) من أنواع البيانات الأساسية والقوية، والتي أجدها شخصياً من بين الأكثر تفضيلاً. إنها ديناميكية، سهلة الاستخدام، وتوفر مجموعة واسعة من الدوال المدمجة التي يمكن للمطورين الاستفادة منها بفعالية. ومع ذلك، فإن تعدد الخيارات المتاحة لإدارة المصفوفات قد يجعل اختيار الدالة الأنسب مهمة محيرة في بعض الأحيان.

في هذا المقال، سنتعمق في استكشاف أبرز الطرق الشائعة والفعالة لإضافة عناصر إلى مصفوفات جافاسكريبت. سنركز على ثلاث دوال رئيسية: push()، unshift()، و concat()، مع توضيح الفروق الجوهرية بينها، ومتى يكون استخدام كل منها هو الخيار الأمثل لضمان كفاءة ووضوح الكود.

دالة push(): إضافة العناصر إلى نهاية المصفوفة

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

لنتخيل أن لديك قائمة مهام (tasks) ممثلة بمصفوفة. من المنطقي إضافة المهام الجديدة إلى نهاية القائمة، لكي تتمكن من إنجاز المهام الأقدم أولاً. إليك مثال يوضح كيفية عملها:

const arr = [
  'First item',
  'Second item',
  'Third item'
];
arr.push('Fourth item');
console.log(arr);
// ['First item', 'Second item', 'Third item', 'Fourth item']

لقد وفرت لنا دالة push() طريقة بسيطة وواضحة لإضافة عنصر إلى نهاية المصفوفة. ولكن ماذا لو أردنا إضافة عنصرين أو ثلاثة في آن واحد؟ لحسن الحظ، تقبل دالة push() إضافة عناصر متعددة في استدعاء واحد، مما يزيد من مرونتها:

const arr = [
  'First item',
  'Second item',
  'Third item'
];
arr.push('Fourth item', 'Fifth item');
console.log(arr);
// ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

بالإضافة إلى وظيفتها الأساسية، تُعيد دالة push() القيمة الجديدة لطول المصفوفة بعد عملية الإضافة. هذه الميزة مفيدة جداً لتتبع حجم المصفوفة المحدث، خاصة في السيناريوهات التي تحتاج فيها إلى معرفة عدد العناصر فور إضافتها:

const arr = [
  'First item',
  'Second item',
  'Third item'
];
const arrLength = arr.push('Fourth item', 'Fifth item');
console.log(arrLength);
// 5
console.log(arr);
// ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

دالة unshift(): إضافة العناصر إلى بداية المصفوفة

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

const arr = [
  'First item',
  'Second item',
  'Third item'
];
const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2');
console.log(arrLength);
// 5
console.log(arr);
// ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']

كما لاحظت في المثال أعلاه، تماماً مثل دالة push()، تُعيد دالة unshift() أيضاً الطول الجديد للمصفوفة بعد الإضافة، وتدعم إضافة عناصر متعددة في نفس الاستدعاء. هذه المرونة تجعلها أداة قوية لإدارة ترتيب العناصر في المصفوفات.

دالة concat(): دمج المصفوفات وإنشاء نسخ جديدة

فهم آلية عمل concat()

دالة concat()، وهي اختصار لكلمة ‘concatenate’ (بمعنى ربط أو دمج)، تُستخدم لدمج مصفوفتين أو أكثر معاً. لكن ما يميزها ويجعلها مختلفة عن push() و unshift() هو سلوكها تجاه المصفوفة الأصلية.

على عكس push() و unshift() اللتين تُعدّلان المصفوفة الأصلية وتُعيدان طولها الجديد، فإن دالة concat() تتميز بأنها تُعيد مصفوفة جديدة كلياً تحتوي على عناصر المصفوفات المدمجة، دون تعديل المصفوفات الأصلية. هذا التمييز جوهري ويجعل concat() بالغة الأهمية عند التعامل مع المصفوفات التي لا ترغب في تغيير حالتها الأصلية (mutate)، كما هو الحال غالباً مع حالة المكونات في مكتبات مثل React.

إليك مثال يوضح كيفية دمج مصفوفتين أساسيتين:

const arr1 = ['A', 'B'];
const arr2 = ['C', 'D'];
const arr3 = arr1.concat(arr2);
console.log(arr3);
// ['A', 'B', 'C', 'D']
console.log(arr1); // ['A', 'B'] - المصفوفة الأصلية لم تتغير
console.log(arr2); // ['C', 'D'] - المصفوفة الأصلية لم تتغير

يمكن لدالة concat() أيضاً دمج أكثر من مصفوفتين في آن واحد، مما يوفر حلاً فعالاً لجمع البيانات من مصادر متعددة:

const arr1 = ['A', 'B'];
const arr2 = ['C', 'D'];
const arr3 = ['E', 'F'];
const arr4 = arr1.concat(arr2, arr3);
console.log(arr4);
// ['A', 'B', 'C', 'D', 'E', 'F']

الاستنساخ السطحي (Shallow Cloning) باستخدام concat()

تذكر كيف ذكرنا أن concat() مفيدة عندما لا ترغب في تعديل المصفوفة الأصلية؟ لنستكشف كيف يمكننا استغلال هذا المفهوم لنسخ محتويات مصفوفة إلى مصفوفة جديدة، وهي عملية تُعرف بالاستنساخ (cloning).

const arr1 = ['Item1', 'Item2', 'Item3'];
const arr2 = [].concat(arr1);
arr2.push('Item4');
console.log(arr1);
// ['Item1', 'Item2', 'Item3']
console.log(arr2);
// ['Item1', 'Item2', 'Item3', 'Item4']

رائع! يمكننا فعلياً ‘استنساخ’ مصفوفة باستخدام concat(). لكن هناك ملاحظة هامة يجب الانتباه إليها في عملية الاستنساخ هذه: المصفوفة الجديدة التي تنتجها concat() هي ‘نسخة سطحية’ (shallow copy) من المصفوفة الأصلية. هذا يعني أن الكائنات (objects) داخل المصفوفة تُنسخ بالمرجع (by reference) وليس ككائنات مستقلة. لنلقِ نظرة على مثال يوضح هذه الفكرة بشكل أوضح:

const arr1 = [{ food: 'Apple' }, { food: 'Banana' }, { food: 'Orange' }];
const arr2 = [].concat(arr1);

// تعديل عنصر في arr2 يؤثر على arr1 لأنه نسخة سطحية
arr2[1].food = 'Grape';

// إضافة عنصر جديد إلى arr2 لا يؤثر على arr1
arr2.push({ food: 'Kiwi' });

console.log(arr1);
// [ { food: 'Apple' }, { food: 'Grape' }, { food: 'Orange' } ]
console.log(arr2);
// [ { food: 'Apple' }, { food: 'Grape' }, { food: 'Orange' }, { food: 'Kiwi' } ]

كما يتضح من المثال، على الرغم من أننا لم نقم بأي تغييرات مباشرة على المصفوفة الأصلية arr1، إلا أنها تأثرت في النهاية بالتغييرات التي أجريناها على الكائن الموجود في المصفوفة المستنسخة arr2 (تحديداً arr2[1].food). هذا يحدث لأن الكائنات الداخلية تم نسخها بالمرجع. بينما إضافة عنصر جديد (arr2.push()) لا يؤثر على arr1 لأنها عملية إضافة لعنصر جديد وليس تعديل لعنصر موجود بالمرجع.

هناك طرق متعددة لإجراء ‘نسخ عميق’ (deep clone) صحيح للمصفوفات التي تحتوي على كائنات متداخلة، لكننا سنترك استكشافها كواجب منزلي لك لتعزيز فهمك لهذه المفاهيم المتقدمة.

الخلاصة التقنية

تُقدم جافاسكريبت مجموعة غنية من الدوال لإدارة المصفوفات، وفهم الفروق الدقيقة بينها أمر بالغ الأهمية لكتابة كود نظيف وفعال. دالة push() هي خيارك الأمثل لإضافة عناصر إلى نهاية المصفوفة، بينما unshift() تخدم الغرض نفسه ولكن في بداية المصفوفة. أما concat()، فتتميز بقدرتها على دمج المصفوفات وإنشاء مصفوفة جديدة دون تعديل الأصل، مما يجعلها لا غنى عنها في السيناريوهات التي تتطلب الحفاظ على عدم تغيير البيانات الأصلية، مثل التعامل مع حالة التطبيقات في أطر العمل الحديثة.

تذكر دائماً أن اختيار الدالة المناسبة يعتمد على متطلباتك المحددة: هل تحتاج إلى تعديل المصفوفة الأصلية أم إنشاء نسخة جديدة؟ هل يهمك موقع الإضافة (البداية أم النهاية)؟ الإجابة على هذه الأسئلة ستوجهك نحو الخيار الأفضل. لا تتوقف هنا؛ فالمصفوفات في جافاسكريبت مليئة بالدوال الأخرى المفيدة التي تستحق الاستكشاف والتعلم المستمر.