التفكيك (Destructuring)
التفكيك صيغة في JavaScript تنقل خصائص object أو عناصر array إلى متغيرات وفق نمط واضح، من دون تعديل المصدر. سنستخدم هذا الطلب:
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
تفكيك object الأساسي
تختار الأسماء داخل {} الخصائص المطابقة لها من القيمة الواقعة على اليمين، وتنشئ ثابتين جديدين.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest, drink } = order;
console.log(guest);
console.log(drink);
الناتج هو lida ثم tea. إنها طريقة مختصرة لقراءة order.guest وorder.drink، ولا تحذف شيئاً من order.
إعادة التسمية والقيمة الافتراضية
يحدد النمط property: variable اسماً جديداً للمتغير. ولا تعمل القيمة بعد = إلا إذا كانت الخاصية undefined.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest: customer, size = "regular" } = order;
console.log(customer);
console.log(size);
يحصل customer على lida، ويحصل size على regular لأن الخاصية غير موجودة. لا ينشئ هذا النمط متغيراً باسم guest.
خاصية متداخلة
يتبع النمط المتداخل شكل object. يقرأ الجزء { city } القيمة من order.address.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { address: { city } } = order;
console.log(city);
الناتج rasht، ولا يتكوّن متغير باسم address. إذا كانت address مفقودة أو undefined فقد يحدث خطأ عند قراءة city. لا يمكن وضع optional chaining داخل هذا النمط؛ افحص القيمة أو جهّزها أولاً.
تفكيك array
تطابق الأقواس [] العناصر بحسب موضعها: المتغير الأول للفهرس صفر والثاني للفهرس واحد.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const [firstExtra, secondExtra] = order.extras;
console.log(firstExtra);
console.log(secondExtra);
الناتج mint ثم lemon. يمكنك اختيار أسماء المتغيرات، لكن الموضع هو الذي يحدد القيمة، وتبقى order.extras كما هي.
التفكيك في معامل الدالة
يمكن للدالة تفكيك object مباشرة في قائمة المعاملات. تحتاج الدالة التالية إلى guest وdrink فقط.
function label({ guest, drink }) {
return guest + " ordered " + drink;
}
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
console.log(label(order));
تعيد الدالة lida ordered tea. يعمل نمط المعامل وقت الاستدعاء، لذلك يسبب تمرير null أو undefined خطأ إن لم تعالج الدالة هذه الحالة.
مثال صفحة كامل
يجمع المثال تفكيك object وarray ومعامل الدالة، ثم يعرض ملخص الطلب.
<!doctype html>
<html lang="ar" dir="rtl">
<head><meta charset="utf-8"><title>التفكيك في JavaScript</title></head>
<body>
<p id="result"></p>
<script>
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
function summary({ guest, drink, extras }) {
const [firstExtra] = extras;
return guest + " / " + drink + " / " + firstExtra;
}
document.getElementById("result").textContent = summary(order);
</script>
</body>
</html>
الناتج الظاهر هو تماماً lida / tea / mint. تقرأ الدالة ما تحتاجه ولا تعدّل order.
include_try
أعد تسمية drink إلى beverage، وأضف قيمة افتراضية للخاصية المفقودة table. جرّب طلباً بلا address وافحصها قبل التفكيك المتداخل.
mistakes
لا تخلط بين اسم الخاصية واسم المتغير الجديد، ولا تتوقع أن تستبدل القيمة الافتراضية null، ولا تفترض وجود object المتداخل دائماً. {} للخصائص و[] لمواضع array، والتفكيك لا يغيّر المصدر. يأتي rest وspread في جلسة spread-rest التالية.
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى