شرح دالة splice() في JavaScript: حذف عناصر المصفوفة وإضافتها واستبدالها باحتراف

ما هي دالة splice() في JavaScript؟

تُعد الدالة splice() من الدوال المضمنة في كائنات المصفوفات Array في لغة JavaScript. وتُستخدم لتعديل محتوى المصفوفة الأصلية عبر حذف عناصر موجودة، أو استبدالها، أو إدراج عناصر جديدة في موضع محدد.

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

متى تستخدم splice()؟

يمكنك الاعتماد على splice() في عدة سيناريوهات عملية، من أبرزها:

• حذف عنصر أو أكثر من المصفوفة.
• إضافة عناصر جديدة في موضع محدد.
• استبدال عناصر قديمة بعناصر أخرى.
• تنظيف مصفوفة تحتوي على بيانات مختلطة أو غير مرتبة.

كيفية حذف عناصر من المصفوفة باستخدام splice()

لنفترض أن لديك مصفوفة باسم months، لكنها تحتوي بالخطأ على أسماء أيام ضمن عناصرها:

let months = ["January", "February", "Monday", "Tuesday"];

يمكنك حذف العناصر غير المرغوبة بدءاً من موضع معين باستخدام splice() كما يلي:

let months = ["January", "February", "Monday", "Tuesday"];
let days = months.splice(2);

console.log(days); // ["Monday", "Tuesday"]

في هذا المثال، استدعينا splice(2)، وهذا يعني أن الحذف سيبدأ من الفهرس 2، أي من العنصر الثالث في المصفوفة، وسيستمر حتى نهاية المصفوفة.

فهم أول معامل: start

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

حذف عدد محدد من العناصر عبر removeCount

إذا كنت تريد حذف عدد محدد فقط من العناصر، فيمكنك تمرير المعامل الثاني removeCount:

let months = ["January", "February", "Monday", "Tuesday"];
let days = months.splice(2, 1);

console.log(days);   // ["Monday"]
console.log(months); // ["January", "February", "Tuesday"]

هنا بدأ الحذف من الفهرس 2، لكننا طلبنا حذف عنصر واحد فقط باستخدام القيمة 1. لذلك أُزيل العنصر "Monday" فقط، بينما بقيت بقية العناصر كما هي.

وعند عدم تمرير removeCount، تقوم الدالة بحذف جميع العناصر من موضع start حتى نهاية المصفوفة.

كيفية حذف عناصر وإضافة عناصر جديدة في العملية نفسها

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

الصيغة العامة للدالة splice()

Array.splice(start, removeCount, newItem, newItem, newItem, ...)

بعد المعاملين start وremoveCount، يمكنك تمرير أي عدد من العناصر الجديدة التي تريد إدراجها.

المثال التالي يوضح حذف "Monday" و"Tuesday"، ثم إضافة "March" و"April" مكانهما:

let months = ["January", "February", "Monday", "Tuesday"];
let days = months.splice(2, 2, "March", "April");

console.log(days);   // ["Monday", "Tuesday"]
console.log(months); // ["January", "February", "March", "April"]

لاحظ أن الدالة أعادت العناصر المحذوفة في المتغير days، وفي الوقت نفسه عدّلت المصفوفة months بإدراج القيم الجديدة في نفس الموضع.

كيفية إضافة عناصر جديدة دون حذف أي عنصر

إذا كان هدفك هو إدراج عناصر جديدة فقط دون إزالة أي عنصر موجود، فما عليك إلا تمرير القيمة 0 كمعامل removeCount. في هذه الحالة، لن تُحذف أي عناصر، وستُضاف القيم الجديدة في الموضع المحدد.

let months = ["January", "February", "Monday", "Tuesday"];
months.splice(2, 0, "March");

console.log(months); // ["January", "February", "March", "Monday", "Tuesday"]

في هذا المثال، أُضيف العنصر "March" بعد "February" مباشرة، دون حذف أي عنصر من المصفوفة.

ومن المهم أن تعرف أنه عندما تكون قيمة removeCount مساوية لـ 0، فإن الدالة تُرجع مصفوفة فارغة، لأنه لم يتم حذف أي عنصر فعلياً.

ملخص سريع لأهم استخدامات splice()

أفضل الممارسات عند استخدام splice()

• استخدمها عندما تحتاج إلى تعديل المصفوفة الأصلية مباشرة.
• إذا كنت لا تريد تغيير المصفوفة الأصلية، ففكر في استخدام دوال أخرى مثل slice() أو بناء نسخة جديدة من البيانات.
• احرص على فهم الفهارس جيداً، لأن أي خطأ في قيمة start قد يؤدي إلى تعديل غير مقصود.
• استفد من القيمة المُعادة إذا كنت بحاجة إلى العناصر التي جرى حذفها لاحقاً.

لماذا تُعد splice() مهمة للمطورين؟

تظهر أهمية splice() في التطبيقات التي تعتمد على القوائم الديناميكية، مثل إدارة المهام، وتحرير الجداول، وتحديث بيانات الواجهات التفاعلية. فهي تمنحك تحكماً مباشراً في بنية المصفوفة دون الحاجة إلى كتابة منطق إضافي معقد.

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

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

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