​​ES6 Destructuring
همانطور که میدونید در جاوااسکریپت به روش زیر میتوانیم یک آبجکت یا آرایه با چند عضو ایجاد کنیم:
var x = [1, 2, 3]
var y = { one: 1, two: 2 }
با استفاده از Destructuring که در نسخه ES6 جاوااسکریپت معرفی شد میتوانیم از سینتکس مشابه برای استخراج همزمان مقادیر از یک آبجکت یا آرایه استفاده کنیم (تصویر1)

اگر مقداری برای متغیر پیدا نشود. مقدار آن متغیر undefined خواهد بود (مشابه متغیرهای five و d در تصویر)
تعریف متغیر و destructuring میتواند در مراحل مختلف کد انجام شود (تصویر 2)

#quicktip #js #destructuring

@ProGraphs

​​نکات تکمیلی Destructuring
1) مقادیر پیشفرض: اگر مقدار مورد نظر در آرایه یا آبجکت پیدا نشود. مقدار پیشفرض به جای undefined استفاده میشود (قسمت ۱ کد در تصویر)

2) نام دلخواه متغیر: اگر در destructuring یک آبجکت بخواهیم اسم متغیر مشابه پراپرتی آبجکت نباشد از این روش استفاده میکنیم (قسمت ۲ کد در تصویر)

3) ترکیب 1 و 2 : اگر هم بخواهیم متغیر مقدار پیشفرض داشته باشد و هم نام متغیر ایجاد شده دلخواه باشد (قسمت ۳ کد در تصویر)

4) پرش از روی مقادیر آرایه: (قسمت ۴ کد در تصویر).

5) عملگر Rest: با استفاده از عملگر Rest میتوانیم بقیه مقادیر آرایه را در یک آرایه جدید استخراج کنیم. دقت کنید که استفاده از این قابلیت در آبجکت ها هنوز استانداردسازی نشده. (قسمت ۵ کد در تصویر)

6) اما چرا زمانی که object destructuring با تعریف متغیر همراه نیست از عملگر پرانتز استفاده میکنیم ؟
به این دلیل که '{}' در جاوااسکریپت نشان دهنده یک بلاک کد هست و برای تمایز بلاک کد و عبارت destructuring از پرانتز استفاده میکنیم

#quicktip #js #destructuring

@ProGraphs

​​نکات تکمیلی Destructuring قسمت ۲
1) میتوان array destructuring را برروی همه ی مقادیر iterable مانند رشته ها اعمال کرد. (قسمت ۱ کد در تصویر)

2) مقادیر پیشفرض میتوانند از متغیرهای دیگر destructuring استفاده کنند. البته دقت کنید که ترتیب اهمیت دارد و متغیری که اول آمده نمیتواند از مقدار متغیردوم استفاده کند. (قسمت ۲ کد در تصویر)

3)‌ اگر مقدار پیشفرض یک آرایه یا آبجکت باشد. دوباره قوانین destructuring بر روی آن اعمال میشود. به طور مثال در قسمت ۳ کد در تصویر میبینید که آرایه سمت راست عضوی ندارد پس از مقدار پیشفرض استفاده میشود. اما مقدار پیشفرض هم یک آبجکت هست ({a: 1}) بنابراین یک destructuring جدید ایجاد میشود

4)‌ نام پراپرتی میتواند در زمان اجرا محاسبه شود و static نباشد. (قسمت ۴ کد در تصویر)

#quicktip #js #destructuring

@ProGraphs

​​چند کاربرد از Destructuring
1)‌ جا به جا کردن مقدار دو متغیر

2)‌ کپی کردن آرایه ها

3) قسمت قسمت کردن آرایه

4) بازگشت چند مقدار همزمان از تابع

5) در اکثر زبان ها مثل پایتون میتوانید پارامترهای یک تابع را بر اساس نام آنها به تابع ارسال کنید (به جای ترتیب پارامترها). جاوااسکریپت به صورت پیشفرض از این قابلیت پشتیبانی نمیکند. اما با استفاده از destructuring میتوان این قابلیت را شبیه سازی کرد

6)‌ استفاده از destructuring در حلقه for...of

#quicktip #js #destructuring

@ProGraphs