آموزش جاوا اسکریپت ES6

در بخش اول آموزش جاوا اسکریپت ES6 بعضی از قابلیت های نسخه جدید را بررسی کردیم. در ادامه قصد داریم کلاس ها, ماژول و چند مبحث باقی مانده دیگر را یاد بگیریم.

کلاس ها

در ECMAScript 5 قبل تر, کلاس ها هرگر در جاوا اسکریپت وجود نداشتند. کلاس ها در جاوا اسکریپت ES6 که شبیه کلاس های در زبان های شی گرای دیگر مثل جاوا, PHP و .. بود, معرفی شدند.

به هر حال, آنها دقیقا مثل کلاس های ES6 کار نمی کنند. کلاس های ES6 ساخت آبجکت ها, پیاده سازی ارث بری با کلمه کلیدی extends و استفاده مجدد از کدها را آسان تر کرده است.

در ES6 می توانید یک کلاس را با کلمه کلیدی class به همراه نام کلاس تعریف کنید. قرارداد نوشتن نام کلاس ها بصورت TitleCase است (حروف اول هر کلمه بصورت بزرگ)

class Rectangle {
    // Class constructor
    constructor(length, width) {
        this.length = length;
        this.width = width;
    }
    
    // Class method
    getArea() {
        return this.length * this.width;
    }
}

// Square class inherits from the Rectangle class
class Square extends Rectangle {
    // Child class constructor
    constructor(length) {
        // Call parent's constructor
        super(length, length);
    }
    
    // Child class method
    getPerimeter() {
        return 2 * (this.length + this.width);
    }
}

let rectangle = new Rectangle(5, 10);
alert(rectangle.getArea()); // 50

let square = new Square(5);
alert(square.getArea()); // 25
alert(square.getPerimeter()); // 20

alert(square instanceof Square); // true
alert(square instanceof Rectangle); // true
alert(rectangle instanceof Square); // false

class Rectangle {

// Class constructor

constructor(length, width) {

this.length = length;

this.width = width;

}

// Class method

getArea() {

return this.length * this.width;

}

// Square class inherits from the Rectangle class

class Square extends Rectangle {

// Child class constructor

constructor(length) {

// Call parent's constructor

super(length, length);

}

// Child class method

getPerimeter() {

return 2 * (this.length + this.width);

}

let rectangle = new Rectangle(5, 10);

alert(rectangle.getArea()); // 50

let square = new Square(5);

alert(square.getArea()); // 25

alert(square.getPerimeter()); // 20

alert(square instanceof Square); // true

alert(square instanceof Rectangle); // true

alert(rectangle instanceof Square); // false

در مثال بالا, کلاس Square با کلمه کلیدی extends ویژگی و متدهای کلاس Rectangle را به ارث می برد. کلاس هایی که از دیگر کلاس ها ارث بری می کنند به نام کلاس های فرزند شناخته می شوند.

همچنین, شما باید متد super() را در کلاس فرزند قبل از دسترسی به this صدا بزنید. برای مثال, اگر super() را حذف کنید و متد getArea() را روی شیٔ square صدا بزنید, از آنجا که متد getArea() نیاز به دسترسی this را دارد پس با خطا مواجه می شوید.

نکته: برخلاف تعریف تابع, کلاس ها قابل hoist یا همان بالا رفتن در محدوده (scope) را ندارند. بنابراین همانند let و const و برخلاف توابع و متغیرهای تعریف شده با var , شما نیاز است قبل از استفاده از کلاس ها آن را تعریف کنید وگرنه خطای RefrenceError رخ می دهد.

ماژول ها

قبل از ES6 هیچ پشتیبانی از ماژول ها در جاوا اسکریپت وجود نداشت. هر چیزی داخل اپلیکیشن جاوا اسکریپت, برای مثال متغیرها بین فایل های مختلف, یک محدوده scope یکسان را به اشتراک می گذارند.

جاوا اسکریپت ES6 ماژول بر اساس فایل را معرفی کرده است که هر ماژول نشانگر یک فایل .js جدا است.

حالا می توانید با دستورات export یا import در ماژول, متغیرها, توابع, کلاس یا هر چیز دیگری را از ماژول یا فایل ها ایمپورت یا اکسپورت کنید.

حالا بیاید یک ماژول با فایل main.js بسازیم و کدهای زیر را داخل آن قرار بدیم:

let greet = "Hello World!";
const PI = 3.14; 

function multiplyNumbers(a, b) {
    return a * b;
}

// Exporting variables and functions
export { greet, PI, multiplyNumbers };

let greet = "Hello World!";

const PI = 3.14;

function multiplyNumbers(a, b) {

return a * b;

}

// Exporting variables and functions

export { greet, PI, multiplyNumbers };

حالا یک فایل دیگر به نام app.js با کدهای زیر ایجاد می کنیم:

import { greet, PI, multiplyNumbers } from './main.js';

alert(greet); // Hello World!
alert(PI); // 3.14
alert(multiplyNumbers(6, 15)); // 90

import { greet, PI, multiplyNumbers } from './main.js';

alert(greet); // Hello World!

alert(PI); // 3.14

alert(multiplyNumbers(6, 15)); // 90

درنهایت یک فایل test.html ایجاد و کدهای زیر را داخل آن قرار می دهیم و فایل HTML داخل مرورگر با پروتکل HTTP یا لوکال هاست باز می کنیم.

همچنین به type=”module” در تگ script دقت کنید.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ES6 Module Demo</title>
</head>
<body>
    <script type="module" src="app.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>ES6 Module Demo</title>

</head>

<body>

</body>

</html>

پارامترهای Rest

جاوا اسکریپت ES6 پارامترهای rest را معرفی کرده است که به ما اجازه پاس دادن یک عدد اختیاری از پارامتر را به تابع در قالب یک آرایه می دهد.

این قابلیت برای موقعیت هایی که قصد پاس دادن پارامترها را به یک تابع دارید اما از اینکه چه تعداد را باید پاس بدید اطلاع ندارید, مفید است.

یک پارامتر rest با افزودن پیشوند اپراتور rest که ... (سه نقطه) است به همراه نام آن مشخص می شود.

پارامتر rest می تواند تنها آخرین در لیست پارامتر ها باشد یا تنها پارامتر rest باشد.

function sortNames(...names) {
    return names.sort();
}

alert(sortNames("Sarah", "Harry", "Peter")); // Harry,Peter,Sarah
alert(sortNames("Tony", "Ben", "Rick", "Jos")); // John,Jos,Rick,Tony

function sortNames(...names) {

return names.sort();

}

alert(sortNames("Sarah", "Harry", "Peter")); // Harry,Peter,Sarah

alert(sortNames("Tony", "Ben", "Rick", "Jos")); // John,Jos,Rick,Tony

زمانی که پارامتر rest تنها پارامتر یک تابع باشد, همه آرگومان های پاس داده شده به تابع را دریافت می کند.

function myFunction(a, b, ...args) {
    return args;
}

alert(myFunction(1, 2, 3, 4, 5)); // 3,4,5
alert(myFunction(-7, 5, 0, -2, 4.5, 1, 3)); // 0,-2,4.5,1,3

function myFunction(a, b, ...args) {

return args;

}

alert(myFunction(1, 2, 3, 4, 5)); // 3,4,5

alert(myFunction(-7, 5, 0, -2, 4.5, 1, 3)); // 0,-2,4.5,1,3

نکته: اصطلاح پارامترهای rest را با REST (REpresentational State Transfer) اشتباه نگیرید. چرا که هیچ ارتباطی با وب سرویس های RESTful ندارد.

اپراتور Spread

اپراتور Spread که با ... مشخص می شود دقیقا برعکس اپراتور rest است.

اپراتور Spread یک آرایه را از هم جدا و مقادیر آن را به تابع مشخص شده پاس می دهد :

function addNumbers(a, b, c) {
    return a + b + c;
}

let numbers = [5, 12, 8];

// ES5 way of passing array as an argument of a function
alert(addNumbers.apply(null, numbers)); // 25

// ES6 spread operator
alert(addNumbers(...numbers)); // 25

function addNumbers(a, b, c) {

return a + b + c;

}

let numbers = [5, 12, 8];

// ES5 way of passing array as an argument of a function

alert(addNumbers.apply(null, numbers)); // 25

// ES6 spread operator

alert(addNumbers(...numbers)); // 25

اپراتور spread می تواند برای قرار دادن المان های یک آرایه به آرایه دیگر بدون استفاده از متدهای push(), unshift() concat() و غیره را می دهد.

let pets = ["Cat", "Dog", "Parrot"];
let bugs = ["Ant", "Bee"];

// Creating an array by inserting elements from other arrays
let animals = [...pets, "Tiger", "Wolf", "Zebra", ...bugs];

alert(animals); // Cat,Dog,Parrot,Tiger,Wolf,Zebra,Ant,Bee

let pets = ["Cat", "Dog", "Parrot"];

let bugs = ["Ant", "Bee"];

// Creating an array by inserting elements from other arrays

let animals = [...pets, "Tiger", "Wolf", "Zebra", ...bugs];

alert(animals); // Cat,Dog,Parrot,Tiger,Wolf,Zebra,Ant,Bee

Destructuring Assignment

Destructuring Assignment یک اصطلاح است که به ما امکان آسان برای استخراج مقادیر یک آرایه, خصوصیات شیٔ, به داخل متغیرها را با سینتکس کوتاه تر را می دهد.

Destructuring Assignment آرایه ها

قبل از ES6 برای دریافت مقادیر تکی یک آرایه باید بصورت زیر عمل می کردیم :

// ES5 syntax
var fruits = ["Apple", "Banana"];

var a = fruits[0];
var b = fruits[1];
alert(a); // Apple
alert(b); // Banana

// ES5 syntax

var fruits = ["Apple", "Banana"];

var a = fruits[0];

var b = fruits[1];

alert(a); // Apple

alert(b); // Banana

در جاوا اسکریپت ES6 می توانید این کار را در یک خط به سادگی زیر انجام بدید :

// ES6 syntax
let fruits = ["Apple", "Banana"];

let [a, b] = fruits; // Array destructuring assignment

alert(a); // Apple
alert(b); // Banana

// ES6 syntax

let fruits = ["Apple", "Banana"];

let [a, b] = fruits; // Array destructuring assignment

alert(a); // Apple

alert(b); // Banana

همچنین می توانید از اپراتور rest نیز به اینصورت بهره ببرید :

// ES6 syntax
let fruits = ["Apple", "Banana", "Mango"];

let [a, ...r] = fruits;

alert(a); // Apple
alert(r); // Banana,Mango
alert(Array.isArray(r)); // true

// ES6 syntax

let fruits = ["Apple", "Banana", "Mango"];

let [a, ...r] = fruits;

alert(a); // Apple

alert(r); // Banana,Mango

alert(Array.isArray(r)); // true

Destructuring Assignment آبجکت ها

در ES5 برای استخراج مقادیر خصوصیات نیاز بود چیزی مثل این را بنویسیم :

// ES5 syntax
var person = {name: "Peter", age: 28};

var name = person.name;
var age = person.age;

alert(name); // Peter
alert(age); // 28

// ES5 syntax

var person = {name: "Peter", age: 28};

var name = person.name;

var age = person.age;

alert(name); // Peter

alert(age); // 28

اما در جاوا اسکریپت ES6 می توانیم مقادیر خصوصیات شیٔ ها را بصوت زیر دریافت/اختصاص بدیم :

// ES6 syntax
let person = {name: "Peter", age: 28};

let {name, age} = person; // Object destructuring assignment

alert(name); // Peter
alert(age); // 28

// ES6 syntax

let person = {name: "Peter", age: 28};

let {name, age} = person; // Object destructuring assignment

alert(name); // Peter

alert(age); // 28

بیشتر ویژگی هایی که اینجا معرفی شدند در همه مرورگرهای معروف پشتیبانی می شود.

ابزار رایگانی به نام Babel برای تبدیل کدهای ES6 به ES5 به منظور همگام سازی کدها در مرورگرها وجود دارد که پیشنهاد می شود از آن استفاده نکنید تا به ارور های نامربوط برنخورید.

امیدواریم از آموزش جاوا اسکریپت ES6 نهایت استفاده را برده باشد.

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

موفق باشید.

لغو پاسخ

حسین ۲۸ مهر ۱۳۹۸

سلام استاد یک سوال داشتم درمورد جاوااسکریپت. برای مثال یک دکمه داریم که بعد از کلیک روی ان تایپ میکنه سلام. من میخوام بعد از کلیک ونوشتن سلام رو نمایش بده وبلافاصله سلام رو حذف کنه و بنویسه خدا حافظ از چه دستوری باید استفاده کنم لطفا راهنماییم کنید متشکرم

پاسخ

حسن شفیعی ۲۸ مهر ۱۳۹۸

سلام.
در آموزش افکت تایپ متن یا تایپ خودکار متننحوه ساخت همچنین موردی رو آموزش دادیم.
موفق باشید.

پاسخ

آموزش جاوا اسکریپت ES6 – بخش دوم

کلاس ها

ماژول ها

پارامترهای Rest

اپراتور Spread

Destructuring Assignment

Destructuring Assignment آرایه ها

Destructuring Assignment آبجکت ها

آموزش جاوا اسکریپت ES6 – بخش اول

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه