آموزش جاوا اسکریپت 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 خواهد شد.
رشته های الگوی جاوا اسکریپت
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}`);
استخراج در جاوا اسکریپت
جاوا، جاوا اسکریپت رو قورت بده! بدون کلاس، سرعت 2 برابر، ماندگاری 3 برابر، پولسازی عالی با توسعه وب، ماشین لرنینگ و ... کتابخانه های پیشرفته جاوا اسکریپت و ... دانلود:
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 با آرایه ها ( یعنی مقادیر قابل تکرار ) استفاده می شود.
دو محبث بسیار مهم در جاوا اسکریپت به زبان ساده:
ویدیوهای آموزشی
- برای مشاهده بهتر ویدیوها در موبایل، گوشی را افقی نگه دارید. اگر اروری مشاهده کردید بخاطر روشن بودن وی پی ان است. بعد از پخش هر ویدیو، علامت دانلود روی آن نمایان می شود.
- اگر روی دانلود کلیک کردید و ویدیو باز هم پخش شد، بعد از پخش ردن روی علامت سه نقطه پایینش کلیک و گزینه دانلود یا ذخیره را انتخاب کنید. از اینترنت دانلود منجر هم می توانید استفاده کنید. هر درسی مشکل داشت در نظرات اعلام کنید تا سریعا رفع شود یا به پیج منبع مراجعه کنید. ضمنا هر چند وقت یک بار احتمالا دروس به روز می شوند.
ابتدا دو ویدیوهای رایگان درباره ترفندهای جاوا اسکریپت ES6:
آموزش کامل از پیج آرکادمی:
| جلسه اول | جلسه دوم |
| جلسه سوم | جلسه چهارم |
| جلسه پنجم | جلسه ششم |
| جلسه هفتم | جلسه هشتم |
| جلسه نهم | جلسه دهم |
| جلسه یازدهم | جلسه دوازدهم |
| جلسه سیزدهم (حذف شده) | جلسه چهاردم |
| جلسه پانزدهم | جلسه شانزدهم |
| جلسه هفدهم | جلسه هجدهم |
| جلسه نوزدهم | جلسه بیستم |
