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



visibility  
mode_comment   ۲

همونطور که اطلاع دارید در جلسه قبل در مورد Destructuring در اشیاء یا object ها توضیحاتی رو قرار دادیم و شما رو بصورت کامل با اونا آشنا کردیم. در این قسمت قصد داریم در مورد Destructuring در آرایه ها بحث کنیم. Destructuring در آرایه ها بسیار شبیه به Destructuring در اشیاء است. درون اشیاء با استفاده از نام ویژگی، به مقادیر مورد نظر دسترسی پیدا میکردیم. اما در آرایه ها دیگه چنین چیزی وجود نداره و با استفاده از موقعیت اعضا، به اونا دسترسی پیدا میکنیم. مثال زیر رو در نظر بگیرید:

همونطور که میبینید در خط 1 یک آرایه سه عضوی رو تعریف کردیم و در خط 3 از Destructuring استفاده کردیم و سه نام دلخواه رو برای متغیرها در نظر گرفتیم و سه مقدار مربوط به آرایه foo به ترتیب و بصورت متناظر در متغیرهای one و two و three قرار میگیرن. در خط 5 تا 7 نیز این مقادیر رو در Console چاپ کردیم و خروجی اونا در مقابلشون قرار داده شده. همونطور که میبینید آرایه مورد نظر سه عضو داره و ما از سه عضو اون نیز استفاده کردیم. اما ما میتونیم از یک یا دو عضو اون نیز استفاده کنیم. بصورت زیر:

میبینید که دو مقدار اول آرایه رو در متغیرهای one و two قرار دادیم. فرض کنید که شما فقط میخواید به مقدار آخر آرایه دسترسی داشته باشید و اون رو درون یک متغیر ذخیره کنید. برای اینکار باید از , یا کامای خالی استفاده کنید. کد زیر رو در نظر بگیرید:

همونطور که میبینید از دو کاما یا , استفاده کردیم و این کار به این معنا هست که با دو مقدار اول کاری نداریم و فقط به مقدار سوم نیاز داریم. در بالا عضو سوم آرایه رو درون متغیر three ذخیره کردیم. همونطور که در اشیاء هم توضیح دادیم، گاهی اوقات پیش میاد که مرحله تعریف متغیر و مقدار دهی اونا در یکجا انجام نمیشه. برای این کار بصورت زیر عمل میکنیم:

همونطور که میبینید در خط 1 متغیرها رو تعریف کردیم و در خط 3 مقادیر 1 و 2 رو به روش Destructuring به متغیرهای a و b نسبت دادیم (در آرایه ها دیگه نیازی نیست که مثل اشیاء دور اونا یک پرانتز قرار بدیم و به همین صورت به خوبی اجرا خواهند شد). در آخر نیز اونا رو در Console چاپ کردیم.

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

میبینید که آرایه مورد نظر فقط یک عضو داره ولی ما میخوایم دو متغیر رو مقداردهی کنیم. مقدار متغیر firstName برابر با Mohammad میشه ولی برای متغیر secondName هیچ مقداری در آرایه وجود ندارد و به همین دلیل در خروجی undefined قرار داده میشه. در این مواقع میتونین از مقادیر پیش فرض استفاده کنید. بصورت زیر:

more  بیشتر بخوانید : ترفندهای پیشرفته jQuery (قسمت 26)

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

کاربرد دیگه ای که Destructuring داره و کار مارو راحتتر میکنه در Swap کردن یا عوض کردن مقدار دو متغیر است. فرض کنید که دو متغیر a = 1 و b = 2 رو دارید و میخواید مقادیر اونا رو با هم عوض کنید و بصورت a = 2 و b = 1 در بیارید. برای اینکار در گذشته از روش زیر استفاده میکردیم:

میبینید که یک متغیر موقتی بنام tmp تعریف کردیم و از اون برای تغییر دادن مقادیر دو متغیر استفاده کردیم. اما با استفاده از Destructuring به راحتی میتونین این کار رو انجام بدین. بصورت زیر:

با اینکار مقدار متغیرهای a و b به سادگی تغییر میکنه.

اگر یادتون باشه قبلا در مورد Rest Parameter ها براتون توضیحاتی رو قرار دادیم. در اینجا نیز میتونیم از قدرت Rest Parameter ها استفاده کنیم. کد زیر رو در نظر بگیرید:

میبینید که یک آرایه در خط 1 تعریف کردیم و در خط 3 با استفاده از Destructuring مقدار Mohammad رو درون firstName قرار دادیم و با استفاده از ... بقیه مقادیر رو درون آرایه RestNames قرار دادیم. در آخر نیز اونا رو در Console چاپ میکنیم. خروجی در مقابل هر دستور و بعد از // قرار داده شده است.

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

میبینید که با استفاده از [] یه مرحله دیگه وارد آرایه شدیم و به آرایه ای که درون آرایه مورد نظر قرار داره نفوذ کردیم و متغیر سوم اون رو مورد استفاده قرار دادیم و در Console چاپ کردیم. به همین راحتی.

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

یا علی

comment دیدگاه کاربران

سلام چرا امکان دانلود نیست؟

محمد اسفندیاری

چه چیزی رو میخواید دانلود کنید؟

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.