دعنا نستكشف Slice () و Splice () و Spread Syntax (...) في JavaScript

صادفت تحدي freeCodeCamp هذا وتعثرت لبعض الوقت في التفكير في كيفية إيجاد طريقة لحلها. لقد ذكروا بالفعل الحل باستخدام Slice & Splice. لقد كنت في حيرة من أمري في ذلك الوقت عندما أستخدم Slice ومتى أستخدم Splice.

هنا ، سأشارك كيف قمت بحلها بهذه الطرق.

يتم استخدام كل من Slice و Splice لمعالجة المصفوفات. دعونا نرى كيف يفعلون ذلك.

شريحة:

تأخذ طريقة Slice وسيطتين.

الحجة الأولى : تحدد من أين يجب أن يبدأ التحديد.

فمثلا:

var arr1 = [1,5,8,9]; arr1.slice(1); // [5,8,9]

من الفهرس الأول (5) سيعود العناصر.

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

var arr1 = [1,5,8,9]; console.log(arr1.slice(1,3)); //[ 5, 8 ]

إذا أدخلت رقمًا سالبًا أثناء الاتصال ، فسيتم تحديد الاختيار من نهاية المصفوفة.

var arr1 = [1,5,8,9]; console.log(arr1.slice(-2)); //[ 8, 9 ]

ملاحظة: تُرجع الشريحة دائمًا العناصر المحددة من المصفوفة.

شريحة لن تغير المصفوفة. المصفوفة لا تزال سليمة. انظر المثال أدناه:

var arr1 = [1,5,8,9]; arr1.slice(2); console.log(arr1); // [ 1, 5, 8, 9 ]

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

لصق او جمع:

يمكن أن يستغرق عدة حجج.

هذا يعني،

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

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

var arr1 = [1,5,8,9]; console.log(arr1.splice(1,2)); // [ 5, 8 ]

الوسيطة الثالثة -> nth Argum ent: قيمة العناصر التي تريد إضافتها إلى المصفوفة.

var arr1 = [1,5,8,9]; console.log(arr1.splice(1,2,'Hi','Medium')); // [5,8]

قد تعتقد أننا أضفنا "Hi" ، "Medium" إلى المصفوفة لكنها لا تظهر هنا…. حق؟

نعم ، لقد قدمنا ​​العزاء لـ arr1.splice (1،2، "Hi"، "Medium").

ملحوظة:

  • ستعيد Splice العناصر التي تمت إزالتها من الصفيف فقط.
  • سوف لصق تغيير الصفيف الأصلي
var arr1 = [1,5,8,9]; arr1.splice(1,2,'Hi','Medium'); console.log(arr1); // [ 1, 'Hi', 'Medium', 9 ]

صيغة الانتشار:

التعريف : يسمح بتوسيع قابل للتكرار مثل تعبير مصفوفة أو سلسلة في الأماكن التي يتوقع فيها صفر أو أكثر من الوسيطات (لاستدعاءات الدوال) أو العناصر (للصفيفات الحرفية) ، أو تعبير كائن ليتم توسيعه في الأماكن التي يكون فيها صفر أو أكثر من المتوقع أن تكون أزواج المفاتيح والقيمة (للكائنات الحرفية).

لنأخذ مثالاً على هذا:

var arr1 = [1,3,6,7]; var arr2 = [5,arr1,8,9]; console.log(arr2); // [ 5, [ 1, 3, 6, 7 ], 8, 9 ]

أريد أن يكون هذا في مصفوفة واحدة مثل [5 ، 1 ، 3 ، 6 ، 7 ، 8 ، 9].

يمكنني استخدام بناء الجملة هذا لحل هذه المشكلة:

var arr1 = [1,3,6,7]; var arr2 = [5,...arr1,8,9]; console.log(arr2); //[ 5, 1, 3, 6, 7, 8, 9 ]

الاستخدام الرئيسي الآخر لبناء الجملة هو أثناء نسخ المصفوفة:

var arr = [1, 2, 3]; var arr2 = arr; arr2.push(4); console.log(arr2); // [ 1, 2, 3, 4 ] console.log(arr); // [ 1, 2, 3, 4 ]

أضفت " 4 " إلى arr2 فقط. لكنها جعلت التغيير إلى arr أيضًا.

يمكننا حل ذلك باستخدام صيغة السبريد على النحو التالي ...

var arr = [1, 2, 3]; var arr2 = [...arr]; // like arr.slice() arr2.push(4); console.log(arr2); // [ 1, 2, 3, 4 ] console.log(arr); // [ 1, 2, 3]

يمكنك الرجوع إلى وثائق MDN لمزيد من المعلومات حول Spread Syntax.

لذا ، دعونا نلقي نظرة على التحدي.

function frankenSplice(arr1, arr2, n) { // It's alive. It's alive! let array2Copy = [...arr2]; array2Copy.splice(n,0, ...arr1); //console.log(array2Copy); return array2Copy; } frankenSplice([1, 2, 3], [4, 5, 6], 1);

الشرط الرئيسي لهذا التحدي هو "لا ينبغي تغيير arr1 / arr2 بعد تنفيذ الوظيفة".

لذلك، وخلق مجموعة نسخة من arr2، و باستخدام وصلة طريقة إضافة arr1 داخل نسخة من arr2 والذي يدعى array2Copy.

الاستنتاج النهائي:

-> طريقة شريحة سوف

  • إرجاع العناصر المحددة من المصفوفة
  • تأخذ 2 الحجج
  • لا يغير المجموعة الأصلية

-> طريقة لصق سوف

  • إرجاع العناصر المزالة من المصفوفة
  • تأخذ حجج متعددة
  • يغير المجموعة الأصلية

هذا هو أول برنامج تعليمي لي حول الترميز - شكرًا على القراءة! ستساعدني ملاحظاتك على تشكيل مهارتي في الترميز والكتابة.

ترميز سعيد…!

تواصل معي عبر تويتر