فرادرسجاوا اسکریپت ES6 چیست و چه خصوصیاتی دارد؟ – راهنمای مقدماتی
جاوا اسکریپت در اغلب بخش‌های وب تعاملی حضور دارد و از این رو باید همراه با آن تکامل پیدا کند. هر سال قابلیت‌های جدیدی به جاوا اسکریپت اضافه می‌شوند. در این مقاله به بررسی جاوا اسکریپت ES6 و شیوه استفاده از آن در یک وب‌سایت می‌پردازیم.
جاوا اسکریپت نسخه‌های متعددی دارد
شرکت Oracle یک نشان تجاری به نام JavaScript دارد، بنابراین استاندارد واقعی که جاوا اسکریپت مدرن پیاده‌سازی می‌کند به نام استاندارد ECMAScript یا به اختصار ES خوانده می‌شود. استاندارد اولیه جاوا اسکریپت ECMAScript 5 یا ES5 نام داشت که در سال 2009 عرضه شد. این جاوا اسکریپت خالص بدون هیچ قابلیت اضافی بود که در همه جا حتی در IE9 پشتیبانی می‌شود.
ES6 یک استاندارد نسبتاً جدید است که در سال 2015 عرضه شده است و از قابلیت‌های جدید زیادی پشتیبانی می‌کند. این استاندارد از نظر فنی ES2015 نامیده می‌شود و هر نسخه سالانه پس از آن نیز بر اساس سال انتشار مشخص می‌شود. اما در هر حال اغلب افراد آن را ES6 می‌نامند و از این رو ما نیز از همین عنوان استفاده می‌کنیم.
ES6 به طور خاص از این جهت مهم است که یک نشانه از آغاز استانداردسازی جاوا اسکریپت محسوب می‌شود. امروزه ECMA هر سال یک نسخه جدید ارائه می‌کند. اما ES6 شش سال پیش و پس از ES5 عرضه شد که 10 سال پس از ES3 بود و از این رو یک سنگ نشانه مهم در این مسیر محسوب می‌شود.
چگونه از ساختار ES6 استفاده کنیم؟
ES6 در عمل در جاهای زیادی پشتیبانی می‌شود و تنها مشکل عمده در زمینه اینترنت اکسپلورر است. بنابراین گرچه شما می‌توانید شروع به نوشتن استایل ES6 بکنید، اما نمی‌توانید مطمئن باشید که روی مرورگر همه افراد رفتار یکسانی خواهد داشت.
امروزه ES6 به طور معمول به کمک ابزاری مانند Babel به ساختار ES5 کامپایل می‌شود. Babel یک کامپایلر است که کد توسعه (کدی که در ES6 با همه ویژگی‌های آن نوشته شده است را به کدی تبدیل می‌کند که روی سایت پروداکشن اجرا می‌شود و در اغلب موارد نیز به کمک webpack به صورت باندل‌شده و minify-شده عرضه می‌شود.
طرز کار آن این گونه است که شما در محیط توسعه خود برخی فایل‌های js. می‌نویسید. شما آزاد هستید که از هر ساختار زیبای ES6 که دوست دارید استفاده کنید. اما به جای این که این کد مستقیماً اجرا شود، Webpack را طوری تنظیم می‌کنید که فایل‌های JS را با Babel بارگذاری کند. در اغلب موارد شما باید webpack-dev-server را اجرا کنید تا در زمان ایجاد تغییرها این کار تبدیل به صورت خودکار اجرا شود.
اکنون به جای بارگذاری فایل index.js فایل bundle.js بارگذاری می‌شود که شامل همه کدهای شما است. این کار مزیت عمده دیگری نیز دارد که به شما اجازه می‌دهد از ماژول‌های NPM در کد جاوا اسکریپت خود استفاده کنید. با این حال در صورتی که موارد زیادی اضافه کنید، کد بیش از حد حجیم می‌شود، گرچه وب‌پک در زمینه minify کردن عملکرد خوبی دارد.
قابلیت‌های جدید ES6
فهرست قابلیت‌های جدید ES6 بسیار طولانی است و از این رو در ادامه این مقاله قصد بررسی تک‌تک آن‌ها را نداریم. برای مشاهده فهرست کامل این قابلیت‌ها می‌توانید از این لینک (+) استفاده کنید که شامل قابلیت‌های جدید استاندارد ES2016 و بالاتر است.
به طور کلی اگر Babel بتواند چیزی را به نسخه‌های قبلی از جاوا اسکریپت کامپایل کند، استفاده از آن در زمان توسعه احتمالاً امن خواهد بود. اما اگر چنین نباشد و شما هم به آمار 3 درصدی کاربرانی که از IE11 استفاده می‌کنند اهمیتی نمی‌دهید، در صورتی که قابلیت بسیار جدیدی نباشد، احتمالاً در اغلب مرورگرهای مدرن پشتیبانی می‌شود.
تابع‌های Arrow
در زمان استفاده از تابع‌های Arrow به جای نوشتن کدی مانند زیر:
می‌توانید کلیدواژه تابع را با یک علامت پیکان پس از پرانتز جایگزین کنید:
به علاوه، در صورتی که تنها یک آرگومان ارسال می‌کنید، نیازی به نوشتن پرانتز ندارید. همچنین در صورتی که تنها یک مقدار بازگشتی وجود داشته باشد، نیازی به نوشتن آکولاد و گزاره return وجود نخواهد داشت.
این یک ساختار جدید برای «کلوژرهای عبارت» (expression closures) است و موجب ایجاد تابع‌های کاملاً منسجم به خصوص در زمان کار با لیست‌ها، Callback-ها یا مدیریت خطا می‌شود. این روش شباهت زیادی به نوشتن گزاره‌های تک‌خطی دارد.
شیء ساده شده و ایجاد آرایه با تخریب
در ES6 می‌توان از ساختار زیر استفاده کرد:
بدین ترتیب می‌توانید نام‌های کلید را نادیده بگیرید و آن‌ها به طور خودکار روی نام‌های متغیر تعیین می‌شوند:
به علاوه، این کد به روش دیگری به نام «انتساب تخریبی» (destructuring assignment) نیز کار می‌کند:
یک عارضه جالب تخریب ساختار … است که مانند «و غیره» عمل می‌کند و بقیه آرایه یا شیء را به یک متغیر انتساب می‌دهد:
همچنین از سمت دیگر نیز عمل می‌کند که جمله بسط و مسطح‌سازی آرایه‌ها را دارد:
در مورد تخریب بیش از این‌ها می‌توان صحبت کرد، اما با توجه به مقتضای این مقاله به این حد اکتفا می‌کنیم.
کلاس‌ها
جاوا اسکریپت اینک از کلاس‌ها پشتیبانی می‌کند. طرز کار آن به صورت زیر است:
چنان که می‌بینید این ساختار مشابه زبان‌های شیء‌گرا است، اما نه به طور کامل. چنان که در مستندات موزیلا (+) بیان شده است این سیستم جدید اساساً یک «شمایل جدید» (syntactical sugar) بر مبنای وراثت مبتنی بر پروتوتایپ موجود جاوا اسکریپت است و در عمل موجب شیء‌گرا شدن جاوا اسکریپت نمی‌شود. با این حال امکان جالبی محسوب می‌شود. به علاوه، ساختار کلاس از متدها و مشخصه‌های استاتیک و کلاس‌های فرزند پشتیبانی می‌کند، اما نمی‌تواند از چند والد ارث‌بری کند.
تغییر به آرگومان‌های تابع
ES6 دو روش جدید برای نوشتن پارامترهای تابع معرفی کرده است. روش اول پارامترهای پیش‌فرض است که با انتساب یک مقدار به تعریف تابع تعیین می‌شوند:
اگر func را بدون تعیین دو آرگومان فراخوانی کنید، مقدار پیش‌فرض را در نظر می‌گیرد. ضمناً اینک تابع‌ها می‌توانند تعدادی نامتناهی از آرگومان‌ها در یک آرایه داشته باشند که ساختار پارامترهای تابع rest نامیده می‌شود:
پارامتر rest روی یک آرایه از «بقیه» پارامترهای تابع تعیین خواهد شد و یا در صورتی که چیزی بیش از پارامترهای با نام موجود نباشند، به صورت undefined خواهد بود.
Let و const
دستور let جایگزینی برای var محسوب می‌شود که به طور خاص دامنه بلوکی دارد. طرز کار متغیرها در جاوا اسکریپت به طور معمول به صورت زیر است:
متغیر سراسری را می‌توان در تابع استفاده کرد، اما متغیر تابع لوکال را نمی‌توان خارج از تابع مورد استفاده قرار داد. بدین ترتیب می‌توانیم هر زمان نام متغیرها را به صورت i ،tmp ،x و count تعیین کنیم و به این ترتیب ترسی از سرزنش شدن نداشته باشیم. دامنه بلوکی طرز کار متفاوتی دارد و به ما امکان می‌دهد که متغیرها را با بلوک‌های تودرتو بازتعریف کنیم:
ساختار let اساساً امکان ویرایش محتوای x درون بلوک را فراهم می‌سازد، حال این بلوک چه یک تابع، چه بلوک catch، و یا یک بلوک صریح باشد. در زمانی که بلوک را ترک می‌کنیم نیز ریست می‌شود. این وضعیت به طور خاص در مواردی که می‌خواهیم از متغیرهای شمارشی count استفاده کنیم مفید واقع می‌شود، زیرا هر بلوک دامنه متفاوتی دارد. این دامنه از بلوک‌های فرزند ارث‌بری می‌کند، اما می‌تواند باز هم تودرتو تعریف شده و دوباره زنجیره‌سازی شود.
ساختار const نسبتاً سرراست است. با تعویض var با const متغیر به صورت فقط-خواندنی درمی‌آید. اگر تلاش کنید چیزی در این متغیر بنویسید، خطایی مانند زیر صادر می‌شود:
این خطا به ما اعلام می‌کند که تلاش کرده‌ایم کاری که نباید را انجام دهیم. این خطا هدفی به جز یادآوری به شما و جلوگیری از بروز برخی باگ‌ها در زمان کدنویسی ندارد.
اگر این مطلب برای شما مفید بوده است، آموزشهای زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزشهای JavaScript (جاوا اسکریپت)
- آموزش JavaScript ES6 (جاوا اسکریپت)
- مجموعه آموزشهای برنامهنویسی
- ۵ کاربرد عملگر اسپرد (Spread) در ES6 — راهنمای کاربردی
- آشنایی با تغییرات ساختار ایمپورت و اکسپورت در ES6 — راهنمای جامع
- حلقه for در جاوا اسکریپت — از صفر تا صد + مثال و کد
==
