JavaScript Array Insert - كيفية الإضافة إلى مصفوفة باستخدام وظائف Push و Unshift و Concat

تعد مصفوفات JavaScript أحد أنواع البيانات المفضلة لدي بسهولة. إنها ديناميكية وسهلة الاستخدام وتقدم مجموعة كاملة من الأساليب المضمنة التي يمكننا الاستفادة منها.

ومع ذلك ، كلما زادت الخيارات التي لديك ، قد يكون الأمر أكثر إرباكًا في تحديد الخيار الذي يجب عليك استخدامه.

في هذه المقالة ، أود مناقشة بعض الطرق الشائعة لإضافة عنصر إلى مصفوفة JavaScript.

طريقة الدفع

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

لنفترض أن لديك مجموعة من العناصر ، كل عنصر يمثل سلسلة تمثل مهمة تحتاج إلى إنجازها. سيكون من المنطقي إضافة عناصر أحدث إلى نهاية المصفوفة حتى نتمكن من إنهاء مهامنا السابقة أولاً.

لنلقِ نظرة على المثال في شكل رمز:

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

حسنًا ، لقد أعطانا الدفع صيغة لطيفة وبسيطة لإضافة عنصر إلى نهاية المصفوفة الخاصة بنا.

لنفترض أننا أردنا إضافة عنصرين أو ثلاثة عناصر في المرة الواحدة إلى قائمتنا ، فماذا سنفعل بعد ذلك؟ كما اتضح ، يمكن أن يقبل 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 () لضم مصفوفتين (أو أكثر) معًا.

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

هذا تمييز مهم للغاية ويجعل concat () مفيدة للغاية عندما تتعامل مع المصفوفات التي لا تريد تغييرها (مثل المصفوفات المخزنة في حالة React).

إليك ما قد تبدو عليه الحالة الأساسية والمباشرة:

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = arr1.concat(arr2); console.log(arr3); // ["?", "?", "?", "?"] 

لنفترض أن لديك عدة مصفوفات تريد ضمها معًا. لا تقلق ، concat () هناك لإنقاذ اليوم!

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = ['?', '?']; const arr4 = arr1.concat(arr2,arr3); console.log(arr4); // ["?", "?", "?", "?", "?", "?"] 

الاستنساخ مع Concat

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

const arr1 = ["?", "?", "?", "?", "?", "?"]; const arr2 = [].concat(arr1); arr2.push("?"); console.log(arr1) //["?", "?", "?", "?", "?", "?"] console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]

رائع! يمكننا بشكل أساسي "استنساخ" مصفوفة باستخدام concat () .

ولكن هناك مشكلة صغيرة في عملية الاستنساخ هذه. المصفوفة الجديدة هي "نسخة ضحلة" من المصفوفة المنسوخة. هذا يعني أن أي كائن يتم نسخه عن طريق المرجع وليس الكائن الفعلي.

دعنا نلقي نظرة على مثال لشرح هذه الفكرة بشكل أكثر وضوحًا.

const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}] const arr2 = [].concat(arr1); //change only arr2 arr2[1].food = "?"; arr2.push({food:"?"}) console.log(arr1) //[ { food: '?' }, { food: '?' }, { food: '?' } ] console.log(arr2) //[ { food: '?' }, { food: '?' }, { food: '?' }, { food: '?' } ]

على الرغم من أننا لم نجري أي تغييرات مباشرة على المصفوفة الأصلية الخاصة بنا ، إلا أن المصفوفة تأثرت في النهاية بالتغييرات التي أجريناها على المصفوفة المستنسخة!

هناك عدة طرق مختلفة لإجراء "استنساخ عميق" لمصفوفة بشكل صحيح ، لكنني سأترك ذلك لك كواجب منزلي.

TL ؛ DR

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

هناك بالتأكيد العديد من الخيارات الأخرى لإضافة عناصر إلى مصفوفة ، وأنا أدعوك للخروج والعثور على بعض أساليب المصفوفات الرائعة!

لا تتردد في التواصل معي على Twitter واسمحوا لي أن أعرف طريقة المصفوفة المفضلة لديك لإضافة عناصر إلى مصفوفة.