خواندن ۴ دقیقه·۵ سال پیش

ویژگی‌ های جدید اکماسکریپت ۲۰۱۹ - قسمت اول

هر سال با ارائه استانداردهای جدید اکماسکریپت، ویژگی های جدیدی هم به جاواسکریپت اضافه می‌شه. با انتشار ویژگی های جدید اکماسکریپت (در تابستان ۲۰۱۹) تصمیم گرفتم این مقاله رو بنویسم. ویژگی های نسخه جدید اکماسکریپت در نود ، و همچنین مرورگرهای کروم، فایرفاکس و سافاری قابل دسترس هستند و برای استفاده از این ویژگی ها تو نسخه های قدیمی تر می‌تونیم از Babel استفاده کنیم.

خوب بریم ببینیم ویژگی های جدید اکماسکریپت ۲۰۱۹ چی هست. برای درک بهتر هر بخش، یک مثال ساده هم ارائه شده. این مقاله قسمت دوم هم داره و تو هر قسمت ۳ تا از ویژگی های جدید رو معرفی می‌کنم.

قسمت دوم این مقاله:

https://virgool.io/@novonimo/ویژگی-های-جدید-اکماسکریپت-۲%DB%B0۱۹-قسمت-دوم-z2pwlav7ibtt

سایر ویژگی های که توی این دو مقاله نیاوردم رو می‌تونید مطالعه کنید:

Symbol description ، Sort stability ، ECMAScript as JSON superset ، JSON.stringify

ویژگی جدید Object.fromEntries

با معرفی ES2017 ویژگی Object.entries معرفی شد. این ویژگی در واقع یک تابع هست که آبجکت رو به لیست تبدیل می‌کنه. به مثال زیر دقت کنید. آبجکت سن دانش‌ آموزان رو در نظر بگیرید:

ویژگی Object.entries و تبدیل یک آبجکت به لیست

خوب این ویژگی کاربردی به ما اجازه میده تا بر روی آبجکت از ویژگی های یک لیست استفاده کنیم. مثلا از توابع مرتبه بالا map & reducer & filter استفاده کنیم.

فرض کنید می‌خواهیم دانشجوهایی که بزرگتر از ۲۱ سال هستند رو فیلتر کنیم. چون داده هامون رو به لیست تبدیل کردیم، با یک فیلتر ساده این کار رو انجام میدیم:

تبدیل یک آبجکت به لیست و انجام فیلتر بر روی لیست

حالا اگه بخواهیم نتیجه رو دوباره به صورت آبجکت داشته باشیم باید یک حلقه for بنویسیم:

اینجاست که ویژگی جدید جاواسکریپت به ما اجازه میده به راحتی این کار رو انجام بدیم و مارو از نوشتن حلقه بی نیاز می‌کنه:

ویژگی جدید Object.fromEntries و تبدیل لیست به آبجکت

خیلی ساده بود، نه ؟

نکته مهم دقت کنید که لیست و آبجکت ، ساختار داده ای جدا دارند. له لیست زیر دقت کنید که دوتا کلید با اسم تکراری داریم. وقتی این لیست به آبجکت تبدیل می‌شه ، این مقدار تکراری حذف میشه ( همونطور که می‌دونید، آبجکت نمی‌تونه دوتا کلید یکسان داشته باشه)

وضعیت پشتیبانی از این ویژگی جدید:

وضعیت پشتیبانی از ویژگی fromEntries در محیط های مختلف

ویژگی Array.prototype.flat

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

مثال زیر رو در نظر بگیرید. ابتدا با یک map به داده های دانش آموزان می‌رسیم.

استفاده از map برای ساختن لیستی از دانش آموزان

خروجی، یک لیست چند بعدی است. برای این که این لیست رو مسطح کنیم باید از حلقه و ... استفاده کنیم اما به لطف ویژگی جدید جاواسکریپت، با یک متد می‌تونیم این کارو به راحتی انجام بدیم:

استفاده از Array.prototype.flat برای مسطح سازی لیست های تو در تو

ویژگی جدید flat به ما این اجازه رو میده که با قرار دادن یک عدد، عمق این مسطح سازی رو هم تعیین کنیم. از این بهتر چی می‌خواستیم ؟‌ بدون نیاز به حلقه های تو در تو تونستیم داده هامون رو مسطح و یک بعدی کنیم. اونم با یک خط کد !

نکته مهم: مقدار آرگومان پیش فرض این متد، ۱ هست و در صورتی که مقداری براش قرار ندیم با عمق ۱ شروع به مسطح سازی داده ها می کنه!

خوب ممکنه این سوال پیش بیاد که اگه ندونیم ساختار داده ای چند بعدی هست ( بعضی مواقع ممکنه پیش بیاد) و بخواهیم از این متد استفاده کنیم چاره چیه‌؟

به سادگی و با قرار دادن یک Infinity در آرگومان این متد، اجازه می‌دیم که تا حداکثر عمق ممکن عملیات مسطح سازی داده هارو انجام بده.

وضعیت پشتیبانی از این ویژگی جدید:

وضعیت پشتیبانی از اویژگی Array.prototype.flat در مرورگرهای مختلف

ویژگی Optional catch binding

یکی دیگه از ویژگی های خیلی خوب استاندارد ES2019 همین استفاده دلخواه از آرگومان خطا در بدنه try-catch هست. قبلا هر بلاک catch که می‌نوشتیم باید یک آرگومان خطا هم بهش پاس می‌دادیم. خیلی وقت ها این آرگومان اصلا توی بدنه catch استفاده نمی‌شد، اما قرار دادنش اجباری بود. ویژگی جدید به ما این اجازه رو میده تا در صورتی که نخواستیم، از این آرگومان استفاده نکنیم. بلاک اول رو با بلاک دوم مقایسه کنید: