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

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

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

 

کلاس ها

در ECMAScript 5 قبل تر, کلاس ها هرگر در جاوا اسکریپت وجود نداشتند. کلاس ها در جاوا اسکریپت ES6 که شبیه کلاس های در زبان های شی گرای دیگر مثل جاوا, PHP و .. بود, معرفی شدند.

به هر حال, آنها دقیقا مثل کلاس های ES6 کار نمی کنند. کلاس های ES6 ساخت آبجکت ها, پیاده سازی ارث بری با کلمه کلیدی extends و استفاده مجدد از کدها را آسان تر کرده است.

در ES6 می توانید یک کلاس را با کلمه کلیدی class به همراه نام کلاس تعریف کنید. قرارداد نوشتن نام کلاس ها بصورت TitleCase است (حروف اول هر کلمه بصورت بزرگ)

در مثال بالا, کلاس Square با کلمه کلیدی extends ویژگی و متدهای کلاس Rectangle را به ارث می برد. کلاس هایی که از دیگر کلاس ها ارث بری می کنند به نام کلاس های فرزند شناخته می شوند.

همچنین, شما باید متد super() را در کلاس فرزند قبل از دسترسی به this صدا بزنید. برای مثال, اگر super() را حذف کنید و متد getArea() را روی شیٔ square صدا بزنید, از آنجا که متد getArea() نیاز به دسترسی this را دارد پس با خطا مواجه می شوید.

نکته: برخلاف تعریف تابع, کلاس ها قابل hoist یا همان بالا رفتن در محدوده (scope) را ندارند. بنابراین همانند let و const و برخلاف توابع و متغیرهای تعریف شده با var , شما نیاز است قبل از استفاده از کلاس ها آن را تعریف کنید وگرنه خطای RefrenceError رخ می دهد.

 

ماژول ها

قبل از ES6 هیچ پشتیبانی از ماژول ها در جاوا اسکریپت وجود نداشت. هر چیزی داخل اپلیکیشن جاوا اسکریپت, برای مثال متغیرها بین فایل های مختلف, یک محدوده scope یکسان را به اشتراک می گذارند.

جاوا اسکریپت ES6 ماژول بر اساس فایل را معرفی کرده است که هر ماژول نشانگر یک فایل .js جدا است.

حالا می توانید با دستورات export یا import در ماژول, متغیرها, توابع, کلاس یا هر چیز دیگری را از ماژول یا فایل ها ایمپورت یا اکسپورت کنید.

حالا بیاید یک ماژول با فایل main.js بسازیم و کدهای زیر را داخل آن قرار بدیم:

حالا یک فایل دیگر به نام app.js با کدهای زیر ایجاد می کنیم:

درنهایت یک فایل test.html ایجاد و کدهای زیر را داخل آن قرار می دهیم و فایل HTML داخل مرورگر با پروتکل HTTP یا لوکال هاست باز می کنیم.

همچنین به type=”module” در تگ script دقت کنید.

 

پارامترهای Rest

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

این قابلیت برای موقعیت هایی که قصد پاس دادن پارامترها را به یک تابع دارید اما از اینکه چه تعداد را باید پاس بدید اطلاع ندارید, مفید است.

یک پارامتر rest با افزودن پیشوند اپراتور rest که ... (سه نقطه) است به همراه نام آن مشخص می شود.

پارامتر rest می تواند تنها آخرین در لیست پارامتر ها باشد یا تنها پارامتر rest باشد.

زمانی که پارامتر rest تنها پارامتر یک تابع باشد, همه آرگومان های پاس داده شده به تابع را دریافت می کند.

نکته: اصطلاح پارامترهای rest را با REST (REpresentational State Transfer) اشتباه نگیرید. چرا که هیچ ارتباطی با وب سرویس های RESTful ندارد.

 

اپراتور Spread

اپراتور Spread که با ... مشخص می شود دقیقا برعکس اپراتور rest است.

اپراتور Spread یک آرایه را از هم جدا و مقادیر آن را به تابع مشخص شده پاس می دهد :

اپراتور spread می تواند برای قرار دادن المان های یک آرایه به آرایه دیگر بدون استفاده از متدهای push(), unshift() concat() و غیره را می دهد.

 

Destructuring Assignment

Destructuring Assignment یک اصطلاح است که به ما امکان آسان برای استخراج مقادیر یک آرایه, خصوصیات شیٔ, به داخل متغیرها را با سینتکس کوتاه تر را می دهد.

 

Destructuring Assignment آرایه ها

قبل از ES6 برای دریافت مقادیر تکی یک آرایه باید بصورت زیر عمل می کردیم :

در جاوا اسکریپت ES6 می توانید این کار را در یک خط به سادگی زیر انجام بدید :

همچنین می توانید از اپراتور rest نیز به اینصورت بهره ببرید :

 

Destructuring Assignment آبجکت ها

در ES5 برای استخراج مقادیر خصوصیات نیاز بود چیزی مثل این را بنویسیم :

اما در جاوا اسکریپت ES6 می توانیم مقادیر خصوصیات شیٔ ها را بصوت زیر دریافت/اختصاص بدیم :

بیشتر ویژگی هایی که اینجا معرفی شدند در همه مرورگرهای معروف پشتیبانی می شود.

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

 

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

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

موفق باشید.

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

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

  1. حسین ۲۸ مهر ۱۳۹۸

    سلام استاد یک سوال داشتم درمورد جاوااسکریپت. برای مثال یک دکمه داریم که بعد از کلیک روی ان تایپ میکنه سلام. من میخوام بعد از کلیک ونوشتن سلام رو نمایش بده وبلافاصله سلام رو حذف کنه و بنویسه خدا حافظ از چه دستوری باید استفاده کنم لطفا راهنماییم کنید متشکرم

    پاسخ
    1. حسن شفیعی ۲۸ مهر ۱۳۹۸

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

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