در این آموزش با استفاده از چند مثال با جاوا اسکریپت ES6 آشنا می شوید. جاوا اسکریپت ES6 که با نام های ECMAScript 2015 یا ECMAScript 6 نیز شناخته می شود، نسخه جدیدتر جاوا اسکریپت است که در سال 2015 معرفی شد.
ECMAScript استانداردی است که توسط زبان برنامه نویسی جاوا اسکریپت استفاده می شود. ECMAScript دستورالعمل هایی در مورد نحوه کار با زبان برنامه نویسی جاوا اسکریپت ارائه می دهد.
این آموزش خلاصه‌ای سریع از ویژگی‌های رایج ES6 ارائه می‌دهد تا بتوانید به سرعت؛ ES6 را راه اندازی کنید.
فراموش نکنید که دانلود کنید: برنامه نویسی جاوا اسکریپت از صفر تا صد (فیلم + PDF)
جاوا اسکریپت را اجرا کنید
Let در جاوا اسکریپت برای اعلان متغیرها استفاده می شود. قبلاً متغیرها با استفاده از کلمه کلیدی Var اعلام می شدند.
متغیرهایی که با استفاده از let اعلام می شوند Block Scope هستند، یعنی فقط در یک بلوک خاص قابل دسترسی هستند. مثل این:
// متغیر با استفاده از let اعلام شد
let name = ‘سارا’;
{
// فقط به صورت داخلی قابل دسترسی است
let name = ‘پیتر’;
console.log(name); // پیتر
}
console.log(name); // سارا
هزینه جاوا اسکریپت
عبارت Const برای اعلام ثابت ها در جاوا اسکریپت استفاده می شود. مثل این:
// نام اعلام شده با const قابل تغییر نیست
const name = ‘سارا’;
شما نمی توانید مقدار یک متغیر const را پس از اعلام آن تغییر دهید.
درس های رایگان برنامه نویسی ما در اینجا
عملکرد فلش جاوا اسکریپت
در نسخه ES6 می توانید از توابع جهت دار برای ایجاد عبارات کاربردی استفاده کنید. به عنوان مثال این تابع;
// بیان تابع
اجازه دهید x = تابع (x, y) {
بازگشت x * y;
}
را می توان به صورت زیر نوشت:
// بیان تابع با استفاده از تابع پیکان
اجازه دهید x = (x، y) => x * y;
کلاس های جاوا اسکریپت
یک کلاس جاوا اسکریپت برای ایجاد یک شی استفاده می شود. یک کلاس شبیه یک تابع سازنده است. مثل این:
نفر کلاس {
سازنده (نام) {
this.name = نام;
}
}
برای ایجاد کلاس از کلمه کلیدی Class استفاده می شود. ویژگی ها به یک تابع سازنده اختصاص داده می شوند.
اکنون می توانید یک شی ایجاد کنید:
نفر کلاس {
سازنده (نام) {
this.name = نام;
}
}
const person1 = new Person(‘John’);
console.log(person1.name); // جان
مقادیر پارامترهای پیش فرض
در نسخه ES6 می توانید مقادیر پیش فرض را در پارامترهای تابع قرار دهید:
مجموع تابع (x, y = 5) {
// جمع آوری کنید
// مقدار y در صورت عدم تصویب 5 است
console.log(x + y);
}
sum (5); // 10
sum(5, 15); // 20
در مثال بالا، اگر پارامتری را برای y ارسال نکنید، به طور پیش فرض 5 خواهد بود.
دانلود رایگان آموزش jQuery از صفر تا صد (فیلم + PDF)
رشته های قالب جاوا اسکریپت
رشته‌های قالب یا لفظی الگو، گنجاندن متغیرها در یک رشته را آسان می‌کند. به عنوان مثال، قبل از استفاده از این ویژگی، باید:
const first_name = “جک”;
const last_name = “گنجشک”;
console.log(‘Hello’ + first_name + ‘ ‘ + last_name);
اگر می توان این را با استفاده از رشته های الگو مانند زیر نوشت:
const first_name = “جک”;
const last_name = “گنجشک”;
console.log(` سلام ${first_name} ${last_name}`);
استخراج در جاوا اسکریپت
تخریب ساختار، تخصیص مقادیر به یک متغیر جدید را آسان‌تر می‌کند. مثلا:
// قبل از انجام چنین کاری
فرد ثابت = {
نام: “سارا”
سن: 25
زن
}
let name = person.name;
بگذار سن = شخص.سن;
بگذار جنسیت = شخص.جنسیت;
console.log(name); // سارا
console.log(age); // 25
console.log (جنسیت); // زن
با استفاده از سینتکس تخریب ساختار ES6، کد بالا را می توان به صورت زیر نوشت:
فرد ثابت = {
نام: “سارا”
سن: 25
زن
}
اجازه دهید { نام، سن، جنسیت } = شخص;
console.log(name); // سارا
console.log(age); // 25
console.log (جنسیت); // زن
دریافت خروجی و ورودی در جاوا اسکریپت
می توانید از یک تابع یا برنامه خروجی بگیرید و با وارد کردن آن در برنامه دیگری از آن استفاده کنید. این ویژگی به ساخت قطعه کدهای قابل استفاده مجدد کمک می کند. برای مثال، فرض کنید دو فایل جاوا اسکریپت به نام های contact.js و home.js دارید.
در فایل contact.js می توانید تابع contact() را استنباط کنید:
// صادرات
صادرات مخاطب تابع پیش فرض (نام، سن) {
console.log(` نام ${name} است. و سن آن ${age} است.`);
}
سپس، هنگامی که می خواهید از تابع contact() در فایل دیگری استفاده کنید، می توانید به راحتی تابع را در فایلی مانند home.js وارد کنید:
وارد کردن مخاطب از ‘./contact.js’;
contact(‘Sarah’, 25);
// نام سارا است. و سن 25 سال است
یک وعده در جاوا اسکریپت
Promise برای رسیدگی به وظایف ناهمزمان استفاده می شود. مثل این:
// یک قول را برمی گرداند
let countValue = new Promise(function (resolve, reject) {
reject(‘Promise Rejected’);
})؛
// زمانی اجرا شد که وعده با موفقیت حل شد
countValue.then(
تابع successValue(نتیجه) {
console.log(نتیجه); // قول حل شد
}،
)
پارامتر Rest و عملگر جاوا اسکریپت Spread
می توانید از پارامتر Rest برای نمایش تعداد نامحدودی از آرگومان ها به عنوان یک آرایه استفاده کنید:
تابع نمایش (a, b, …args) {
console.log(a); // یک
console.log(b); // دو
console.log(args); // [“three”, “four”, “five”, “six”]
}
نمایش (‘یک’، ‘دو’، ‘سه’، ‘چهار’، ‘پنج’، ‘شش’)
بقیه آرگومان ها را در نحو (…) ارسال می کنید که به آن پارامتر Rest می گویند.
شما از نحو (…spread) برای کپی کردن عناصر در یک آرایه استفاده می کنید:
اجازه دهید arr1 = [‘one’, ‘two’];
اجازه دهید arr2 = […arr1, ‘three’, ‘four’, ‘five’];
console.log(arr2); // [“one”, “two”, “three”, “four”, “five”]
پارامتر Rest و عملگر انتشار از یک نحو استفاده می کنند. با این حال، عملگر انتشار با آرایه ها (یعنی مقادیر قابل تکرار) استفاده می شود.
دو مشکل بسیار مهم در جاوا اسکریپت زبان ساده:
- شی گرایی در جاوا اسکریپت
- ajax در جاوا اسکریپت
فیلم های آموزشی
- برای مشاهده بهتر ویدیوها در دستگاه تلفن همراه، تلفن را به صورت افقی نگه دارید. اگر خطایی می بینید به این دلیل است که VPN روشن است. پس از پخش هر ویدیو، نماد دانلود روی آن ظاهر می شود.
- اگر روی دانلود کلیک کردید و ویدیو به پخش ادامه داد، پس از پخش، روی سه نقطه پایین کلیک کنید و گزینه دانلود یا ذخیره را انتخاب کنید. همچنین می توانید از اینترنت دانلود منیجر استفاده کنید. اگر مشکلی در هر آموزشی وجود دارد، لطفاً در نظرات به من اطلاع دهید تا فوراً برطرف شود یا صفحه منبع را بررسی کنید. همچنین، احتمالاً آموزش ها هر از چند گاهی به روز می شوند.
دو ویدیوی اول رایگان جاوا اسکریپت ES6:
آموزش کامل از صفحه آرکادی:
| جلسه اول | جلسه دوم |
| جلسه سوم | جلسه چهارم |
| جلسه پنجم | جلسه ششم |
| جلسه هفتم | جلسه هشتم |
| جلسه نهم | جلسه دهم |
| جلسه یازدهم | جلسه دوازدهم |
| جلسه سیزدهم (حذف شده) | جلسه چهاردهم |
| جلسه پانزدهم | جلسه شانزدهم |
| جلسه هفدهم | جلسه هجدهم |
| جلسه نوزدهم | جلسه بیستم |