آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

آموزش ویژگی های ECMAScript 6 (جلسه 13) : موارد بهبود یافته Object

0 59 ۱۸ مرداد ۹۶

همونطور که اطلاع دارید در جلسه قبل در مورد عملگر Spread توضیحاتی رو قرار دادیم و شما رو با اون آشنا کردیم. در این جلسه میخوایم در موارد بهبودیافته Object ها در ES6 توضیح بدیم. همونطور که میدونین تقریبا هر چیزی که در Javascript وجود داره، یک Object هست. مثلا توابع در Javascript نوعی خاص از object هستند و همچنین آرایه و رشته و اعداد و ... نیز نوعی شئ به حساب میان. همونطور که میدونین اشیاء نقش زیاد و پررنگی در برنامه های ساخته شده با Javascript دارند و استفاده از اونا با گذشت زمان بیشتر و بیشتر میشه و بهبود و ارتقائ عملکرد Object ها امری ضروری به حساب میاد و به همین دلیل ES6 اصلاحات زیادی در مورد اشیا به وجود آورده که کار با اونا رو راحت تر کرده است. کد زیر رو در نظر بگیرید:

همونطور که میبینید یک تابع بنام getPerson به وجود آوردیم و مثلا کار اون اینه که یک شخص رو از دیتابیس یا ... بگیره و برگشت بده ولی ما در اینجا نام و سن شخص مورد نظر رو خودمون قرار دادیم و در آخر یک شئ که حاوی name و age هست رو برگشت دادیم. بعد از اون هم تابع رو صدا زدیم و ویژگی name اون رو در console چاپ کردیم. پس Mohammad در Console چاپ میشه. این روش برگشت دادن شئ در ES5 هست و همونطور که میبینید چیزای تکراری زیاد داره و مجبوریم که هم property و هم value رو برابر با هم قرار بدیم. ES6 یک روش مختصرنویسی به وجود آورده و در جاهایی که مثل کد بالا، نام ویژگی object یا نام متغیر یکی هست، میتونیم دیگه اون رو قرار ندیم و به کارمون سرعت ببخشیم. با اینکار کد بصورت زیر میشه:

میبینید که کار ما خیلی راحتتر میشه. حتی میتونین کل فواصل خالی رو حذف کنید و همه رو در یک خط بنویسید، بصورت زیر:

میبینید که چقد میتونه در کدنویسی سریع به ما کمک کنه. علاوه بر موارد قبل، روشی برای مختصرنویسی متدها نیز ارائه شده است. در ابتدا بزارید به روش ES5 یک متد رو اضافه کنیم. کد زیر رو در نظر بگیرید:

همونطور که دیدید یک متد بنام welcome به وجود آوردیم و درون اون یک رشته رو برگشت دادیم. در خط آخر هم مقدار برگشتی رو در Console چاپ کردیم و با اینکار مقدار Welcome Mohammad در Console چاپ میشه. حالا شما میتونین function و : رو حذف کنید و کدهاتون رو خلاصه تر کنید. بصورت زیر:

با اینکار خروجی تغییر نمیکنه و میبینید که تعریف کردن متد در ES6 راحت تر از قبل شده است.

نکته بعدی که در مورد اون توضیح میدیم Computed Property Name هستش. فرض کنید که شما بخواید یک property رو برای یک متد قرار بدین که بین اون space یا فضای خالی وجود داره. مثلا کد زیر رو در نظر بگیرید:

همونطور که دیدید یک ویژگی بنام first_name برای شئ person قرار دادیم و با استفاده از عملگر . به اون دسترسی پیدا کردیم. اما اگر بخوایم بجای first_name ویژگی بنام first name داشته باشیم، دیگه نمیتونیم از . استفاده کنیم و باید از [] استفاده کنیم. بصورت زیر:

میبینید که با استفاده از computed property ها میتونیم هر نوع رشته ای رو برای property قرار بدیم. همچنین میتونین رشته مربوط به property رو درون یک متغیر ذخیره کنید و از اون استفاده کنید. بصورت زیر:

همچنین شما این امکان رو دارید که با استفاده از expression درون براکت، رشته های داینامیک و پویا رو به وجود بیارید و بعنوان property قرار بدین. کد زیر رو در نظر بگیرید:

با اینکار به راحتی property پویا برای شئ person تعریف کردیم و مقدار Mohammad رو به اون نسبت دادیم. میتونیم کدی بصورت زیر رو هم به وجود بیاریم:

میبینید که از Computed Property ها میتونیم به هر صورتی که بخوایم استفاده کنیم. بهمین راحتی.

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

یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :