| النوع | الصيغة | يعتمد على |
|---|---|---|
| تفكيك مصفوفة | const [أ, ب] = مصفوفة | الترتيب/الموضع |
| تفكيك كائن | const {اسم} = كائن | اسم المفتاح |
التفكيك (Destructuring) هي صيغة أُضيفت في ES6 تسمح باستخراج قيم من مصفوفات أو خصائص من كائنات، وتعيينها مباشرة لمتغيرات منفصلة، في سطر واحد مختصر بدل الوصول لكل قيمة على حدة يدوياً. هذا يجعل الكود أقصر بكثير وأوضح قصداً، خاصة عند التعامل مع بيانات مُركَّبة قادمة من دوال أو استجابات خادم.
تفكيك المصفوفات يعتمد على الترتيب (Position-based) — يُطابق كل متغير في القوسين المربعين [] موضعه في المصفوفة الأصلية بنفس الترتيب. يمكنك تخطي عناصر لا تحتاجها بترك فراغ بين الفواصل، ويمكنك أيضاً تحديد قيم افتراضية لأي عنصر في حال كانت المصفوفة أقصر من المتوقع.
تفكيك الكائنات يعتمد على اسم المفتاح (Name-based) وليس الترتيب — تكتب أسماء الخصائص بين قوسين معقوفين {} مطابقة تماماً لأسماء المفاتيح في الكائن الأصلي. يمكنك إعادة تسمية المتغير الناتج بصيغة { الاسم_الأصلي: اسم_جديد }، وتحديد قيم افتراضية أيضاً بصيغة { خاصية = قيمة_افتراضية } في حال كانت الخاصية غير موجودة في الكائن أصلاً.
من أكثر استخدامات التفكيك شيوعاً وقوة عملية تبديل قيمتي متغيرين في سطر واحد دون الحاجة لمتغير مؤقت وسيط، واستخراج معاملات دالة مباشرة من كائن واحد يُمرَّر لها (شائع جداً في React ومكتبات حديثة كثيرة)، والتفكيك المتداخل (Nested Destructuring) لاستخراج قيم من كائنات أو مصفوفات متشعبة داخل بعضها بعمق مباشرة في سطر واحد.
| 1 | // تفكيك مصفوفة |
| 2 | const [أول, ثاني, ثالث = "افتراضي"] = [10, 20]; |
| 3 | console.log(أول, ثاني, ثالث); // 10 20 "افتراضي" |
| 4 | |
| 5 | // تفكيك كائن |
| 6 | const { اسم, عمر: العمر = 18 } = { اسم: "علي" }; |
| 7 | console.log(اسم, العمر); // "علي" 18 |
مثال 1: تبديل المتغيرات ومعاملات الدوال بالتفكيك
| 1 | // تبديل قيمتين بدون متغير مؤقت |
| 2 | let أ = 5, ب = 10; |
| 3 | [أ, ب] = [ب, أ]; |
| 4 | console.log(أ, ب); // 10 5 |
| 5 | |
| 6 | // معاملات دالة عبر تفكيك كائن (شائع جداً في المشاريع الحديثة) |
| 7 | function عرض_مستخدم({ اسم, عمر, بلد = "غير محدد" }) { |
| 8 | console.log(`${اسم}, ${عمر} سنة, من ${بلد}`); |
| 9 | } |
| 10 | عرض_مستخدم({ اسم: "ريم", عمر: 25 }); |
مثال 2: التفكيك المتداخل من كائن معقد
| 1 | // تفكيك متداخل من استجابة API نموذجية |
| 2 | const استجابة = { |
| 3 | المستخدم: { الاسم: "أحمد", العنوان: { المدينة: "الرياض" } }, |
| 4 | الحالة: 200, |
| 5 | }; |
| 6 | |
| 7 | const { |
| 8 | المستخدم: { الاسم, العنوان: { المدينة } }, |
| 9 | الحالة, |
| 10 | } = استجابة; |
| 11 | |
| 12 | console.log(الاسم, المدينة, الحالة); // "أحمد" "الرياض" 200 |