50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

آموزش جاوا اسکریپت ES6 – بخش اول

آموزش جاوا اسکریپت ES6

در بخش های قبلی تمام مباحثی که نیاز بود تا جاوا اسکریپت را یاد بگیرید مطرح کردیم و در بخش آخر از سری آموزش جاوا اسکریپت قصد داریم, قابلیت های جدید ورژن ۶ جاوا اسکریپت را یاد بگیریم.

 

ECMAScript 6 یا جاوا اسکریپت ES6 چیست ؟

ECMAScript 2015 (اکما اسکریپت) یا همان ES6 ششمین و بزرگترین ویرایش استاندارد ECMAScript است.

جاوا اسکریپت ES6 تغییرات قابل توجهی را به زبان جاوا اسکریپت اضافه کرد. بعضی از این قابلیت ها مثل متغیرهای محدوده بلاک (block-scoped), حلقه جدید برای آرایه و آبجکت ها, قالب چندخطی و خیلی موارد دیگر که باعث آسان و جالب تر شدن جاوا اسکریپت شده است.

در این بخش قصد داریم بعضی از قابلیت های جاوا اسکریپت ES6 را بررسی کنیم.

 

کلمه کلیدی let

جاوا اسکریپت ES6 کلمه کلیدی let را برای تعریف متغیر معرفی کرده است. قبل از ES6 تنها راه برای تعریف متغیر در جاوا اسکریپت کلمه کلیدی var بود. حالا تفاوت بین آنها چیست؟

دو تفاوت اساسی بین let و var وجود دارد. متغیرهای تعریف شده با var در محدوده توابع هستند و در داخل محدوده (scope) خود hoist می شوند به این معنا که همه جا قابل دسترس هستند

درحالی که متغیرهای تعریف شده با let داخل فقط بلاک {} قابل دسترس هستند و امکان hoist شدن از محدوده خود را ندارند مثلا داخل یک حلقه قابل دسترس است و نه خارج از آن !

مثال زیر را ببینید :

همانطور که در مثال بالا دیدید, متغیر i در اولین بلاک خارج از محدوده حلقه for قابل دسترس نیست. که به ما این امکان را می دهد تا بتوانیم همان متغیر را به دفعات زیاد استفاده کنیم که باعث می شود تعریف متغیر کمتر و کدهای تمیزتری داشته باشیم.

 

کلمه کلیدی const

کلمه کلیدی جدید const به ما امکان تعریف ثابت (constant) را می دهد. ثابت ها فقط قابل خواندن هستند بنابراین نمی تواند مقادیر جدید برای آن ها مشخص کنید.

همچنین مانند let فقط در محدود بلاک {} قابل دسترس هستند.

به هر حال شما هنوز می توانید خصوصیات آبجکت یا المان های آرایه را تغییر بدید.

 

حلقه for…of

حلقه جدید for..of در جاوا اسکریپت ES6 به شما اجازه تکرار روی آرایه ها یا دیگر آبجکت های قابل تکرار می دهند. همچنین کد داخل این حلقه در هر بار تکرار المان آبجکت اجرا می شود.

حلقه for…of روی آبجکت ها قابل پیاده سازی نیست. اگر قصد تکرار (iterate) خصوصیات آبجکت را دارید می توانید از حلقه for-in استفاده کنید.

 

قالب ادبیات (Literals)

این قابل به ما یک راه آسان و تمیز برای ساخت رشته های چندخطی و تعامل با رشته ها را می دهد. حالا می توانید متغیر ها یا عبارات را به هر رشته ای بدون هیچ زحمتی اضافه کنید.

قالب literal با علامت تیک ( ) به جای استفاده از علامت نقل قول های معمول, ساخته می شود.

متغیرها یا عبارات می توانند داخل رشته با سینتکس ${…} قرار بگیرند.

مثال های زیر را مقایسه کنید تا اینکه ببینید که چقدر کاربردی هستند :

در حالیکه در ES5 باید از همچنین موردی استفاده کرد :

 

مقادیر پیش فرض برای پارامترهای تابع

حالا در جاوا اسکریپت ES6 می توانید مقادیر پیش فرض را برای پارامترهای تابع مشخص کنید به این معنی که اگر هنگام صدا زندن تابع, آرگومانی به تابع اختصاص داده نشود, مقادیر پیش فرض پارامترها استفاده می شود.

این یکی ویژگی هایی بود که بیشتر از هرچیزی در جاوا اسکریپت انتظار داشتیم تا اضافه شد درحالی که خیلی وقت پیش در دیگر زبان های برنامه نویسی این مورد وجود داشت :

در ES5 برای داشتن همچنین قابلیتی باید از ترفند مثال زیر استفاده می کردیم :

 

توابع Arrow

توابع Arrow یکی دیگر از قابلیت های جالب در جاوا اسکریپت ES6 است. که به ما سینتکس مختصرتری برای نوشتن توابع expression را با حذف کلمات function و return می دهد.

توابع Arrow با سینتکس جدید که => است تعریف می شوند:

همانطور می بینید هیچ کلمه کلیدی function و returnی برای تعریف توابع arrow استفاده نشده است.

شما همچنین می توانید پارانتزها () را بری وقتی که یک پارامتر دارید نادیده بگیرید اما اگر صفر پارامتر یا بیشتر از یک پارامتر را داشته باشید, باید از پارانتز استفاده کنید.

همچنین, اگر بیشتر از یک عبارت در بدنه تابع وجود داشته باشد نیاز است که از براکت {} استفاده کنید.در این مورد نیاز است که از دستور return برای برگشت دادن مقدار هم استفاده کنید.

چندین نوع مختلف از نحوه نوشتن توابع arrow که بیشترین استفاده را دارند, در مثال زیر آورده شده است :

یک تفاوت مهم بین توابع arrow و توابع معمولی وجود دارد. برخلاف توابع معمولی, یک تابع arrow به هیچ وجه this خود را ندارد و this یک تابع را که خارج از آن تعریف شده است را دریافت می کنید.

در جاوا اسکریپت, this محتوای اجرا شده کنونی یک تابع است.

برای درک بهتر, مثال زیر را بررسی کنید :

دوباره نوشتن مثال بالا با قالب literal و تابع arrow در جاوا اسکریپت ES6 را ببینید :

همانطور که دیدید, کلمه کلیدی this در مثال بالا اشاره به محتوای تابع محصور شده تابع arrow است که آبجکت Person (خط ۹) برخلاف مثال قبلی ک به آبجکت سراسری window اشاره شده است.

 

امیدواریم از بخش اول آموزش جاوا اسکریپت ES6 نهایت استفاده را برده باشد.

در قسمت دوم بقیه مباحث باقی مانده و مهمی مثل کلاس و ماژول ها را بررسی می کنیم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۲)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. عرشیا ۲۰ فروردین ۱۳۹۹

    خیلی عالی بود توضیحاتتون ممنونم فقط چند مورد:
    ۱-در حلقه for ظاهرا فراموش شده var i=0 نوشته بشه
    ۲-در همون حلقه for چرا باید جواب ۵ بده؟ اینو متوجه نشدم
    ۳-for of کلیه string ها را در خروجی به صورت حروف جدا از هم میدهد؟

    پاسخ
    1. حسن شفیعی ۲۰ فروردین ۱۳۹۹

      سلام. خوشحالیم که مفید واقع شده.
      ۱٫ به خاطر افزونه هست که ۰ رو در کد نشون نمیده و اگر روی کد دابل کلیک بشه کد کامل با var i = 0 نمایش داده میشه
      ۲٫ جواب ۵ نمیشه و اونجا هم کامنت شده که ۰,۱,۲,۳,۴ چون شرط قرار دادیم i اولیه ۰ هست پس از ۰ شروع میشه و گفتیم تا زمانی که کمتر از ۵ هست این حلقه ادامه پیدا کنه پس اگر ۴ شد دیگه برنامه از حلقه خارج میشه چون گفتیم i < ۵ ۳٫ بله کلیه آیتم ها رو که چه string باشند یا number رو میتونید در خروجی بصورت جدا دریافت کنید.

      پاسخ
دوره های آموزشی