انتقل إلى محتوى الدرس

Unpacking Values Cleanly Idea مفهوم تفكيك البنى Destructuring

أتقن تفكيك المصفوفات والكائنات Destructuring في JavaScript ES6: استخرج العناصر وتخطَّ الخانات وبدّل المتغيرات وأعد التسمية مع القيم الافتراضية ومعاملات الدوال.
2 صفوف تعليمية
جافا سكريبت
7 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

قبل إصدار ES6 كان استخراج ثلاث قيم من مصفوفة أو ثلاث خصائص من كائن يتطلب تكرار ثلاثة أسطر رتيبة مثل const x = pt[0]; const y = pt[1];؛ أما صياغة تفكيك البنى (Destructuring Assignment) فتضع القوسين [ ] أو { } في الطرف الأيسر قبل علامة = لتفريغ العناصر مباشرةً في متغيرات مسماة بسطر واحد أنيق!

وانتبه إلى أن التفكيك عملية قراءة نظيفة لا تعدل الأصل؛ فالمصفوفة أو الكائن الأصلي بالطرف الأيمن يبقى سليماً كما هو دون أي تغيير.

الصف 2 صورة توضيحية
مخطط أنماط تفكيك البيانات في ES6: تفكيك المصفوفة بالترتيب وتفكيك الكائن بالاسم وإعادة التسمية والقيم الافتراضية