Array.splice و Array.slice في جافا سكريبت

مرحبا يا هبر! أقدم إليكم ترجمة المقال "Array.splice و Array.slice في JavaScript" بواسطة Kunal Tandon.

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

الاختلافات الرئيسية

يقوم Array.splice بتعديل الصفيف الأصلي وإرجاع صفيف يحتوي على العناصر المحذوفة.

لا يقوم Array.slice بتعديل الصفيف الأصلي. تقوم ببساطة بإرجاع مجموعة جديدة من العناصر ، وهي مجموعة فرعية من المصفوفة الأصلية.

Array.splice

يستخدم Splice لتعديل محتويات صفيف ، والذي يتضمن حذف العناصر أو استبدال العناصر الموجودة أو حتى إضافة عناصر جديدة إلى هذا الصفيف.

عند استخدام وظيفة لصق ، يتم تحديث الصفيف الأصلي.

النظر في مجموعة التالية:

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

Array.splice مع بناء الجملة

arr.splice (fromIndex، itemsToDelete، item1ToAdd، item2ToAdd، ...)؛

حذف العناصر

لإزالة عناصر من صفيف ، نكتب:

 var deleItems = arr.splice (3, 2); 

سيؤدي ذلك إلى إزالة العنصرين بدءاً من الفهرس 3 وإرجاع الصفيف البعيد. نتيجة لذلك ، نحصل على:

 deleItems // [3, 4] arr // [0, 1, 2, 5, 6, 7, 8] 

إضافة عناصر جديدة

لإضافة عناصر جديدة إلى الصفيف ، نكتب:

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; var arr2 = arr.splice (2, 0, 100, 101); 

بدءًا من العنصر الثاني للصفيف ، ستتم إضافة الأرقام 100 و 101. وستكون القيم النهائية كما يلي:

 arr2 // [],         arr // [0, 1, 100, 101, 2, 3, 4, 5, 6, 7, 8] 

تعديل عنصر موجود

يمكننا تعديل عنصر موجود في الصفيف بطريقة صعبة باستخدام splice لإزالة العنصر برقم الفهرس وإدراج عنصر جديد في مكانه.

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

لاستبدال 3 بـ 100 ، نكتب:

 var arr2 = arr.splice (3, 1, 100); //   -   3  1    100 

نحصل على القيم التالية لـ arr و arr2 بعد تنفيذ مقتطف الشفرة أعلاه:

 arr2 // [3]      3   arr arr // [0, 1, 2, 100, 4, 5, 6, 7, 8] // 3   100   arr 

Array.slice

بينما يمكن لـ splice أيضًا إدراج وتحديث عناصر الصفيف ، فإن وظيفة الشريحة تستخدم فقط لإزالة العناصر من الصفيف.
يمكننا فقط إزالة العناصر من الصفيف باستخدام وظيفة الشريحة

بناء جملة Array.slice

arr.slice (startIndex، endIndex)؛

startIndex - فهرس البداية للعنصر الخاص بالصفيف الجديد ، والذي يجب أن نحصل عليه في الصفيف الجديد
startIndex.endIndex (اختياري) هو الفهرس النهائي الذي يجب إجراء التشريح عليه ، وليس بما في ذلك هذا العنصر.

النظر في مجموعة التالية:

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

للحصول على جزء من الصفيف من القيم [2 ، 3 ، 4 ، 5] ، نكتب:

 var slicedArr = arr.slice (2, 6); 

يرجى ملاحظة أننا حددنا الوسيطة الثانية 6 ، وليس 5. بعد تنفيذ الكود أعلاه ، نحصل على المصفوفة التالية:

 arr // [0, 1, 2, 3, 4, 5, 6, 7, 8] slicedArr // [2, 3, 4, 5] 

يظل متغير arr بدون تغيير بعد تنفيذ بيان الشريحة ، بينما يقوم بيان لصق بتحديث الصفيف الأصلي.

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