آموزش جاوا اسکریپت ES6 از صفر تا صد با مثال

در این آموزش با کمک چند مثال با جاوا اسکریپت ES6 آشنا می شوید. جاوا اسکریپت ES6 که به عنوان ECMAScript 2015 یا ECMAScript 6 هم شناخته می شود، نسخه جدیدتر جاوا اسکریپت است که در سال 2015 معرفی شد.

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

این آموزش خلاصه مختصری از ویژگی های رایج ES6 را ارائه می دهد تا بتوانید به سرعت؛ ES6 را شروع کنید.

حتما دانلود کنید: صفر تا صد برنامه نویسی جاوا اسکریپت (فیلم +  pdf)

Let جاوا اسکریپت

Let در جاوا اسکریپت برای اعلان متغیر ها استفاده می شود. قبلا متغیر ها با استفاده از کلمه کلیدی Var اعلان می شدند.

متغیر های اعلان شده با استفاده از let اسکوپ بلوکی یا Block Scope هستند، یعنی آن ها فقط در یک بلوک خاص قابل دسترسی هستند. مثل این:

// variable declared using let

let name = ‘Sara’;

{

// can be accessed only inside

let name = ‘Peter’;

console.log(name); // Peter

}

console.log(name); // Sara

Const جاوا اسکریپت

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

// name declared with const cannot be changed

const name = ‘Sara’;

بعد از اعلان، نمی توانید مقدار یک متغیر const را تغییر بدهید.

آموزشهای برنامه نویسی رایگان ما در اینجا

تابع فلشی جاوا اسکریپت

در نسخه ES6 می توانید از توابع فلشی یا Arrow Function برای ایجاد عبارات تابعی استفاده کنید. مثلا این تابع؛

// function expression

let x = function(x, y) {

return x * y;

}

را می توان به این صورت نوشت:

// function expression using arrow function

let x = (x, y) => x * y;

کلاس های جاوا اسکریپت

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

class Person {

constructor(name) {

this.name = name;

}

}

کلمه کلیدی Classبرای ایجاد یک کلاس استفاده می شود. خصوصیات یا Properties به یک تابع سازنده تخصیص داده می شوند.

حالا می توانید یک شی بسازید:

class Person {

constructor(name) {

this.name = name;

}

}

const person1 = new Person(‘John’);

console.log(person1.name); // John

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

در نسخه ES6 می توانید مقادیر پیش فرض را در پارامتر های تابع قرار بدهید:

function sum(x, y = 5) {

// take sum

// the value of y is 5 if not passed

console.log(x + y);

}

sum(5); // 10

sum(5, 15); // 20

در مثال بالا، اگر پارامتری را برای y نفرستید، به طور پیش فرض 5 خواهد شد.

دانلود رایگان آموزش صفر تا صد جی کوئری (فیلم+PDF)

رشته های الگوی جاوا اسکریپت

Template Literal یا رشته های الگو گنجاندن متغیر ها در یک رشته را آسان تر کرده است. به طور مثال قبل از استفاده از این ویژگی باید این کار را می کردید:

const first_name = “Jack”;

const last_name = “Sparrow”;

console.log(‘Hello ‘ + first_name + ‘ ‘ + last_name);

در صورتی که این را می توان با استفاده از رشته های الگو به این صورت نوشت:

const first_name = “Jack”;

const last_name = “Sparrow”;

console.log(`Hello ${first_name} ${last_name}`);

استخراج در جاوا اسکریپت

Destruturing تخصیص مقادیر به یک متغیر جدید را آسان‌تر می‌کند . مثلا:

// before you would do something like this

const person = {

name: ‘Sara’,

age: 25,

gender: ‘female’

}

let name = person.name;

let age = person.age;

let gender = person.gender;

console.log(name); // Sara

console.log(age); // 25

console.log(gender); // female

با استفاده از سینتکس ES6 Destructuring، کد بالا را می توان به این صورت نوشت:

const person = {

name: ‘Sara’,

age: 25,

gender: ‘female’

}

let { name, age, gender } = person;

console.log(name); // Sara

console.log(age); // 25

console.log(gender); // female

گرفتنِ خروجی و ورودی در جاوا اسکریپت

شما می توانید از یک تابع یا یک برنامه خروجی بگیرید و با ایمپورت کردن آن در یک برنامه دیگر از آن استفاده کنید. این ویژگی به ساخت قطعه کد های قابل استفاده مجدد کمک می کند. به طور مثال فرض کنید که دو فایل جاوا اسکریپت به نام‌ های contact.js و home.js دارید.

در فایلcontact.js ، می توانید از تابع ()contact خروجی بگیرید:

// export

export default function contact(name, age) {

console.log(`The name is ${name}. And age is ${age}.`);

}

بعد وقتی که خواستید از تابع ()contact در فایل دیگری استفاده کنید، می توانید خیلی راحت تابع را در فایلی مثل home.js ایمپورت کنید:

import contact from ‘./contact.js’;

contact(‘Sara’, 25);

// The name is Sara. And age is 25

Promise در جاوا اسکریپت

Promise برای رسیدگی به وظایف نا همزمان استفاده می شود . مثل این:

// returns a promise

let countValue = new Promise(function (resolve, reject) {

reject(‘Promise rejected’);

});

// executes when promise is resolved successfully

countValue.then(

function successValue(result) {

console.log(result); // Promise resolved

},

)

پارامتر Rest و عملگر Spread جاوا اسکریپت

می توانید از پارامتر Rest برای نمایش تعداد نامحدودی از آرگومان ها به عنوان یک آرایه استفاده کنید:

function show(a, b, …args) {

console.log(a); // one

console.log(b); // two

console.log(args); // [“three”, “four”, “five”, “six”]

}

show(‘one’, ‘two’, ‘three’, ‘four’, ‘five’, ‘six’)

شما آرگومان های باقی مانده را به صورت سینتکس (…) ارسال می کنید که به آن Rest parameter می گویند.

از سینتکس ( …spread) برای کپی کردن آیتم ها در یک آرایه استفاده می کنید:

let arr1 = [‘one’, ‘two’];

let arr2 = […arr1, ‘three’, ‘four’, ‘five’];

console.log(arr2); // [“one”, “two”, “three”, “four”, “five”]

هم Rest Parameter و هم عملگر spread از یک سینتکس استفاده می کنند. با این حال، عملگر spread با آرایه ها ( یعنی مقادیر قابل تکرار ) استفاده می شود.

دو محبث بسیار مهم در جاوا اسکریپت به زبان ساده:

• شی گرایی در جاوا اسکریپت
• ajax در جاوا اسکریپت

ویدیوهای آموزشی

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

ابتدا دو ویدیوهای رایگان درباره ترفندهای جاوا اسکریپت ES6:

آموزش کامل از پیج آرکادمی: