ویژگی های جدید جاوا اسکریپت ES2021

ES2021 یا همان ES12 در ماه ژوئن سال 2021 منتشر شد.ویژگی هایی که توسط این نسخه به جاوا اسکریپت (javascript) اضافه شدکه در ادامه ویژگی های جدید جاوا اسکریپت ES2021 رو به صورت کامل بررسی میکنیم، این ویژگی ها شامل موارد زیر هستند:

ویژگی های جدید ES12

()String.prototype.replaceAll
Promise.any
WeakRef
=&&, =|| and =??
Numeric separators

Numeric Separators

کار با اعداد نسبتا بزرگ گیج کننده است. به عنوان مثال ، عدد “92145723” را در نظر بگیرید. شما باید خیلی توجه کنید تا ببینید که این عدد 92 میلیون دلار است.با ویژگی جدید اضافه شده به ES20211 شما می توانید این عدد را به صورت “723_145_92” بنویسید.از underscores میتوانید برای بهبود خوانایی استفاده کنید.به راحتی و آسانی متوجه می شوید که این عدد 92 میلیون و … است.

بنابراین ، ویژگی numeric separator صرفاً برای بهبود خوانایی است و روی عملکرد برنامه شما تأثیر منفی یا مثبتی نمی گذارد.

// previous syntax before ES12
const number = 92145723;

// new syntax coming with ES12
const number = 92_145_723;

// previous syntax before ES12

const number = 92145723;

// new syntax coming with ES12

const number = 92_145_723;

()String.prototype.replaceAll

method جدید replaceAll تغییرات اساسی را ایجاد نمی کند اما یک ویژگی جالب و خوب است.همانطور که از نام آن پیدا است در یک رشته تمامی occurrences را جایگزین می کند

// replacing all occurrences of x with a
// jxvxscript becomes javascript
'jxvxscript'.replaceAll('x', 'a');

// replacing all occurrences of x with a

// jxvxscript becomes javascript

'jxvxscript'.replaceAll('x', 'a');

قبل از replaceAll شما باید با استفاده از RegEx تمامی کاراکترهای موردنظر را جایگیزین می کردید اما با معرفی replaceAll این کار بسیار راحت تر شده است.

Logical Assignment Operators

با استفاده از عملگرهای انتصاب منطقی جدید – = && ،= || و = ؟؟ – می توانید یک value را بر اساس یک logical operators به یک متغیر اختصاص دهید. یعنی عملگرهای منطقی را با عبارت انتصاب ترکیب می کند.

این عملگرها بسیار مشابه =+, =-, =* و /= هستند.لازم نیست نگران باشید، بادیدن چند مثال برای هر operator کامل نحوه کار آنها را درک خواهید کرد.

(= &&)And and equals

operator and and equals تنها در صورتی که سمت چپ یک مقدار truthy باشد،تخصیص(assignment ) را انجام می دهد.به مثال زیر توجه کنید:

let first = 10;
let second = 15;

first &&= second;

let first = 10;

let second = 15;

first &&= second;

معادل عبارت فوق first && (first = second) است.اگر درک این operator مشکل است ، به صورت زیر به آن نگاه کنید:

let first = 10;
let second = 15;

if (first) {
    first = second;
}

let first = 10;

let second = 15;

if (first) {

first = second;

}

قطعه کد بالا نشان میدهد که تا قبل از ES2021 باید چطور عمل می کردید.

(||=)Or or equals

این operator دقیقا در مقابل =&& است.logical OR تنها در صورتی که سمت چپ یک مقدار falsy باشد،تخصیص(assignment ) را انجام می دهد.به مثال زیر توجه کنید:

let first = null;
let second = 15;

first ||= second; // first is 15 now

let first = null;

let second = 15;

first ||= second; // first is 15 now

معادل عبارت فوق first || (first = second) است.یعنی تنها در صورتی که متغیر first یک falsy value باشد مقدار متغیر second به آن اختصاص داده می شود.

معادل کد بالا با استفاده از if statement به صورت زیر است:

let first = null;
let second = 15;

if (!first) {
    first = second;
}

let first = null;

let second = 15;

if (!first) {

first = second;

}

(=؟؟)Question question equals

مشابه Nullish Coalescing Operator تخصیص تنها در زمانی اتفاق می افتد که سمت چپ nullish یا undefined باشد

دستور شرطی if...else در جاوا اسکریپت (JavaScript)

let first = null;
let second = 15;

first ??= second;

let first = null;

let second = 15;

first ??= second;

first ?? (first = second) معادل قطعه کد بالاست. تنها در صورتی که مقدار متغیر first یکی از مقادیر “null” یا “undefined” باشد،مقدار متغیر second به آن اختصاص خواهد یافت.

