في هذا الدرس 5تصفّح المواضيع
قبل إصدار ES6 كان استخراج ثلاث قيم من مصفوفة أو ثلاث خصائص من كائن يتطلب تكرار ثلاثة أسطر رتيبة مثل const x = pt[0]; const y = pt[1];؛ أما صياغة تفكيك البنى (Destructuring Assignment) فتضع القوسين [ ] أو { } في الطرف الأيسر قبل علامة = لتفريغ العناصر مباشرةً في متغيرات مسماة بسطر واحد أنيق!
وانتبه إلى أن التفكيك عملية قراءة نظيفة لا تعدل الأصل؛ فالمصفوفة أو الكائن الأصلي بالطرف الأيمن يبقى سليماً كما هو دون أي تغيير.
يعتمد تفكيك المصفوفات على ترتيب الفهرس والموقع (0, 1, 2...) بمرونة عالية:
- الاستخراج المباشر بالترتيب: السطر
const [lat, lng] = [24.71, 46.67];يسند العنصر الأول لـlatوالثاني لـlng. - تخطي المواقع غير المطلوبة: اترك خانة فارغة متبوعة بفاصلة مثل
const [first, , third] = medals;لتجاوز العنصر الأوسط مباشرةً! - تبديل قيم متغيرين بدون متغير وسيط: اكتب
[left, right] = [right, left];لتبادل القيمتين في خطوة واحدة نظيفة.
const podium = ['Sara', 'Omar', 'Lina'];
const [gold, , bronze] = podium;
let primary = 'Light';
let secondary = 'Dark';
[primary, secondary] = [secondary, primary];
document.getElementById('arr-d-out').textContent =
'1st: ' + gold + ', 3rd: ' + bronze + '\n' +
'Swapped: ' + primary + ' / ' + secondary;بخلاف المصفوفات، يطابق تفكيك الكائنات الخصائص باسم المفتاح الحرفي بغض النظر عن ترتيب كتابتها داخل { }! وإذا أردت منح الخاصية اسماً محلياً مختلفاً لمنع التضارب، اكتب المفتاح الأصلي متبوعاً بنقطتين رأسيتين ثم الاسم الجديد { sourceKey: newLocalName }:
| نمط الصياغة | آلية المطابقة | المتغيرات المحلية المنشأة |
|---|---|---|
const [a, b] = pair; | الفهرس 0 والفهرس 1 | a وb |
const { title, views } = post; | اسم الخاصية في الكائن | title وviews |
const { title: postTitle } = post; | الخاصية post.title | postTitle فقط (ولا يُعرّف متغير باسم title) |
يدعم تفكيك المصفوفات والكائنات تعيين قيم افتراضية بعامل =، بل يمكنك دمج إعادة التسمية مع القيمة الافتراضية معاً بصيغة واحدة مثل const { role: userRole = "student" } = account;.
تذكر القاعدة الدقيقة في اللغة: لا تتفعّل القيمة الافتراضية إلا عندما تكون القيمة المستخرجة مساويةً صراحةً لـ undefined (كأن تكون الخاصية غائبة تماماً)؛ أما إذا كانت قيمتها null أو 0 أو false فتبقى تلك القيمة كما هي دون استبدال!
تستطيع تفكيك الكائنات المتداخلة مثل const { author: { name } } = article;، والأجمل عملياً هو تفكيك كائن الإعدادات مباشرةً في رأس معاملات الدالة: function formatCard({ title, badge = "NEW" } = {}).
تأمل أهمية = {} في نهاية القوس! فبدونها يؤدي استدعاء formatCard() بلا وسائط إلى محاولة تفكيك undefined وإطلاق خطأ TypeError، بينما تضمن = {} عمل الاستدعاء الفارغ بسلاسة تامة اعتماداً على القيم الافتراضية الداخلية.
function buildBanner({ title = 'Hi', tone = 'info' } = {}) {
return '[' + tone.toUpperCase() + '] ' + title;
}
const msgA = buildBanner({ title: 'Saved!', tone: 'success' });
const msgB = buildBanner();
const out = document.getElementById('opt-d-out');
out.textContent = msgA + '\n' + msgB;ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس تفكيك المصفوفات بالموقع وتخطي الخانات وتبديل المتغيرات، وتفكيك الكائنات بالاسم وإعادة تسميتها بالنقطتين وتحصينها بالقيم الافتراضية ومعاملات الدوال الذاتية التوثيق = {}. الخطوة التالية: انتقل الآن إلى درس «معاملا النشر والتجميع Spread وRest في JavaScript» لنسخ ودمج وتجميع البيانات ومقارنة النسخ السطحي بالنسخ العميق!
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Destructuring Assignment صياغة تفكيك البنى Destructuring
- صياغة في ES6 تستخرج عناصر المصفوفة أو خصائص الكائن في متغيرات مستقلة دون تعديل البنية الأصلية.
- للمراجعة
- 02 Property Aliasing ({ key: localName }) إعادة التسمية المحلية عند التفكيك
- ربط خاصية الكائن المستخرجة باسم متغير محلي جديد باستخدام النقطتين الرأسيتين منعاً لتعارض الأسماء.
- للمراجعة
- 03 Named Options Pattern نمط تفكيك كائن الإعدادات بالدالة
- تفكيك كائن خيارات مزود بقيم افتراضية داخلية و= {} خارجية مباشرة في رأس معاملات الدالة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 API API
- Application Programming Interface
- واجهة برمجة التطبيقات وعقود الدوال التي تصبح أوضح قراءة بفضل تفكيك كائنات الإعدادات.
- للمراجعة
- 02 ES6 ES6
- ECMAScript 2015
- إصدار مواصفة JavaScript الذي اعتمد صياغة تفكيك المصفوفات والكائنات رسمياً.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال تفكيك المصفوفات وجرب تبديل رقمين عبر [a, b] = [b, a] وتحقق من النتيجة المعروضة.
-
شغّل مثال دالة الإعدادات وتأكد من نجاح استدعاء buildBanner() بلا وسائط بفضل القيمة الاحتياطية = {}.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.