حذف عناصر المصفوفة في TypeScript: 5 طرق للمبتدئين

حذف عناصر المصفوفة في TypeScript: من المبتدئ إلى المحترف

مرحبًا، يا مطور TypeScript المستقبلي! 👋 إذا كنت قد كتبت كودًا في TypeScript (أو JavaScript) يومًا وتساءلت: "How do I remove an array item in TypeScript?" — فأنت لست وحدك. هذا السؤال من Stack Overflow حصد آلاف المشاهدات، وهذا ليس من قبيل الصدفة. حذف العناصر من المصفوفة هي إحدى العمليات الأساسية التي تبدو بسيطة ظاهريًا، لكنها في الواقع تخفي العديد من المزالق.

في هذه المقالة، لن نقدم إجابات جافة فقط. سنقوم بتحليل 5 طرق حقيقية لحذف العناصر من المصفوفة في TypeScript، من الأكثر وضوحًا إلى تلك التي قد لا تكون على علم بها. ستتعرف على متى تستخدم splice ومتى تستخدم filter، ولماذا delete هو شر (دائمًا تقريبًا)، وكيف لا تفقد التصنيف أثناء العملية. هيا بنا!

لماذا هذا مهم؟ (وما علاقة TypeScript بالأمر؟)

المصفوفات هي أساس أي تطبيق. قائمة المستخدمين، سلة المنتجات، سجل الرسائل — كل هذه مصفوفات. والقدرة على إدارة محتوياتها بكفاءة هي مهارة أساسية. يضيف TypeScript طبقة أخرى إلى هذا: التصنيف. إذا قمت بحذف عنصر بطريقة خاطئة، فقد لا يُصدر المترجم خطأً، لكن تطبيقك قد "ينهار" أثناء التشغيل. لذلك سننظر في أمثلة باستخدام TypeScript بشكل صارم، مع تحديد الأنواع بوضوح.

لنقم بإنشاء "ساحة اختبار" — مصفوفة سنعمل عليها:

// مصفوفتنا التعليمية\nconst fruits: string[] = ['🍎 Apple', '🍌 Banana', '🍊 Orange', '🍇 Grape', '🍉 Watermelon'];\n\n// مصفوفة كائنات مصنفة (مثال أكثر واقعية)\ninterface User {\n  id: number;\n  name: string;\n  role: 'admin' | 'user';\n}\n\nconst users: User[] = [\n  { id: 1, name: 'Alice', role: 'admin' },\n  { id: 2, name: 'Bob', role: 'user' },\n  { id: 3, name: 'Charlie', role: 'user' },\n];

الآن سنقوم بتحليل كل طريقة حذف. سنجيب على السؤال: "How do I remove an array item in TypeScript?" في سياق مهام مختلفة.

الطريقة رقم 1: splice() — حذف "جراحي" حسب الفهرس

الطريقة splice() هي سكين سويسري للعمل مع المصفوفات. يمكنها الحذف والإضافة والاستبدال. لكننا اليوم مهتمون فقط بالحذف.

الصيغة: array.splice(startIndex, deleteCount)

\n
• startIndex — الفهرس الذي نبدأ منه الحذف.
\n
• deleteCount — عدد العناصر المراد حذفها.
\n

مهم: splice() تعدل المصفوفة الأصلية (تغيرها) وتعيد مصفوفة العناصر المحذوفة.

مثال: حذف العنصر الثاني (Banana)

const myFruits: string[] = [...fruits]; // ننشئ نسخة حتى لا نفسد الأصل\n\n// نحذف عنصرًا واحدًا، بدءًا من الفهرس 1 (العنصر الثاني)\nconst removedFruit: string[] = myFruits.splice(1, 1);\n\nconsole.log(myFruits);      // ['🍎 Apple', '🍊 Orange', '🍇 Grape', '🍉 Watermelon']\nconsole.log(removedFruit); // ['🍌 Banana']

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

تفاصيل TypeScript: نوع القيمة المُعادة هو T[] (مصفوفة من نفس نوع المصفوفة الأصلية). إذا حاولت حذف عنصر من مصفوفة readonly، فسيصدر TypeScript خطأً، لأن splice يغير المصفوفة.

الطريقة رقم 2: filter() — حذف آمن حسب الشرط (بدون تغيير)

هذه هي طريقتي المفضلة. filter() هو نهج "وظيفي". لا يغير المصفوفة الأصلية، بل ينشئ مصفوفة جديدة تحتوي فقط على العناصر التي اجتازت الاختبار.