معادل کد بالا با استفاده از if statement به صورت زیر است:

let first = null;
let second = 15;

if (first == null || first == undefined) {
    first = second;
}

let first = null;

let second = 15;

if (first == null || first == undefined) {

first = second;

}

Promise.any

ما یک Promise method جدید به نام ()Promise.any داریم.این method چندین promises را دریافت می کند و هر زمانی که یک کدام از promises ها resolves شود،resolved می شود.

try {
    const firstPromiseResolved = Promise.any(promisesArray);

    // do more work with the first promise resolved
catch(e) {
   // catch the error
}

try {

const firstPromiseResolved = Promise.any(promisesArray);

// do more work with the first promise resolved

catch(e) {

// catch the error

}

به عبارت دیگر اگر هیچ کدام از promise ها resolves نشود،Promise.any() یک AggregateError نمایش می دهد.برای درک بهتر این ویژگی حتما پشنهاد می کنم با آن سروکله بزنید.

WeakRef

WeakRef خلاصه ای برای Weak References است و برای نگه داشتن weak reference به یک object دیگر استفاده می شود.به عبارت دیگر از garbage collector جلوگیری می کند.این ویژگی برای زمانی که ما نمی خواهیم یک object را برای همیشه در حافظه نگه داریم،مفید است.

اما چرا ما در وهله اول به WeakRef نیاز داریم؟ در جاوا اسکریپت ، تا زمانی که reference به یک object وجود داشته باشد ، object توسط garbage collector جمع نمی شود. بنابراین ، این object را در حافظه نگه می دارد ، که باعث می شود حافظه کمتری داشته باشید. اجرای WeakRef به شما امکان می دهد از این کار جلوگیری کنید.

شما می توانید یک Weak Reference ببا استفاده از new WeakRef ایجاد کنید و می توانید reference را با استفاده از deref() method بخوانید.به مثال ساده زیر توجه کنید

const largeObject = new WeakRef({
     name: "CacheMechanism",
     type: "Cache",
     implementation: "WeakRef"
});

largeObject.deref();
largeObject.deref().name;
largeObject.deref().type;
largeObject.deref().implementation;

const largeObject = new WeakRef({

name: "CacheMechanism",

type: "Cache",

implementation: "WeakRef"

});

largeObject.deref();

largeObject.deref().name;

largeObject.deref().type;

largeObject.deref().implementation;

توجه داشته باشید ، این مثال فقط برای نمایش نحوه کار این ویژگی است که نحوه دستیابی و خواندن weak references را نشان می دهد.

هنگام استفاده از آنها مراقب باشید. حتی اگر WeakRef در بعضی موارد مفید باشد ، TC39 توصیه می کند که در صورت امکان از آن اجتناب کنید. می توانید اینجا بخوانید که چرا باید در صورت امکان از آن اجتناب کنید.

نتیجه گیری

در این نوشته برخی از ویژگیهای جدیدی که با ES12 به JavaScript(جاوا اسکریپت) اضافه می شود،معرفی کردیم. برای اطلاعات بیشتر ، پیشنهاد می کنم نگاهی به ECMAScript finished proposals. داشته باشید. طبیعتا شما به عنوان یک برنامه نویس جاوا اسکریپت نیاز دارید که همیشه در مورد ویژگی های جدید جاوا اسکریپت اطلاعات داشته باشید.
همچنین اگر قصد دارید جاوا اسکریپت (javascript) را به صورت حرفه ای یاد بگیرید،پیشنهاد می کنم آموزش جامع و پروژه محور جاوا اسکریپت را که در آن چندین پروژه و بازی پیاده می شود را مشاهده کنید.

مطالب زیر را حتما مطالعه کنید

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

محمد میرجعفری گفت:

جولای 3, 2021 در 10:56 ق.ظ

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

پاسخ
- مهدی گفت:
  
  جولای 3, 2021 در 12:23 ب.ظ
  
  درود محمد عزیز
  سلامت باشی
  خوشحال میشیم پیشنهادهات رو در جهت رفع مشکلات بشنویم و عملی کنیم
  
  پاسخ

ویژگی های جدید ES12

Numeric Separators

()String.prototype.replaceAll

Logical Assignment Operators

(= &&)And and equals

(||=)Or or equals

(=؟؟)Question question equals

Promise.any

WeakRef

نتیجه گیری

مطالب زیر را حتما مطالعه کنید

آموزش کار با timing event ها

معرفی DOM به زبان ساده

constructor function در جاوااسکریپت

factory function در جاوا اسکریپت

this در جاوا اسکریپت (JavaScript)

تفاوت for in و for of

2 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