آموزش ویژگی های ECMAScript 6 (جلسه 20) : آموزش Destructuring در اشیاء

همونطور که خاطرتون هست، در جلسه پیش در مورد متدهای جدید اضافه شده به آرایه ها براتون توضیحاتی رو قرار دادیم. در این جلسه میخوایم در مورد Destructuring در اشیاء براتون توضیحاتی رو قرار بدیم و با مزایا و ویژگی هایی که داره، آشناتون بکنیم. Destructuring به معنی استخراج کردن اطلاعات کوچکتر از آرایه، اشیاء و ... است و میتونیم اطلاعات رو درون متغیر مورد نظرمون ذخیره سازی کنیم. میتونیم از Destructuring برای آرایه، اشیاء، Set و Map مورد استفاده قرار بدیم. در این جلسه اشیاء رو توضیح میدیم و در جلسه بعد در مورد Destructuring در آرایه ها بحث میکنیم. Destructuring یک قسمت بزرگ و خیلی مهم از ES6 هست و باید به خوبی اون رو یاد بگیرید چون همانند let و const و arrow function هر روز با اون سر کار دارید و در همه پروژه ها باید از اون استفاده کنید.

در ابتدا ببینیم قبل از ES6 چطور به خصوصیتهای یک شئ دسترسی پیدا میکردیم تا بهتر بفهمیم که Destructuring چه کمکی به ما میکنه. کد زیر رو در نظر بگیرید:

میبینید که یک شئ بنام person ساختیم و 4 ویژگی رو برای اون تعریف و مقدار دهی کردیم. در خط 8 و 9 با استفاده از عملگر . یا dot به ویژگی های first و last مربوط به شئ person دسترسی پیدا کردیم و اونا رو درون متغیرهای متناظر first و last ذخیره سازی کردیم. همونطور که میبینید هر بار باید کدهای تکراری بسیار زیادی رو بنویسیم تا بتونیم به ویژگی مورد نظر دسترسی داشته باشیم. Destructuring معرفی شده در ES6 در اینجا به کمک ما میاد و با استفاده از اون میتونیم با یک خط کد این کار رو انجام بدیم:

میبینید که به سادگی این کار رو انجام دادیم و خروجی همانند قبل خواهد بود. همونطور که میبنید {} رو سمت چپ عملگر = قرار دادیم. این مورد جدید هست و نه بلاک حساب میشه و نه شئ محسوب میشه و یک Syntax جدید بنام Destructuring هست که درون ES6 معرفی شده است. کد بالا در پشت صحنه به این صورت اجرا میشه. در ابتدا از شئ person ویژگی های first و last درخواست و گرفته میشه و مقادیر گرفته شده رو درون متغیرهای متناظر جدید first و last قرار میگیره (Scope یا دامنه اونا همون دامنه پدر یا در اینجا Window خواهد بود). پس از اینکار میتونیم متغیرهای first و last رو در Console چاپ کنیم:

میبینید که مقادیر مورد نظر به سادگی قرار داده شده اند.

در کدهای بالا در ابتدای هر نسبت دادن مقدار، یک let رو قرار میدادیم و اون متغیر رو تعریف یا declare میکردیم. بصورت زیر:

میبینید که let در ابتدا قرار گرفته و با اینکار a و b به ترتیب برابر با 1 و 2 قرار میگیرن. حالا فرض کنید که به هر دلیلی بخوایم تعریف کردن رو قبل از Assign کردن، انجام بدیم. برای اینکار بصورت زیر عمل میکنیم:

میبینید که در خط 1 متغیرهای a و b رو تعریف کردیم و در خط 3 مقادیر رو به اونا نسبت دادیم. اما اگر کد بالا رو اجرا کنیم، در Console ارور زیر رو مشاهده خواهیم کرد:

میبینید که به ما میگه این = غیرمنتظره هست و یجای کار میلنگه. این ارور بخاطر این هست که از هیچ let یا var یا const در ابتدای عبارت استفاده نکردیم و مرورگر به مشکل برخورده. در این مواقع باید دور عبارت یک پرانتز قرار بدیم تا مرورگر متوجه بشه و به ما اجازه نسبت دادن مقدار بدون تعریف کردن رو بده. پس کد بالا رو بصورت زیر در میاریم:

با اینکار مشکل حل خواهد شد.

در بعضی مواقع میخواید به یک ویژگی شئ دسترسی پیدا کنید ولی قصد دارید که از نام دیگری برای اون استفاده کنید. در این مواقع میتونیم با استفاده از : یا colon و بصورت زیر برای اونا یک نام جدید تعریف کنیم:

میبینید که در خط 3 به مقادیر ویژگی های a و b دسترسی پیدا کردیم و برای متغیرهای a و b به ترتیب نامهای foo و bar رو قرار دادیم. در خط 5 نیز foo و bar رو در Console چاپ کردیم.

میتونیم برای متغیرها با استفاده از =، مقدار پیش فرض رو تعریف کنیم تا اگر در مواقعی اون ویژگی در شئ مورد نظر وجود نداشت، مقدار پیش فرض بجای اون قرار بگیره. کد زیر رو در نظر بگیرید:

میبینید که با استفاده از = برای اونا مقدار پیش فرض 3 و 5 رو قرار دادیم. شئ values ویژگی a رو داره ولی b رو خیر. پس به همین دلیل مقدار a برابر با 1 و مقدار b برابر با 5 قرار میگیره (5 مقدار پیش فرض برای متغیر b می باشد).

اینو در نظر داشته باشید که از مقادیر پیش فرض و قرار دادن نام متفاوت همزمان نیز میتونین استفاده کنید.

تا اینجای کار با اشیائ ساده سر و کار داشتیم. فرض کنید که یک شئ تودرتو بصورت زیر داشته باشیم:

میبینید که شئ مقدار پیچیده تر از قبل شده و در اینجا نیز میتونیم به ویژگی های مورد نظرمون دسترسی پیدا کنیم. میبینید که در خط 15 به ویژگی title دسترسی پیدا کردیم و برای اون نام englishTitle رو در نظر گرفتیم. برای دریافت ویژگی های تودرتو باید الگوسازی مشابه با خود شئ مورد نظر انجام بدیم تا به ویژگی مورد نظر برسیم. در بالا در ابتدا به ویژگی translations وارد شدیم و به ترتیب وارد آرایه [] و شئ {} شدیم و به ویژگی title دسترسی پیدا کردیم و برای اون نیز نام localeTitle رو در نظر گرفتیم. حالا اگر این موارد رو در Console چاپ کنیم بصورت زیر خواهد بود:

میبینید که به راحتی به مقادیر مورد نظر دسترسی پیدا کردیم. اگر میخواید بیشتر با Destructuring آشنا بشید، میتونین این لینک و این لینک رو مطالعه کنید.

موفق و پیروز باشید.

یا علی