كيفية حذف عنصر معين من مصفوفة في JavaScript: أفضل 5 طرق

كيفية حذف عنصر معين من مصفوفة في JavaScript: دليل شامل مع أمثلة

مرحبًا، زميل المطور! إذا كنت قد كتبت أي وقت مضى بلغة JavaScript، فبالتأكيد واجهت موقفًا تحتاج فيه إلى حذف عنصر معين من مصفوفة. قد تبدو مهمة بسيطة، لكن المبتدئين (وحتى المبرمجين ذوي الخبرة) غالبًا ما يضيعون: splice؟ filter؟ أم delete؟ أو ربما كتابة حل خاص بك؟

السؤال "How can I remove a specific item from an array in JavaScript?" هو واحد من أكثر الأسئلة شيوعًا على Stack Overflow بملايين المشاهدات. وهذا ليس من قبيل الصدفة: المصفوفات هي أساس العمل مع البيانات في JS، ومعرفة كيفية تنظيفها بشكل صحيح هي مهارة must-have.

في هذه المقالة، سنستعرض 5 طرق مثبتة لـ حذف عنصر من مصفوفة في JavaScript. ستتعرف على أي طريقة أسرع، وأيها أنظف للقراءة، وفي أي المواقف يكون كل منها أفضل للاستخدام. هيا بنا!

1. طريقة splice() — الكلاسيكية

لنبدأ بالطريقة الأكثر شيوعًا — splice(). هذه الطريقة تعدل المصفوفة الأصلية، عن طريق حذف أو استبدال أو إضافة عناصر. لحذف عنصر واحد، يكون التركيب كالتالي:

array.splice(index, 1);

المعامل الأول هو فهرس العنصر المراد حذفه، والثاني هو عدد العناصر المراد حذفها (1 يعني حذف عنصر واحد فقط).

مثال:

let fruits = ['تفاح', 'موز', 'كمثرى', 'برتقال'];\n\n// حذف 'موز' (الفهرس 1)\nfruits.splice(1, 1);\n\nconsole.log(fruits); // ['تفاح', 'كمثرى', 'برتقال']

هام: splice() يعدل المصفوفة الأصلية. إذا كنت بحاجة إلى نسخة — قم أولاً بعمل let copy = [...array].

متى تستخدم: عندما تعرف بالضبط فهرس العنصر. مثالي للحذف حسب الموضع.

2. الجمع بين indexOf() + splice() — الحذف حسب القيمة

ماذا لو كنا لا نعرف الفهرس، ولكننا نعرف القيمة نفسها؟ هنا يأتي دور indexOf() — فهو يجد أول فهرس لعنصر بقيمة معينة (أو يعيد -1 إذا لم يكن العنصر موجودًا).

let numbers = [10, 20, 30, 40, 50];\nlet itemToRemove = 30;\n\nlet index = numbers.indexOf(itemToRemove);\nif (index !== -1) {\n    numbers.splice(index, 1);\n}\n\nconsole.log(numbers); // [10, 20, 40, 50]

هام: هذه الطريقة تحذف فقط أول ظهور. إذا كان هناك عدة عناصر متطابقة في المصفوفة — ستبقى البقية.

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

3. طريقة filter() — لمن يحب النظافة

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

let numbers = [10, 20, 30, 40, 50];\nlet itemToRemove = 30;\n\nlet filteredNumbers = numbers.filter(num => num !== itemToRemove);\n\nconsole.log(filteredNumbers); // [10, 20, 40, 50]\nconsole.log(numbers); // [10, 20, 30, 40, 50] (الأصلية لم تتغير)

الميزة: تحذف جميع ظهور القيمة. إذا كان هناك رقمان 30 في المصفوفة — سيختفي كلاهما.

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

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

4. عامل delete — خطير ولكنه سريع

عامل delete يحذف خاصية كائن. وبما أن المصفوفة هي أيضًا كائن، يمكن تطبيقه على المصفوفة. لكن كن حذرًا: فهو يترك "فجوة" (عنصر فارغ).

let fruits = ['تفاح', 'موز', 'كمثرى'];