ساختارشکنی
ساختارشکنی روشی برای بیرون کشیدن propertyهای یک object یا آیتم‌های یک array و قرار دادن آن‌ها در متغیرهاست. الگوی سمت چپ مشخص می‌کند چه داده‌ای برداشته شود. خود object یا array تغییر نمی‌کند. در تمام مثال‌ها این سفارش را داریم:
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
ساختارشکنی سادهٔ object
نام‌هایی که داخل {} می‌آیند، propertyهای هم‌نام را از مقدار سمت راست می‌خوانند. در مثال زیر دو ثابت تازه ساخته می‌شود و order دست‌نخورده می‌ماند.
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 است و چیزی را از سفارش حذف نمی‌کند.
تغییر نام و مقدار پیش‌فرض
با الگوی property: variable می‌توان نام متغیر را عوض کرد. مقدار بعد از = فقط وقتی به کار می‌رود که مقدار property برابر 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 در order وجود ندارد، مقدار regular استفاده می‌شود. با این تغییر نام، متغیری به نام guest ساخته نمی‌شود.
خواندن مقدار تودرتو
برای object تودرتو، الگو هم باید همان مسیر را نشان دهد. بخش { city } مقدار 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
براکت‌های [] آیتم‌ها را بر اساس جایگاه می‌خوانند. متغیر اول مقدار index صفر و متغیر دوم مقدار index یک را می‌گیرد.
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="fa" 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 بردارید و برای property ناموجود table مقدار پیش‌فرض بگذارید. سپس سفارشی بدون address بسازید و پیش از الگوی تودرتو، وجود آن را بررسی کنید.
mistakes
نام property را با نام متغیر جدید اشتباه نگیرید. مقدار پیش‌فرض جای null را نمی‌گیرد و object تودرتو هم همیشه موجود نیست. به خاطر بسپارید: {} برای propertyهای object و [] برای جایگاه‌های array است؛ ساختارشکنی منبع را تغییر نمی‌دهد. rest و spread موضوع جلسهٔ بعدی spread-rest هستند.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود