آموزش کامل جاوا اسکریپت Es7 (اکما اسکریپت 2016)

مقدمه

قبلا تو مقاله ی ” ورژن بندی اکما اسکریپت (جاوا اسکریپت) ” از مجله آموزشی ویکس سون، امکانات و فیچرهایی که تو Es7 به جاوا اسکریپت اضافه شده رو معرفی کردیم. در ادامه به جزییات این قابلیت ها و آموزششون میپردازیم.

 

امکانات و قابلیت های جاوا اسکریپت Es7 (2016)

1. عملگر توان (**) یا Exponentiation Operator
2. عملگر نسبت دهی توان (=**) یا Exponentiation Assignment Operator
3. متد Array.prototype.includes در آرایه ها
4. ارائه کلمات کلیدی async و await

 

آموزش کامل جاوا اسکریپت Es7 (2016)

پیشنیاز این آموزش :

1. آشنایی با مفاهیم پایه جاوا اسکریپت
2. آشنایی با قابلیت های جدید جاوا اسکریپت تا اکما اسکریپت 2015 یا Es6

 

1) عملگر توان (**) یا Exponentiation Operator در جاوا اسکریپت Es7

عملگر توان، دقیقا همون کاری رو انجام میده که قبلا متد Math.pow برامون انجام میداد و فقط نوشتنش ساده تر شده و به سبک پایتون و پی اچ پی با 2 تا علامت ستاره نوشته میشه. مثلا تو کد زیر خروجی های یکسانی داریم :

console.log(5 ** 2); // output : 15

console.log(Math.pow(5, 2)) // output : 15

اما اگه یه عدد رو دوبار پشت سر هم به توان برسونیم چی ؟ اگه کدهای زیر رو تو کنسول نمایش بدیم خروجی هایی که جلوشون نوشتیم نمایش داده میشن :

2 ** 3 ** 2 // 512

2 ** (3 ** 2) // 512

(2 ** 3) ** 2 // 64

همونطور که میبینید a ** b ** c معادل a ** (b ** c) هستش و مقدار برابر دارن (اما متفاوت با حالت سوم هستن)

رفرنس ها : MDN / W3

 

2) عملگر نسبت دهی توان (=**) یا Exponentiation Assignment Operator در جاوا اسکریپت Es7

این عملگر ، عدد قبل از = رو به توان عدد بعدش میرسونه و تو خودش میریزه، ینی x **= y برابره با x = x ** y ، مثلا :

let a = 3;

console.log(a **= 2); // output: 9

console.log(a **= 0); // output: 1

  نکته 1 : اینجا فقط میشه متغیر نوشت و اگه به جای a تو کد بالا یه عدد بنویسید ارور ایجاد میشه، چرا ؟ چون قراره نسبت دهی یا Assignment انجام بشه و هر جایی که Assignment داشته باشیم باید متغیر داشته باشیم (نه عدد ثابت)، پس اگه کد زیر رو بنویسیم، تو کنسول خطا میبینیم :

console.log(2 **= 2); // output: Error

  نکته 2 : واضحه که مقداری که بعد از = وارد میکنیم باید حتما عدد باشه و اگه مثلا استرینگ وارد کنیم NaN برمیگردونه :

console.log(2 **= "wixseven"); // output: NaN

رفرنس ها : MDN / W3

 

3) متد Array.prototype.includes در آرایه های جاوا اسکریپت Es7

متد includes یه مقدار رو به عنوان ورودی میگیره و چک میکنه که آیا اون مقدار توی آرایه وجود داره یا نه، اگه وجود داشت true برمیگردونه و اگه وجود نداشت false برمیگردونه (پس خروجیش بولین هست). مثلا :

const array1 = [1, 2, 3];

console.log(array1.includes(2)); // output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat')); // output: true

console.log(pets.includes('at')); // output: false

console.log(pets.includes('Cat')); // output: false

  نکته 1 : همونطور که تو کد بالا دیدین، عبارتی که سرچ میکنیم هم باید کامل نوشته بشه (نمیشه بخشی از عبارت رو بنویسیم) و هم اینکه بزرگی و کوچیکی حروف رو رعایت کنیم چون includes به بزرگی و کوچیکی حروف حساسه نکته 2 : این متد یه ورودی دوم اختیاری هم میگیره و اونم ایندکسی هست که میخوایم جستجو رو از اون ایندکس شروع کنه (بصورت پیشفرض 0 هست). پس فرم کامل این متد به شکل زیر هست :

includes(element, index)

1. 1. element : المنتی که جستجو میکنیم
   2. index : ایندکسی که میخوایم جستجو از اونجا شروع بشه

نکته 3 : حالت های خاص (پیچیده تر) :

1. 1. اگه index < 0 : مقدار index + array.length به عنوان ایندکس نهایی قرار میگیره و سرچ از این ایندکس انجام میشه
   2. اگه index < – array.length : مقدار 0 به عنوان ایندکس نهایی قرار میگیره و کل آرایه جستجو میشه
   3. اگه index > array.length : آرایه قابل جستجو نیست و نتیجه در هر صورت false میشه

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

[1, 2, 3].includes(3, 3); // false

[1, 2, 3].includes(3, -1); // true

["a", "b", "c"].includes("a", -100); // true

["a", "b", "c"].includes("a", 100); // false

[1, 2, NaN].includes(NaN); // true

["1", "2", "3"].includes(3); // false

  نکته 4 : اگه با این متد، مقدار undifined رو توی آرایه های پراکنده (sparse array) سرچ کنیم، true رو برمیگردونه :

[1, , 3].includes(undefined); // true

  نکته 5 : از این متد میشه برای سرچ توی شبه آرایه ها (آبجکت های قابل پیمایش) هم استفاده کرد. برای اینکار باید از دستور زیر استفاده کنیم :

Array.prototype.includes.call(arrayLike, value);

1. arrayLike : اسم شبه آرایه ای که میخوایم توش سرچ کنیم
2. value : مقداری که دنبالش هستیم

کد زیر رو ببینید :

const arrayLike = {
length: 3,
0: 2,
1: 3,
2: 4,
};

console.log(Array.prototype.includes.call(arrayLike, 2)); // output: true

console.log(Array.prototype.includes.call(arrayLike, 1)); // output: false

رفرنس ها : MDN / W3

 

4) ارائه کلمات کلیدی async و await در جاوا اسکریپت Es7

تو این ورژن کلمات کلیدی async و await به جاوا اسکریپت اضافه شد و بعدا تو ورژن Es8 که سال 2017 ارائه شد، قابلیت async-await برای پردازش های ناهمگام معرفی شد که تو مقاله مربوط به خودش بهش میپردازیم. در واقع اینجا فقط آماده سازی برای این قابلیت انجام شد.

 

جمع بندی

خب همونطور که دیدید، قابلیت های جدیدی تو این ورژن به جاوا اسکریپت اضافه شد که البته در مقایسه با 2 ورژن قبل از خودش، یعنی Es5 و Es6 تغییر بزرگی به حساب نمیاد، اما به بهبود این زبان کمک کرده، خصوصا متد includes برای آرایه ها که میشه گفت مهمترین فیچر ارائه شده تو این ورژن بود. اگه ایرادی تو آموزش دیدین یا سوالی داشتین خوشحال میشیم تو قسمت نظرات مطرح کنید. پیروز باشید.