الدرس 5 من 8
لا تعدّل بل أنشئ نسخة جديدة
- 14 دقيقة
- 5 فحوص
- 3 تلميحات
- إلى المطلوب
هدف الدرس
لماذا نجمّد البيانات
الشرح
حين تعدّل مصفوفة في مكانها يضيع ما كانت عليه، ويضيع معه الجواب عن أبسط سؤال: ما الذي تغيّر؟ وعلى هذا السؤال يقوم التراجع والمقارنة واكتشاف التغييرات في كل مكتبات الواجهات.
والبديل أن ينتج كل تغيير قيمة جديدة، فتكتب [...list, item] بدل push، وlist.filter(x => x !== y) بدل splice، و{...obj, key: v} بدل أن تغيّر الخاصية مباشرة.
والمصفوفة هنا مجمّدة بـ Object.freeze، فأي محاولة لتعديلها في الوضع الصارم (strict mode) ترمي خطأً بدل أن تمرّ بصمت.
المطلوب
اجعل الإضافة والحذف يعملان دون تعديل state.items، مع بقاء عدّاد التغييرات صحيحًا.
الفحوص
5 فحوص- القائمة تبدأ بثلاثة عناصر
- الإضافة تعمل دون خطأ
- الحذف يزيل العنصر الأول
- الإضافة تُنشئ مصفوفة جديدة ولا تعدّل القديمة
- عدّاد التغييرات يزيد مع كل عملية