ویژگی های JavaScript ES6+: مروری کامل

Summarize this content to 400 words in Persian Lang

معرفی

جاوا اسکریپت دائما در حال تکامل است و همگامی با آخرین ویژگی ها برای توسعه وب مدرن بسیار مهم است. از زمان ES6، جاوا اسکریپت ویژگی های جدیدی را معرفی کرده است که کدنویسی را کارآمدتر می کند.

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

در این وبلاگ، مروری بر ویژگی های کلیدی معرفی شده در ES6 و فراتر از آن، از جمله let و const، توابع فلش و موارد دیگر ارائه خواهد شد.

ویژگی های کلیدی معرفی شده در ES6+

1. اجازه دهید و ثابت کنید

جاوا اسکریپت دو روش جدید برای اعلام متغیرهای let و const معرفی کرد. اینها محدوده بهتر و کنترل بیشتری را بر نحوه استفاده از متغیرها در کد شما در مقایسه با var سنتی ارائه می کنند.

اجازه دهید

let برای اعلام متغیرهایی که می توانند مجدداً تخصیص داده شوند استفاده می شود. بر خلاف var، let دارای محدوده بلوک است، به این معنی که فقط در داخل بلوک (پرانتزهای مجعد {}) که در آن تعریف شده است قابل دسترسی است.

مثال

if (true) {
let x = 10;
console.log(x); // Output: 10
}
console.log(x); // Error: x is not defined

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

را if بیانیه شرایط را بررسی می کند true برآورده می شود (که همیشه در این مورد وجود دارد).
وقتی شرط درست باشد، کد بلوک می شود { … } اجرا می کند.

let x = 10; یک متغیر را اعلام می کند x با محدوده بلوک (محدوده به نزدیکترین بریس های مجعد { … }).

x مقدار به آن اختصاص داده شده است 10.

console.log(x); مقدار x، که است 10، به کنسول.
خروجی نمایش داده شده است 10.

console.log(x); تلاش برای خروجی مقدار x به کنسول
با این حال، x خارج از بلوکی که در آن تعریف شده است در دسترس نیست (if مسدود کردن).
جاوا اسکریپت یک خطا می دهد: ReferenceError: x is not defined.
این خطا به این دلیل رخ می دهد let متغیرها دارای محدوده بلوکی هستند و فقط در بلوک (پرانتزهای فرفری) جایی که تعریف می شوند وجود دارند.

پایان

const برای اعلان متغیرهایی که نباید دوباره تخصیص داده شوند استفاده می شود. مانند let، const دارای محدوده بلوک است. هنگامی که به متغیری با استفاده از const مقداری اختصاص داده می شود، نمی توان آن را تغییر داد.

const y = 20;
console.log(y); // Output: 20
y = 30; // Error: Assignment to constant variable.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

const یک متغیر ثابت به نام را اعلام می کند y.
ثابت ها (const) متغیرهایی هستند که پس از تنظیم مقدار آنها قابل تخصیص مجدد نیستند.

y با مقدار مقدار دهی اولیه می شود 20.

console.log(y); مقدار y، که است 20، به کنسول.
خروجی نمایش داده شده است 20.
تلاش برای تخصیص مجدد مقدار y به 30.
با این حال، ثابت ها (const) در جاوا اسکریپت را نمی توان پس از تخصیص اولیه آنها دوباره اختصاص داد.
جاوا اسکریپت یک خطا می دهد: TypeError: Assignment to constant variable.

این خطا به این دلیل رخ می دهد y به عنوان یک ثابت اعلام می شود (const) و پس از تنظیم نمی توانید مقدار آن را تغییر دهید.

2. توابع فلش

شرح:توابع پیکان یک نحو مختصر برای نوشتن عبارات تابع ارائه می کنند. آنها این زمینه خاص خود را ندارند، که آنها را به ویژه برای پاسخگویی مفید می کند.

مثال

// Traditional function expression
var add = function(a, b) {
return a + b;
};

// Arrow function expression
const add = (a, b) => a + b;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

var add متغیری را با نام اعلام می کند add. این متغیر یک تابع را ذخیره می کند.
را function(a, b) part یک تابع ناشناس (یک تابع بدون نام) ایجاد می کند که دو پارامتر دارد، a و b.
در داخل پرانتزهای مجعد {}، بدنه تابع حاوی یک عبارت واحد است: return a + b;. این بدان معنی است که تابع دو پارامتر را اضافه می کند a و b و نتیجه را برگردانید.
تابع به متغیر اختصاص داده می شود add. اکنون، add می توان برای فراخوانی تابع و انجام جمع استفاده کرد.
چه زمانی add(2, 3) فراخوانی می شود، تابع اضافه می کند 2 و 3 و برمی گردد 5.

const add یک متغیر ثابت به نام را اعلام می کند add. این به معنی متغیر است add نمی توان دوباره به یک مقدار یا تابع متفاوت اختصاص داد.
را (a, b) => a + b قسمت یک تابع فلش است. این یک روش کوتاه تر و مختصرتر برای نوشتن یک تابع است.

(a, b) پارامترهای تابع را فهرست می کند، درست مانند عبارت سنتی.
را a + b قسمت بدنه تابع است. از آنجایی که هیچ بریس مجعدی وجود ندارد {}، این تابع یک بازگشت ضمنی دارد، به این معنی که به طور خودکار نتیجه را برمی گرداند a + b.
چه زمانی add(2, 3) فراخوانی می شود، تابع arrow اضافه می کند 2 و 3 و برمی گردد 5.

3. قالب Literals

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

مثال:

const name = ‘John’;
const greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, John!

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

const یک متغیر ثابت به نام را اعلام می کند name.

‘John’ به عنوان مقدار اختصاص داده شده است name.
ثابت ها const متغیرهایی هستند که پس از تنظیم مقدار آنها قابل تخصیص مجدد نیستند.
حروف الفبای الگو (محصور در بکتیک) امکان جاسازی عبارات را در داخل رشته ها فراهم می کند.

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

${name} ارزیابی می کند ‘John’، بنابراین greeting تبدیل می شود ‘Hello, John!’.

console.log() مقدار greeting به کنسول
خروجی نمایش داده شده در کنسول است Hello, John!.

4. تخریب ساختار

Destructuring به شما این امکان را می دهد که مقادیر آرایه ها یا ویژگی ها را از اشیاء به متغیرهای مجزا باز کنید. برای ساده‌سازی استخراج مقادیر از آرایه‌ها و اشیا، از ساختارزدایی استفاده کنید.

مثال:

const user = { name: ‘John’, age: 30 };
const { name, age } = user;
console.log(name); // John
console.log(age); // 30

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

const یک متغیر ثابت به نام را اعلام می کند user.

user یک شی با دو ویژگی است: name با ارزش ‘John’ و age با ارزش 30.
تخریب شی به شما امکان می دهد تا ویژگی های خاصی را از یک شی به متغیرهایی با نام های مشابه استخراج کنید.

{ name, age } در سمت چپ = دو متغیر جدید را اعلام می کند (name و age).
به این متغیرها مقادیر نسبت داده می شود user.name و user.age، به ترتیب.

console.log(name); مقدار متغیر را خروجی می دهد name به کنسول
خروجی نمایش داده شده در کنسول است John.

console.log(age); مقدار متغیر را خروجی می دهد age به کنسول
خروجی نمایش داده شده در کنسول است 30.

5. پارامترهای پیش فرض

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

مثال:

