جاوا اسکریپت ES6 چیست و چه خصوصیاتی دارد؟ — راهنمای مقدماتی

۱۵۸۶ بازدید
آخرین به‌روزرسانی: ۰۷ شهریور ۱۴۰۲
زمان مطالعه: ۵ دقیقه
جاوا اسکریپت 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 به جای نوشتن کدی مانند زیر:

1arr.map(function (d) {
2  return d + 1;
3});

می‌توانید کلیدواژه تابع را با یک علامت پیکان پس از پرانتز جایگزین کنید:

1arr.map((d) => {
2  return d + 1;
3});

به علاوه، در صورتی که تنها یک آرگومان ارسال می‌کنید، نیازی به نوشتن پرانتز ندارید. همچنین در صورتی که تنها یک مقدار بازگشتی وجود داشته باشد، نیازی به نوشتن آکولاد و گزاره return وجود نخواهد داشت.

1arr.map(d => d + 1);

این یک ساختار جدید برای «کلوژرهای عبارت» (expression closures) است و موجب ایجاد تابع‌های کاملاً منسجم به خصوص در زمان کار با لیست‌ها، Callback-ها یا مدیریت خطا می‌شود. این روش شباهت زیادی به نوشتن گزاره‌های تک‌خطی دارد.

شیء ساده شده و ایجاد آرایه با تخریب

در ES6 می‌توان از ساختار زیر استفاده کرد:

1var type = "123", color = "blue"
2var obj = { type: type, color: color }

بدین ترتیب می‌توانید نام‌های کلید را نادیده بگیرید و آن‌ها به طور خودکار روی نام‌های متغیر تعیین می‌شوند:

1var obj = { type, color }

به علاوه، این کد به روش دیگری به نام «انتساب تخریبی» (destructuring assignment) نیز کار می‌کند:

1var { type, color } = obj

یک عارضه جالب تخریب ساختار … است که مانند «و غیره» عمل می‌کند و بقیه آرایه یا شی‌ء را به یک متغیر انتساب می‌دهد:

1var { type, ...rest } = obj
2//rest == { color: "blue" }

همچنین از سمت دیگر نیز عمل می‌کند که جمله بسط و مسطح‌سازی آرایه‌ها را دارد:

1var arr1 = ["a", "b"], arr2 = ["c", "d"]
2var flat = [...a, ...b, "e"]
3
4//flat = ["a", "b", "c", "d", "e"]

در مورد تخریب بیش از این‌ها می‌توان صحبت کرد، اما با توجه به مقتضای این مقاله به این حد اکتفا می‌کنیم.

کلاس‌ها

جاوا اسکریپت اینک از کلاس‌ها پشتیبانی می‌کند. طرز کار آن به صورت زیر است:

1class Rectangle {
2  constructor(height, width) {
3    this.height = height;
4    this.width = width;
5  }
6  // Getter
7  get area() {
8    return this.calcArea();
9  }
10  // Method
11  calcArea() {
12    return this.height * this.width;
13  }
14}
15
16const square = new Rectangle(10, 10);
17
18console.log(square.area); // 100

چنان که می‌بینید این ساختار مشابه زبان‌های شیء‌گرا است، اما نه به طور کامل. چنان که در مستندات موزیلا (+) بیان شده است این سیستم جدید اساساً یک «شمایل جدید» (syntactical sugar) بر مبنای وراثت مبتنی بر پروتوتایپ موجود جاوا اسکریپت است و در عمل موجب شیء‌گرا شدن جاوا اسکریپت نمی‌شود. با این حال امکان جالبی محسوب می‌شود. به علاوه، ساختار کلاس از متدها و مشخصه‌های استاتیک و کلاس‌های فرزند پشتیبانی می‌کند، اما نمی‌تواند از چند والد ارث‌بری کند.

تغییر به آرگومان‌های تابع

ES6 دو روش جدید برای نوشتن پارامترهای تابع معرفی کرده است. روش اول پارامترهای پیش‌فرض است که با انتساب یک مقدار به تعریف تابع تعیین می‌شوند:

1var func = (a, b = "default") => { }

اگر func را بدون تعیین دو آرگومان فراخوانی کنید، مقدار پیش‌فرض را در نظر می‌گیرد. ضمناً اینک تابع‌ها می‌توانند تعدادی نامتناهی از آرگومان‌ها در یک آرایه داشته باشند که ساختار پارامترهای تابع rest نامیده می‌شود:

1var func = (a, b, c, ...rest) => { }

پارامتر rest روی یک آرایه از «بقیه» پارامترهای تابع تعیین خواهد شد و یا در صورتی که چیزی بیش از پارامترهای با نام موجود نباشند، به صورت undefined خواهد بود.

Let و const

دستور let جایگزینی برای var محسوب می‌شود که به طور خاص دامنه بلوکی دارد. طرز کار متغیرها در جاوا اسکریپت به طور معمول به صورت زیر است:

1var x = 0; //global variable
2function someFunc() {
3  var y = 3; //local variable
4}

متغیر سراسری را می‌توان در تابع استفاده کرد، اما متغیر تابع لوکال را نمی‌توان خارج از تابع مورد استفاده قرار داد. بدین ترتیب می‌توانیم هر زمان نام متغیرها را به صورت i ،tmp ،x و count تعیین کنیم و به این ترتیب ترسی از سرزنش شدن نداشته باشیم. دامنه بلوکی طرز کار متفاوتی دارد و به ما امکان می‌دهد که متغیرها را با بلوک‌های تودرتو بازتعریف کنیم:

1var x = 0
2
3{
4  let x = 2
5    //x == 2
6}
7// x == 0 again

ساختار let اساساً امکان ویرایش محتوای x درون بلوک را فراهم می‌سازد، حال این بلوک چه یک تابع، چه بلوک catch، و یا یک بلوک صریح باشد. در زمانی که بلوک را ترک می‌کنیم نیز ریست می‌شود. این وضعیت به طور خاص در مواردی که می‌خواهیم از متغیرهای شمارشی count استفاده کنیم مفید واقع می‌شود، زیرا هر بلوک دامنه متفاوتی دارد. این دامنه از بلوک‌های فرزند ارث‌بری می‌کند، اما می‌تواند باز هم تودرتو تعریف شده و دوباره زنجیره‌سازی شود.

ساختار const نسبتاً سرراست است. با تعویض var با const متغیر به صورت فقط-خواندنی درمی‌آید. اگر تلاش کنید چیزی در این متغیر بنویسید، خطایی مانند زیر صادر می‌شود:

1Uncaught TypeError: Assignment to constant variable.

این خطا به ما اعلام می‌کند که تلاش کرده‌ایم کاری که نباید را انجام دهیم. این خطا هدفی به جز یادآوری به شما و جلوگیری از بروز برخی باگ‌ها در زمان کدنویسی ندارد.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۱۴ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
cloudsavvyit
نظر شما چیست؟

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