ویژگی های جدید جاوا اسکریپت 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 صرفاً برای بهبود خوانایی است و روی عملکرد برنامه شما تأثیر منفی یا مثبتی نمی گذارد.
1 2 3 4 5 |
// previous syntax before ES12 const number = 92145723; // new syntax coming with ES12 const number = 92_145_723; |
()String.prototype.replaceAll
method جدید replaceAll تغییرات اساسی را ایجاد نمی کند اما یک ویژگی جالب و خوب است.همانطور که از نام آن پیدا است در یک رشته تمامی occurrences را جایگزین می کند
1 2 3 |
// 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 ) را انجام می دهد.به مثال زیر توجه کنید:
1 2 3 4 |
let first = 10; let second = 15; first &&= second; |
معادل عبارت فوق first && (first = second)
است.اگر درک این operator مشکل است ، به صورت زیر به آن نگاه کنید:
1 2 3 4 5 6 |
let first = 10; let second = 15; if (first) { first = second; } |
قطعه کد بالا نشان میدهد که تا قبل از ES2021 باید چطور عمل می کردید.
(||=)Or or equals
این operator دقیقا در مقابل =
&&
است.logical OR تنها در صورتی که سمت چپ یک مقدار falsy باشد،تخصیص(assignment ) را انجام می دهد.به مثال زیر توجه کنید:
1 2 3 4 |
let first = null; let second = 15; first ||= second; // first is 15 now |
معادل عبارت فوق first || (first = second) است.یعنی تنها در صورتی که متغیر first
یک falsy value باشد مقدار متغیر second
به آن اختصاص داده می شود.
معادل کد بالا با استفاده از if statement به صورت زیر است:
1 2 3 4 5 6 |
let first = null; let second = 15; if (!first) { first = second; } |
(=؟؟)Question question equals
مشابه Nullish Coalescing Operator تخصیص تنها در زمانی اتفاق می افتد که سمت چپ nullish
یا undefined باشد
1 2 3 4 |
let first = null; let second = 15; first ??= second; |
first ?? (first = second) معادل قطعه کد بالاست. تنها در صورتی که مقدار متغیر first
یکی از مقادیر “null” یا “undefined” باشد،مقدار متغیر second به آن اختصاص خواهد یافت.
معادل کد بالا با استفاده از if statement به صورت زیر است:
1 2 3 4 5 6 |
let first = null; let second = 15; if (first == null || first == undefined) { first = second; } |
Promise.any
ما یک Promise method جدید به نام ()
Promise.any
داریم.این method چندین promises را دریافت می کند و هر زمانی که یک کدام از promises ها resolves شود،resolved می شود.
1 2 3 4 5 6 7 |
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 بخوانید.به مثال ساده زیر توجه کنید
1 2 3 4 5 6 7 8 9 10 |
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) را به صورت حرفه ای یاد بگیرید،پیشنهاد می کنم آموزش جامع و پروژه محور جاوا اسکریپت را که در آن چندین پروژه و بازی پیاده می شود را مشاهده کنید.
مطالب زیر را حتما مطالعه کنید
آموزش کار با timing event ها
معرفی DOM به زبان ساده
constructor function در جاوااسکریپت
factory function در جاوا اسکریپت
this در جاوا اسکریپت (JavaScript)
تفاوت for in و for of
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سایتتون واقعا عالیه خسته نباشید میگم محتوا خیلی خوبی داره فقط یکم بهم ریختس
مرسی دمتون گرم
محمد علی میرجعفری
درود محمد عزیز
سلامت باشی
خوشحال میشیم پیشنهادهات رو در جهت رفع مشکلات بشنویم و عملی کنیم