function greet(name = ‘Guest’) {
console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

function greet(…) تابعی را با نام اعلام می کند greet.

name=”Guest” یک پارامتر با مقدار پیش فرض است ‘Guest’. این بدان معناست که اگر هیچ آرگومانی به آن منتقل نشود greet()، name به صورت پیش فرض خواهد بود ‘Guest’.
حروف الفبای الگو (محصور در بکتیک `) اجازه تعبیه عبارات در رشته ها را می دهد.

${name} در داخل ${} عبارتی است که با مقدار the جایگزین می شود name پارامتر به تابع منتقل می شود.
اگر نه name پارامتر ارائه شده است، به طور پیش فرض به ‘Guest’.

greet() تماس می گیرد greet عملکرد بدون ارسال هیچ آرگومان
از آنجایی که هیچ استدلالی تصویب نشده است، name پیش فرض به ‘Guest’.
سپس تابع ثبت می شود ‘Hello, Guest!’ به کنسول

6. اپراتورهای استراحت و پخش

عملگر بقیه (…) به شما امکان می دهد تعداد نامحدودی از آرگومان ها را به عنوان یک آرایه نمایش دهید. عملگر spread (…) اجازه می دهد تا یک تکرار شونده در مکان هایی که صفر یا بیشتر آرگومان یا عنصر انتظار می رود گسترش یابد. از عملگر استراحت در پارامترهای تابع برای مدیریت آرگومان های مختلف استفاده کنید. از عملگر spread برای گسترش آرایه ها و اشیاء استفاده کنید.

مثال:

function sum(…numbers) {
return numbers.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3)); // 6

const arr1 = [1, 2];
const arr2 = […arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

function sum(…numbers) تابعی را با نام اعلام می کند sum که از یک پارامتر استراحت استفاده می کند …numbers.
پارامتر بقیه …numbers به تابع اجازه می دهد تا هر تعداد آرگومان را بپذیرد و آنها را در آرایه ای به نام جمع آوری کند numbers.

numbers.reduce(…) اعمال می کند reduce روش بر روی numbers آرایه.
را reduce روش بر روی هر عنصر در مورد تکرار می شود numbers آرایه و یک مقدار واحد جمع می کند (a + b).

(a, b) => a + b یک تابع پیکانی است که دو عدد را جمع می کند a و b.

0 مقدار اولیه است a در فرآیند کاهش

sum(1, 2, 3) تماس می گیرد sum تابع با سه آرگومان: 1، 2، و 3.
تابع مجموع این اعداد را محاسبه می کند (1 + 2 + 3) استفاده كردن reduce.
نتیجه 6 به کنسول وارد شده است.

const arr1 یک متغیر ثابت را اعلام می کند arr1 با یک آرایه راه اندازی شد [1, 2].

…arr1 عناصر از arr1 به آرایه جدید arr2.

console.log(arr2) خروجی محتویات arr2 به کنسول
خروجی نمایش داده شده است [1, 2, 3, 4]، که آرایه ترکیبی با عناصر از arr1 و عناصر اضافی 3 و 4.

7. کلاس ها

کلاس ها یک نحو بصری تر و ساده تر برای ایجاد اشیاء و برخورد با وراثت در جاوا اسکریپت ارائه می کنند. از کلاس ها برای ایجاد اشیا و ایجاد سلسله مراتب وراثت استفاده کنید.

مثال:

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}

const john = new Person(‘John’, 30);
john.greet(); // Hello, my name is John and I am 30 years old.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

class Person کلاس جدیدی را با نام اعلام می کند Person.
کلاس ها در جاوا اسکریپت راهی برای تعریف طرح های اولیه برای ایجاد اشیاء با متدها و ویژگی های مشترک ارائه می دهند.
را constructor متد یک روش خاص برای ایجاد و مقداردهی اولیه اشیاء ایجاد شده با یک کلاس است.

constructor(name, age) پارامترها را تعریف می کند name و age.

this.name = name; مقدار را اختصاص می دهد name به سازنده به name ویژگی شی در حال ایجاد (this اشاره به نمونه فعلی از Person کلاس).

this.age = age; مقدار را اختصاص می دهد age به سازنده به age ویژگی شی در حال ایجاد

greet() روشی را تعریف می کند greet در داخل Person کلاس
متدها در کلاس ها توابعی هستند که می توانند در نمونه هایی از کلاس فراخوانی شوند.
حروف الفبای الگو (محصور در بکتیک `) اجازه تعبیه عبارات در رشته ها را می دهد.

${this.name} و ${this.age} عباراتی هستند که با مقادیر از جایگزین می شوند name و age خواص شی فعلی (this اشاره به نمونه فعلی از Person).

new Person(‘John’, 30) یک نمونه جدید از Person کلاس
را constructor متد به طور خودکار با آرگومان فراخوانی می شود ‘John’ و 30، مقداردهی اولیه name و age خواص از john هدف – شی.

john.greet() تماس می گیرد greet روش بر روی john هدف – شی.
روش ثبت می شود “Hello, my name is John and I am 30 years old.” به کنسول، با استفاده از مقادیر ذخیره شده در john.name و john.age.

8. قول

Promises راهی برای مدیریت عملیات ناهمزمان با ظرافت بیشتری نسبت به callbacks ارائه می دهد. از وعده ها برای مدیریت عملیات ناهمزمان مانند تماس های API استفاده کنید.

مثال:

const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘Data fetched’);
}, 1000);
});
};

fetchData().then(data => {
console.log(data); // Data fetched
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

const fetchData یک متغیر ثابت را اعلام می کند fetchData با یک تابع پیکان راه اندازی شد () => { … }.
توابع پیکان روشی مختصر برای نوشتن توابع در جاوا اسکریپت ارائه می دهند.

new Promise(…) جدید ایجاد می کند Promise هدف – شی.
را Promise سازنده یک تابع با resolve و reject مولفه های.
داخل این تابع:

setTimeout(…, 1000) یک تابع را برنامه ریزی می کند تا پس از 1000 میلی ثانیه (1 ثانیه) تاخیر اجرا شود.
تابع فلش () => { resolve(‘Data fetched’); } بعد از تایم اوت اجرا می شود.

resolve(‘Data fetched’) وعده را با ارزش وفا می کند ‘Data fetched’.

fetchData() تماس می گیرد fetchData تابع، که a را برمی گرداند Promise.

.then(data => { … }) یک تابع پاسخ به تماس را برای مدیریت مقدار حل شده (data) هنگامی که وعده وفا شود.

تابع فلش data => { console.log(data); } زمانی که وعده با موفقیت حل شد اجرا می شود (resolve(‘Data fetched’)).

console.log(data) مقدار data (“داده ها واکشی شده”) به کنسول.

9. Async/Await

Async/await به شما امکان می دهد کدهای ناهمزمان را به شیوه ای همزمان تر و خواناتر بنویسید. از async/wait برای کدهای ناهمزمان واضح تر و خواناتر استفاده کنید.

مثال:

const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘Data fetched’);
}, 1000);
});
};

async function getData() {
const data = await fetchData();
console.log(data); // Data fetched
}

getData();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

const fetchData یک متغیر ثابت را اعلام می کند fetchData با یک تابع پیکان راه اندازی شد () => { … }.
توابع پیکان روشی مختصر برای تعریف توابع در جاوا اسکریپت ارائه می دهند.

new Promise(…) جدید ایجاد می کند Promise هدف – شی.
تابع اجرای وعده دو پارامتر می گیرد: resolve و reject.
داخل تابع مجری:

setTimeout(…, 1000) یک تابع را برنامه ریزی می کند تا پس از 1000 میلی ثانیه (1 ثانیه) تاخیر اجرا شود.
تابع فلش () => { resolve(‘Data fetched’); } پس از اتمام زمان اوت اجرا می شود.

resolve(‘Data fetched’) وعده را با ارزش وفا می کند ‘Data fetched’.

async function getData() یک تابع ناهمزمان را با نام اعلام می کند getData.

توابع Async به شما این امکان را می دهند که کدهای ناهمزمان را به شیوه ای همزمان بنویسید و کار با وعده ها و سایر عملیات ناهمزمان را آسان تر می کند.

await fetchData() اجرای را متوقف می کند getData تا زمان بازگشت وعده fetchData حل و فصل می کند (تامین می کند یا رد می کند).

پس از تحقق، await مقدار حل شده (‘Data fetched’) و آن را به متغیر اختصاص می دهد data.

console.log(data); مقدار data (“داده ها واکشی شده”) به کنسول.

getData() تماس می گیرد getData تابع، اجرای عملیات ناهمزمان تعریف شده در داخل را آغاز می کند getData.

نتیجه

ویژگی های ES6+ ابزارهای قدرتمندی برای نوشتن جاوا اسکریپت مدرن ارائه می دهد. با درک و استفاده از این ویژگی ها، توسعه دهندگان می توانند کدهای کارآمدتر، خوانا و قابل نگهداری را بنویسند.

if (true) {
    let x = 10;
    console.log(x); // Output: 10
}
console.log(x); // Error: x is not defined

const y = 20;
console.log(y); // Output: 20
y = 30; // Error: Assignment to constant variable.

// Traditional function expression
var add = function(a, b) {
    return a + b;
};

// Arrow function expression
const add = (a, b) => a + b;

const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, John!

const user = { name: 'John', age: 30 };
const { name, age } = user;
console.log(name); // John
console.log(age); // 30

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!

function sum(...numbers) {
    return numbers.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3)); // 6

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

const john = new Person('John', 30);
john.greet(); // Hello, my name is John and I am 30 years old.

const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data fetched');
        }, 1000);
    });
};

fetchData().then(data => {
    console.log(data); // Data fetched
});

const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data fetched');
        }, 1000);
    });
};

async function getData() {
    const data = await fetchData();
    console.log(data); // Data fetched
}

getData();