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

پیمان باقری

برنامه نویس و متخصص وب

مقدمه

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

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

قابلیت تکرار ناهمگام (Asynchronous Iteration) و حلقه for await of
متد Promise.finally در پرامیس
قابلیت Rest Parameters و Spread Syntax (spread operator) در آبجکت ها
چند قابلیت جدید در رجکس (RegExp)

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

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

آشنایی با مفاهیم پایه جاوا اسکریپت
آشنایی با قابلیت های جدید جاوا اسکریپت تا اکما اسکریپت 2017 یا Es8

1) قابلیت تکرار ناهمگام (Asynchronous Iteration) و حلقه for await of در جاوا اسکریپت Es9

سال 2018 سالی بود که قابلیت تکرار ناهمگام به جاوا اسکریپت اضافه شد. این قابلیت به ما این امکان رو میده که از کلمه کلیدی await تو حلقه ی for-of استفاده کنیم و حلقه ی معمولی رو به حلقه ی ناهمگام (async loop) تبدیل کنیم. سینتکسش به این صورته :

  for await (let VAR of ITER) {
    // codes
  }

مثلا کد زیر یه حلقه معمولی (همگام) روی یه آبجکت قابل پیشمایش رو نمایش میده : (مثالش یکم سخته، اگه تمرکز ندارین یا Iteration رو خوب بلد نیستین، بعدا مطالعه کنید)

let range = {
    from: 1,
    to: 5,
  
    [Symbol.iterator]() { 
      return {
        current: this.from,
        last: this.to,
  
        next() { 
          if (this.current <= this.last) {
            return { done: false, value: this.current++ };
          } else {
            return { done: true };
          }
        }
      };
    }
  };
  
  for(let value of range) {
    console.log(value); // output: 1. 2, 3, 4, 5
  }

توضیح کد :

- همونطور که از ورژن های قبلی جاوا اسکریپت میدونیم، برای اینکه یه آبجکت رو مثل آرایه ها قابل پیشمایش کنیم و بتونیم از حلقه for-of استفاده کنیم، میتونیم از متدهای Symbol.iterator و next استفاده کنیم
- Symbol.iterator : فقط یکبار موقع شروع حلقه فراخوانی میشه، مقدار from آبجکت رو به عنوان current ذخیره میکنه و مقدار to آبجکت رو به عنوان last
- next : با هر بار تکرار شدن حلقه فراخوانی میشه، چک میکنه اگه مقدار current از last کوچیکتر بود value رو یکی بیشتر میکنه و این کار تا جایی که current با last برابر بشه ادامه پیدا میکنه
- به این شکل آبجکت range قابل پیشمایش میشه و میشه از حلقه for-of استفاده کرد و مقادیر 1 تا 5 رو به ترتیب تو کنسول نمایش داد

حالا اگه بخوایم همین کد رو بصورت ناهمگام (async) بنویسیم، داریم :

let range = {
    from: 1,
    to: 5,
  
    [Symbol.asyncIterator]() {
      return {
        current: this.from,
        last: this.to,
  
        async next() {
  
          await new Promise(resolve => setTimeout(resolve, 1000));
  
          if (this.current <= this.last) {
            return { done: false, value: this.current++ };
          } else {
            return { done: true };
          }
        }
      };
    }
  };
  
  (async () => {
  
    for await (let value of range) {
      alert(value); // 1, 2, 3, 4, 5
    }
  
  })()

همونطور که میبینید تفاوتش با حالت قبل اینه که :

- به جای Symbol.iterator از Symbol.asyncIterator استفاده کردیم
- تو این حالت متد next یه پرامیس رو برامون برمیگردونه که اگه fullfield بشه میره سراغ عدد بعدی. اینجا چون میخوایم از await استفاده کنیم (منتظر نتیجه پرامیس بمونیم) باید قبل next از async استفاده کنیم (وگرنه در حالت عادی متد نکست async نیست)
- در نهایت هم به جای for-of از for await of استفاده کردیم و اینجا هم چون await داریم، حلقه رو در قالب یه ارو فانکشن async تعریف کردیم

نکته : به جای این روش میتونیم از توابع Generator هم استفاده کنیم که برای جلوگیری از طولانی شدن مقاله این مورد رو به شما میسپاریم (میتونید رفرنس های زیر رو مطالعه کنید)

رفرنس : MDN / jsinfo

2) متد Promise.finally در پرامیس ها های جاوا اسکریپت Es9

تا قبل از این ورژن، ما برای پرامیس ها 2 متد داشتیم :

1. then : در صورتی که پرامیس fullfield میشد فراخوانی میشد
2. catch : در صورتی که پرامیس reject میشد فراخوانی میشد

اما تو این ورژن، متد finally هم به پرامیس ها اضافه شده و وظیفه ش اینه که در هر صورتی دستوری که مینویسیم تحت هر شرایطی (چه پرامیس fullfield بشه چه reject) اجرا بشه. این کد میتونه یه پردازش خاص یا پاکسازی باشه. همچنین این قابلیت رو بهمون میده که از نوشتن کد تکراری داخل then و catch خودداری کنیم و کدهای تکراری رو فقط یکبار داخل finally بنویسیم.

پس فرم کاملتر پرامیس تو جاوا اسکریپت Es9 به این صورته :

promise
    .then(result => { })
    .catch(error => { })
    .finally(() => { })

مثلا تو کد زیر یه درخواست fetch فرضی رو به یه API ارسال میکنیم و پاسخ رو که به صورت پرامیس هست با then و catch مدیریت میکنیم و تو هر دو متد نهایتا پاکسازی رو انجام میدیم :

fetch(request)
    .then(response => {
        // process the response
        // clean up the resources
    })
    .catch(error => {
        // handle the error
        // clean up the resources
    });

حالا اگه بخوایم از این تکرار کد عملیات پاکسازی جلوگیری بشه، میتونیم از finally به صورت زیر استفاده کنیم :

fetch(request)
    .then(response => {
        // process the result
    })
    .catch(error => {
        // handle the error
    })
    .finally(() => {
        // clean up the resources
    });

رفرنس : MDN / jstutorials

3) قابلیت Rest Parameter و Spread Syntax (spread operator) در آبجکت های جاوا اسکریپت Es9

ما { … } رو از Es6 میشناسیم و با کاربردهاش تو توابع و آرایه ها آشنا هستیم. ازش هم به عنوان Spread Syntax / Operator استفاده کردیم و هم Rest Parameter. اتفاقی که تو Es9 افتاده اینه که این قابلیت به آبجکت ها هم اضافه شده (جلوتر بهش میپردازیم)

این دو قابلیت ظاهرا شبیه هم هستن و سینتکس مشابه دارن ولی ماهیتا متفاوت هستن و به نوعی برعکس هم عمل میکنن:

1. Spread Syntax : همونطور که از اسمش مشخصه کارش گسترش دادن و پخش کردنه (برای کپی کردن یا دقیقتر Clone کردن آرایه ازش استفاده میکردیم)
2. Rest Parameter : به نوعی برعکس اسپرد عمل میکنه و مقادیر (مقادیر باقی مونده) رو کنار هم جمع میکنه (تو Destructuring آرایه ها و پارامتر توابع ازش استفاده میکردیم)

هر دو قابلیت قبلا توی آرایه ها قابل استفاده بودن. به عنوان مثال :

const array = [1, 2, 3, 4, 5];

// Spread Syntax
const arrayClone = [...array];
console.log(arrayClone); // output: [1, 2, 3, 4, 5]

// Rest Parameter
const [firstElem, secondElem, ...rest] = array;
console.log(firstElem); // output: 1
console.log(secondElem); // output: 2
console.log(rest); // output: [3, 4, 5]

اما تو Es9 به آبجکت ها هم اضافه شدن و از این ورژن به بعد میتونیم از Spread Syntax برای کپی یا دقیقتر Clone کردن آبجکت ها و از Rest Parameter برای Destructuring آبجکت ها استفاده کنیم. به عنوان مثال :

const object = {
  site: "WiX7.COM",
  lang: "JavaScript",
  Version: "Es9",
  year: "2018",
};

// Spread Syntax
const objectClone = { ...object };
console.log(objectClone); // output: {site: 'WiX7.COM', lang: 'JavaScript', Version: 'Es9', year: '2018'}

// Rest Parameter
const { site, lang, ...rest } = object;
console.log(site); // output: WiX7.COM
console.log(lang); // output: JavaScript
console.log(rest); // output: {Version: 'Es9', year: '2018'}

رفرنس : V8 / jsinfo

4) چند قابلیت جدید در رجکس (RegExp) در جاوا اسکریپت Es9

(در حال تکمیل)

قابلیت های جدید رجکس (Regular Expression) :

Unicode Property Escapes (\p{…})
Lookbehind Assertions (?<= ) (?<! )
Named Capture Groups
s (dotAll) Flag

رفرنس : medium

جمع بندی

شاید تغییرات این ورژن نسبت به ورژن قبلی جاوا اسکریپت کمتر باشه اما قابلیت های مهمی هستن که جای خالیشون تو جاوا اسکریپت حس میشد. خصوصا قابلیت Rest و Spread که قبلا تو آرایه ها وجود داشت ولی آبجکت ها ازش بی بهره بودن. همچنین رجکس که مدتها بود آپدیتی ازش تو جاوا اسکریپت ندیده بودیم، تو این ورژن آپدیت شد که اتفاق خوبی بود. اگه ایرادی تو آموزش دیدین یا سوالی داشتین خوشحال میشیم تو قسمت نظرات مطرح کنید. پیروز باشید.

WiX/mag

ویکس مگ / مجله آموزشی ویکس سِوِن