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

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

ECMAScript 6 یا جاوا اسکریپت ES6 چیست ؟

ECMAScript 2015 (اکما اسکریپت) یا همان ES6 ششمین و بزرگترین ویرایش استاندارد ECMAScript است.

جاوا اسکریپت ES6 تغییرات قابل توجهی را به زبان جاوا اسکریپت اضافه کرد. بعضی از این قابلیت ها مثل متغیرهای محدوده بلاک (block-scoped), حلقه جدید برای آرایه و آبجکت ها, قالب چندخطی و خیلی موارد دیگر که باعث آسان و جالب تر شدن جاوا اسکریپت شده است.

در این بخش قصد داریم بعضی از قابلیت های جاوا اسکریپت ES6 را بررسی کنیم.

کلمه کلیدی let

جاوا اسکریپت ES6 کلمه کلیدی let را برای تعریف متغیر معرفی کرده است. قبل از ES6 تنها راه برای تعریف متغیر در جاوا اسکریپت کلمه کلیدی var بود. حالا تفاوت بین آنها چیست؟

دو تفاوت اساسی بین let و var وجود دارد. متغیرهای تعریف شده با var در محدوده توابع هستند و در داخل محدوده (scope) خود hoist می شوند به این معنا که همه جا قابل دسترس هستند

درحالی که متغیرهای تعریف شده با let داخل فقط بلاک {} قابل دسترس هستند و امکان hoist شدن از محدوده خود را ندارند مثلا داخل یک حلقه قابل دسترس است و نه خارج از آن !

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

// ES6 syntax
for(let i = 0; i < 5; i++) {
    console.log(i); // 0,1,2,3,4
}
console.log(i); // undefined


// ES5 syntax
for(var i = 0; i < 5; i++) {
    console.log(i); // 0,1,2,3,4
}
console.log(i); // 5

// ES6 syntax

for(let i = 0; i < 5; i++) {

console.log(i); // 0,1,2,3,4

}

console.log(i); // undefined

// ES5 syntax

for(var i = 0; i < 5; i++) {

console.log(i); // 0,1,2,3,4

}

console.log(i); // 5

همانطور که در مثال بالا دیدید, متغیر i در اولین بلاک خارج از محدوده حلقه for قابل دسترس نیست. که به ما این امکان را می دهد تا بتوانیم همان متغیر را به دفعات زیاد استفاده کنیم که باعث می شود تعریف متغیر کمتر و کدهای تمیزتری داشته باشیم.

کلمه کلیدی const

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

همچنین مانند let فقط در محدود بلاک {} قابل دسترس هستند.

const PI = 3.14;
console.log(PI); // 3.14

PI = 10; // error

const PI = 3.14;

console.log(PI); // 3.14

PI = 10; // error

به هر حال شما هنوز می توانید خصوصیات آبجکت یا المان های آرایه را تغییر بدید.

// Changing object property value
const PERSON = {name: "Peter", age: 28};
console.log(PERSON.age); // 28
PERSON.age = 30;
console.log(PERSON.age); // 30

// Changing array element
const COLORS = ["red", "green", "blue"];
console.log(COLORS[0]); // red
COLORS[0] = "yellow";
console.log(COLORS[0]); // yellow

// Changing object property value

const PERSON = {name: "Peter", age: 28};

console.log(PERSON.age); // 28

PERSON.age = 30;

console.log(PERSON.age); // 30

// Changing array element

const COLORS = ["red", "green", "blue"];

console.log(COLORS[0]); // red

COLORS[0] = "yellow";

console.log(COLORS[0]); // yellow

حلقه for…of

حلقه جدید for..of در جاوا اسکریپت ES6 به شما اجازه تکرار روی آرایه ها یا دیگر آبجکت های قابل تکرار می دهند. همچنین کد داخل این حلقه در هر بار تکرار المان آبجکت اجرا می شود.

// Iterating over array
let letters = ["a", "b", "c", "d", "e", "f"];

for(let letter of letters) {
    console.log(letter); // a,b,c,d,e,f
}

// Iterating over string
let greet = "Hello World!";

for(let character of greet) {
    console.log(character); // H,e,l,l,o, ,W,o,r,l,d,!
}

// Iterating over array

let letters = ["a", "b", "c", "d", "e", "f"];

for(let letter of letters) {

console.log(letter); // a,b,c,d,e,f

}

// Iterating over string

let greet = "Hello World!";

for(let character of greet) {

console.log(character); // H,e,l,l,o, ,W,o,r,l,d,!

}

حلقه for…of روی آبجکت ها قابل پیاده سازی نیست. اگر قصد تکرار (iterate) خصوصیات آبجکت را دارید می توانید از حلقه for-in استفاده کنید.

قالب ادبیات (Literals)

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

قالب literal با علامت تیک ( ) به جای استفاده از علامت نقل قول های معمول, ساخته می شود.

متغیرها یا عبارات می توانند داخل رشته با سینتکس ${…} قرار بگیرند.

مثال های زیر را مقایسه کنید تا اینکه ببینید که چقدر کاربردی هستند :

// Simple multi-line string
let str = `The quick brown fox
    jumps over the lazy dog.`;

// String with embedded variables and expression
let a = 10;
let b = 20;
let result = `The sum of ${a} and ${b} is ${a+b}.`;
console.log(result); // The sum of 10 and 20 is 30.

// Simple multi-line string

let str = `The quick brown fox

jumps over the lazy dog.`;

// String with embedded variables and expression

let a = 10;

let b = 20;

let result = `The sum of ${a} and ${b} is ${a+b}.`;

console.log(result); // The sum of 10 and 20 is 30.

در حالیکه در ES5 باید از همچنین موردی استفاده کرد :

// Multi-line string
var str = 'The quick brown fox\n\t'
    + 'jumps over the lazy dog.';

// Creating string using variables and expression
var a = 10;
var b = 20;
var result = 'The sum of ' + a + ' and ' + b + ' is ' + (a+b) + '.';
console.log(result); // The sum of 10 and 20 is 30.

// Multi-line string

var str = 'The quick brown fox\n\t'

+ 'jumps over the lazy dog.';

// Creating string using variables and expression

var a = 10;

var b = 20;

var result = 'The sum of ' + a + ' and ' + b + ' is ' + (a+b) + '.';

console.log(result); // The sum of 10 and 20 is 30.

مقادیر پیش فرض برای پارامترهای تابع

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

این یکی ویژگی هایی بود که بیشتر از هرچیزی در جاوا اسکریپت انتظار داشتیم تا اضافه شد درحالی که خیلی وقت پیش در دیگر زبان های برنامه نویسی این مورد وجود داشت :

function sayHello(name='World') {
    return `Hello ${name}!`;
}

console.log(sayHello()); // Hello World!
console.log(sayHello('John')); // Hello John!

function sayHello(name='World') {

return `Hello ${name}!`;

}

console.log(sayHello()); // Hello World!

console.log(sayHello('John')); // Hello John!

در ES5 برای داشتن همچنین قابلیتی باید از ترفند مثال زیر استفاده می کردیم :

function sayHello(name) {
    var name = name || 'World'; 
    return 'Hello ' +  name + '!';
}

console.log(sayHello()); // Hello World!
console.log(sayHello('John')); // Hello John!

function sayHello(name) {

var name = name || 'World';

return 'Hello ' + name + '!';

}

console.log(sayHello()); // Hello World!

console.log(sayHello('John')); // Hello John!

توابع Arrow

توابع Arrow یکی دیگر از قابلیت های جالب در جاوا اسکریپت ES6 است. که به ما سینتکس مختصرتری برای نوشتن توابع expression را با حذف کلمات function و return می دهد.

توابع Arrow با سینتکس جدید که => است تعریف می شوند:

// Function Expression
var sum = function(a, b) {
    return a + b;
}
console.log(sum(2, 3)); // 5

// Arrow function
var sum = (a, b) => a + b;
console.log(sum(2, 3)); // 5

// Function Expression

var sum = function(a, b) {

return a + b;

}

console.log(sum(2, 3)); // 5

// Arrow function

var sum = (a, b) => a + b;

console.log(sum(2, 3)); // 5

همانطور می بینید هیچ کلمه کلیدی function و returnی برای تعریف توابع arrow استفاده نشده است.

شما همچنین می توانید پارانتزها () را بری وقتی که یک پارامتر دارید نادیده بگیرید اما اگر صفر پارامتر یا بیشتر از یک پارامتر را داشته باشید, باید از پارانتز استفاده کنید.

همچنین, اگر بیشتر از یک عبارت در بدنه تابع وجود داشته باشد نیاز است که از براکت {} استفاده کنید.در این مورد نیاز است که از دستور return برای برگشت دادن مقدار هم استفاده کنید.

چندین نوع مختلف از نحوه نوشتن توابع arrow که بیشترین استفاده را دارند, در مثال زیر آورده شده است :

// Single parameter, single statement
var greet = name => alert("Hi " + name + "!");
greet("Peter"); // Hi Peter!

// Multiple arguments, single statement
var multiply = (x, y) => x * y;
alert(multiply(2, 3)); // 6


// Single parameter, multiple statements
var test = age => {
    if(age > 18) {
        alert("Adult");
    } else {
        alert("Teenager");
    }
}
test(21); // Adult

// Multiple parameters, multiple statements
var divide = (x, y) => {
    if(y != 0) {
        return x / y;
    }
}
alert(divide(10, 2)); // 5

// No parameter, single statement
var hello = () => alert('Hello World!');
hello(); // Hello World!

// Single parameter, single statement

var greet = name => alert("Hi " + name + "!");

greet("Peter"); // Hi Peter!

// Multiple arguments, single statement

var multiply = (x, y) => x * y;

alert(multiply(2, 3)); // 6

// Single parameter, multiple statements

var test = age => {

if(age > 18) {

alert("Adult");

} else {

alert("Teenager");

}

test(21); // Adult

// Multiple parameters, multiple statements

var divide = (x, y) => {

if(y != 0) {

return x / y;

}

alert(divide(10, 2)); // 5

// No parameter, single statement

var hello = () => alert('Hello World!');

hello(); // Hello World!

یک تفاوت مهم بین توابع arrow و توابع معمولی وجود دارد. برخلاف توابع معمولی, یک تابع arrow به هیچ وجه this خود را ندارد و this یک تابع را که خارج از آن تعریف شده است را دریافت می کنید.

در جاوا اسکریپت, this محتوای اجرا شده کنونی یک تابع است.

برای درک بهتر, مثال زیر را بررسی کنید :

function Person(nickname, country) {
    this.nickname = nickname;
    this.country = country;
    
    this.getInfo = function() {
        // Outer function context (Person object)
        return function() {
            // Inner function context (Global object 'Window')
            alert(this.constructor.name); // Window
            alert("Hi, I'm " + this.nickname + " from " + this.country);
        };
    }
}

var p = new Person('Rick', 'Argentina');
var printInfo = p.getInfo();
printInfo(); // Hi, I'm undefined from undefined

function Person(nickname, country) {

this.nickname = nickname;

this.country = country;

this.getInfo = function() {

// Outer function context (Person object)

return function() {

// Inner function context (Global object 'Window')

alert(this.constructor.name); // Window

alert("Hi, I'm " + this.nickname + " from " + this.country);

};

}

var p = new Person('Rick', 'Argentina');

var printInfo = p.getInfo();

printInfo(); // Hi, I'm undefined from undefined

دوباره نوشتن مثال بالا با قالب literal و تابع arrow در جاوا اسکریپت ES6 را ببینید :

function Person(nickname, country) {
    this.nickname = nickname;
    this.country = country;
    
    this.getInfo = function() {
        // Outer function context (Person object)
        return () => {
            // Inner function context (Person object)
            alert(this.constructor.name); // Person
            alert(`Hi, I'm ${this.nickname} from ${this.country}`);
        };
    }
}

let p = new Person('Rick', 'Argentina');
let printInfo = p.getInfo();
printInfo(); // Hi, I'm Rick from Argentina

function Person(nickname, country) {

this.nickname = nickname;

this.country = country;

this.getInfo = function() {

// Outer function context (Person object)

return () => {

// Inner function context (Person object)

alert(this.constructor.name); // Person

alert(`Hi, I'm ${this.nickname} from ${this.country}`);

};

}

let p = new Person('Rick', 'Argentina');

let printInfo = p.getInfo();

printInfo(); // Hi, I'm Rick from Argentina

همانطور که دیدید, کلمه کلیدی this در مثال بالا اشاره به محتوای تابع محصور شده تابع arrow است که آبجکت Person (خط ۹) برخلاف مثال قبلی ک به آبجکت سراسری window اشاره شده است.

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

در قسمت دوم بقیه مباحث باقی مانده و مهمی مثل کلاس و ماژول ها را بررسی می کنیم.

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

موفق باشید.

لغو پاسخ

عرشیا ۲۰ فروردین ۱۳۹۹

خیلی عالی بود توضیحاتتون ممنونم فقط چند مورد:
۱-در حلقه for ظاهرا فراموش شده var i=0 نوشته بشه
۲-در همون حلقه for چرا باید جواب ۵ بده؟ اینو متوجه نشدم
۳-for of کلیه string ها را در خروجی به صورت حروف جدا از هم میدهد؟

پاسخ

حسن شفیعی ۲۰ فروردین ۱۳۹۹

سلام. خوشحالیم که مفید واقع شده.
۱٫ به خاطر افزونه هست که ۰ رو در کد نشون نمیده و اگر روی کد دابل کلیک بشه کد کامل با var i = 0 نمایش داده میشه
۲٫ جواب ۵ نمیشه و اونجا هم کامنت شده که ۰,۱,۲,۳,۴ چون شرط قرار دادیم i اولیه ۰ هست پس از ۰ شروع میشه و گفتیم تا زمانی که کمتر از ۵ هست این حلقه ادامه پیدا کنه پس اگر ۴ شد دیگه برنامه از حلقه خارج میشه چون گفتیم i < ۵ ۳٫ بله کلیه آیتم ها رو که چه string باشند یا number رو میتونید در خروجی بصورت جدا دریافت کنید.

پاسخ

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

ECMAScript 6 یا جاوا اسکریپت ES6 چیست ؟

کلمه کلیدی let

کلمه کلیدی const

حلقه for…of

قالب ادبیات (Literals)

مقادیر پیش فرض برای پارامترهای تابع

توابع Arrow

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

لغو پاسخ

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

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

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