ES6 چیست و برنامه نویس های جاوا اسکریپت چه چیزهایی را باید بدانند؟
1396/09/08 16:44 , شایان مسلمی

ES6 چیست و برنامه نویس های جاوا اسکریپت چه چیزهایی را باید بدانند؟

ES6 ، نسخه ی ششم زبان برنامه نویسی ECMA Script است ، ECMA Script نام استاندارد جاوااسکریپت است .این نسخه به عنوان پیشرفتی برای زبان جاوااسکریپت شناخته میشود و ویژگی های زیادی به منظور توسعه ی آسانتر نرم افزارها در مقیاس بزرگ ارائه کرده است.

ECMA Script یا ES6 در ژوئن سال 2015 عرضه شد و بعدها به ECMA Script تغییر نام داد.بسیاری از مرورگرهای وب برخی از ویژگی های ES6 را ساپورت میکنند.اگرچه، با استفاده از برنامه ی Transpiler میتوانید کدهای ES5 را به ES6 تبدیل کنید.در این مبحث تغییراتی که ES6 برروی جاوااسکریپت اعمال کرده است را با هم بررسی میکنیم.

1)Constants ( عوامل ثابت)

در نهایت مفهوم این عوامل ثابت به جاوااسکریپت راه پیدا کرد! این ها مقادیری هستند که تنها یک بار مشخص میشوند(برای هر اسکوپ، اسکوپ در پایین نشان داده شده است). تعریف دوباره ی همان اسکوپ یک اررور پدید می آورد.

const JOE = 4.0

JOE= 3.5        

// results in: Uncaught TypeError: Assignment to constant variable.

میتوانید عوامل ثابت (constant) را هرجا که یک متغیر (var) استفاده شده باشد،به کار ببرید.

console.log("Value is: " + joe * 2)

// prints: 8

2.متغیرهای Block-Scoped و عملکردها

به قرن 21 خوش آمدی جاوااسکریپت! با ES6 ، متغیرهایی که از let (و عوامل ثابت بالا( استفاده میکنند، قوانین بلاک اسکوپ را درست همانند جاوا، C++ و غیره دنبال میکنند.

قبل از این بروزرسانی، متغیرهای جاوااسکریپت فانکشن اسکوپ بودند، به این معنی که زمانی که به یک اسکوپ جدید برای یک متغیر نیاز داشتید، باید با یک عملکرد (function) آن را اعلام میکردید.

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

{

  let x = "hello";

  {

    let x = "world";

    console.log("inner block, x = " + x);

  }

  console.log("outer block, x = " + x);

}

// prints

inner block, x = world

outer block, x = hello

شما میتوانید عوامل ثابت را در این بلاک ها دوباره تعریف کنید.

{

  let x = "hello";

  {

    const x = 4.0;

    console.log("inner block, x = " + x);

    try {

      x = 3.5

    } catch(err) {

      console.error("inner block: " + err);

    }

  }

  x = "world";

  console.log("outer block, x = " + x);

}

// prints

inner block, x = 4

inner block: TypeError: Assignment to constant variable.

outer block, x = world

3)Arrow Functions ( عملکردهای پیکانی)

ES6 ترکیبی جدید برای تعریف عملکردها با استفاده از یک پیکان ارائه میدهد.در مثال زیر، x عملکردی است که یک پارامتر به نام a را قبول میکند و مقدار افزایش اش را برگشت میدهد:

var x = a => a + 1;

x(4) // returns 5

با استفاده از این ترکیب،میتوانید استدلال ها را به راحتی تعریف کنید.

استفاده با یک forEach() :

[1, 2, 3, 4].forEach(a => console.log(a + " => " + a*a))

// prints

1 => 1

2 => 4

3 => 9

4 => 16

عملکردهایی که استدلالهای زیادی قبول میکنند را با قرار دادن آن ها در پرانتز، تعریف کنید:

[22, 98, 3, 44, 67].sort((a, b) => a - b)

// returns

[3, 22, 44, 67, 98]

 

4)Default Function Parameters (پارامترهای عملکردی پیش فرض)

پارامترهای عملکردی حالا میتوانند با مقادیر پیش فرض اعلام بشوند.به دنبال آن، x عملکردی در نظر گرفته میشود که دو پارامتر a و b را دارد. به پارامتر دوم یعنی b مقدار پیش فرض  1 داده شده است.

var x = (a, b = 1) => a * b

x(2)

// returns 2

x(2, 2)

// returns 4

برخلاف سایر زبان ها مثل C++ یا Python ، پارامترهایی که مقادیر پیش فرض دارند، ممکن است قبل از آن ها بدون پیش فرض ظاهر شوند. این عملکرد به عنوان یک بلاک با مقدار return در مثال نشان داده شده است:

var x = (a = 2, b) => { return a * b }

با این حال، استدلال ها از چپ به راست مطابقت داده شده اند.در مثال پایین، b مقدار تعریف نشده دارد حتی اگر a با یک مقدار پیش فرض اعلام بشود.این استدلال با a بیشتر  از b تطابق دارد.این عملکرد NaN را بازمیگرداند.

x(2)

// returns NaN

x(1, 3)

// returns 3

زمانی که شما به طور واضح undefined را به عنوان یک استدلال بازپس میدهید، مقدار پیش فرض در صورت وجود داشتن، استفاده خواهد شد.

x(undefined, 3)

// returns 6

5)Rest Function Parameters ( پرامترهای عملکردی رِست)

وقتی که یک عملکرد را درخواست میکنید، گاهی نیاز برای بازپس دادن تعداد دلخواه استدلال ها ،و پردازش آن ها حس میشود .این نیاز توسط ترکیب rest function parameters اداره میشود.این ترکیب راهی برای گرفتن سایر استدلال ها پس از استدلال های تعریفی فراهم میکند.این استدلال های اضافه در یک مجموعه جمع میشوند.

var x = function(a, b, ...args) { console.log("a = " + a + ", b = " + b + ", " + args.length + " args left"); }

x(2, 3)

// prints

a = 2, b = 3, 0 args left

x(2, 3, 4, 5)

// prints

a = 2, b = 3, 2 args left

6)String Templating (الگوبندی استرینگ)

String Templating به مقادیر درج شده و عباراتی در string ها که از ترکیبی مثل perl یا the shell استفاده میکنند، مربوط میشود.یک الگوی استرینگ در کاراکترهای بک تیک (`) جای میگیرد.با استفاده از ویرگول (‘) یا ویرگول دوتایی)"( استرینگ های نورمال مشخص میشوند.عباراتی که در الگو قرار میگیرند ${ } مشخص میشوند.مثال:

var name = "joe";

var x = `hello ${name}`

// returns "hello joe"

البته، شما میتوانید عبارت دلخواه را برای ارزیابی قرار بدهید.

// define an arrow function

var f = a => a * 4

 

// set a parameter value

var v = 5

 

// and evaluate the function within the string template

var x = `hello ${f(v)}`

// returns "hello 20"

ترکیب که برای تعریف کردن استرینگ ها به کار میرود، میتواند برای تعریف استرینگ های چند خطی نیز به کار برود.

 

 

var x = `hello world

next line`

// returns

hello world

next line

7)Object Properties( مشخصه های اشیاء)

ES6 ترکیبی ساده شده برای خلق اشیاء ارائه میکند.به مثال زیر دقت کنید:

var x = "hello world", y = 25

var a = { x, y }

// is equivalent to the ES5:

{x: x, y: y}

نام های مشخصه ی محاسبه شده دقیق هستند.با ES5 و نسخه های قبل تر، برای ایجاد یک مشخصه ی اشیاء باید این کار را انجام میدادید:

var x = "hello world", y = 25

var a = {x: x, y: y}

a["joe" + y] = 4

// a is now:

{x: "hello world", y: 25, joe25: 4}

حالا میتوانید با یک تعریف تمام این کارها را انجام دهید:

var a = {x, y, ["joe" + y]: 4}

// returns

{x: "hello world", y: 25, joe25: 4}

و البته ،برای تعریف روش ها، میتوانید با یک نام آن را تعریف کنید:

var a = {x, y, ["joe" + y]: 4, foo(v) { return v + 4 }}

a.foo(2)

// returns

6

8)Formal Class Definition syntax ( ترکیب تعریفی کلاس رسمی)

تعریف کلاس

و بالاخره،جاوااسکریپت یک ترکیب تعریفی کلاس رسمی دارد.این ترکیب برای بهبود وضوح کد کاربرد دارد. به این معنی که این ترکیب یک مدل اشیاء یا هرچیز فانتزی دیگری را اضافه نمیکند .

class Circle {

  constructor(radius) {

    this.radius = radius

  }

}

// use it

var c = new Circle(4)

// returns: Circle {radius: 4}

اعلام کردن روش ها

اعلام روش ها نیز کاملاً ساده است.

class Circle {

  constructor(radius) {

    this.radius = radius

  }

  computeArea() { return Math.PI * this.radius * this.radius }

}

var c = new Circle(4)

c.computeArea()

// returns: 50.26548245743669

 

روش دهنده و گیرنده (Getters and Setters)

با یک بروزرسانی ما این متد را هم نهایتاً در اختیار داریم.بگذارید کلاسCircle را با مشخصه ی area دوباره تعریف کنیم.

class Circle {

  constructor(radius) {

    this.radius = radius

  }

  get area() { return Math.PI * this.radius * this.radius }

}

var c = new Circle(4)

// returns: Circle {radius: 4}

c.area

// returns: 50.26548245743669

 

بیایید یک دهنده اضافه کنیم.برای تعریف radius به عنوان یک مشخصه با قابلیت دهندگی، باید _radius را دوباره تعریف کنیم.اگرچه ما با اررور overflow مواجه شدیم.

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

class Circle {

  constructor(radius) {

    this._radius = radius

  }

  get area() { return Math.PI * this._radius * this._radius }

  set radius(r) { this._radius = r }

}

var c = new Circle(4)

// returns: Circle {_radius: 4}

c.area

// returns: 50.26548245743669

c.radius = 6

c.area

// returns: 113.09733552923255

میراث

برای تعریف کلاس ها با استفاده از کلیدواژه ی class، میتوانید کلیدواژه ی extends را برای به ارث بردن از سوپر کلاس ها به کار ببرید.به مثال زیر توجه کنید:

class Ellipse {

  constructor(width, height) {

    this._width = width;

    this._height = height;

  }

  get area() { return Math.PI * this._width * this._height; }

  set width(w) { this._width = w; }

  set height(h) { this._height = h; }

}

 

class Circle extends Ellipse {

  constructor(radius) {

    super(radius, radius);

  }

  set radius(r) { super.width = r; super.height = r; }

}

 

// create a circle

var c = new Circle(4)

// returns: Circle {_width: 4, _height: 4}

c.radius = 2

// c is now: Circle {_width: 2, _height: 2}

c.area

// returns: 12.566370614359172

c.radius = 5

c.area

// returns: 78.53981633974483

 

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات