ویژگی های اضافه شده به Javascript در Ecmascript 2016 یا ES7



visibility  
mode_comment   ۲

همونطور که اطلاع دارید اخیرا دوره ES6 رو به پایان رسوندیم و ویژگی های مهمی که هر توسعه دهنده ای بهشون نیاز داشت رو بصورت کامل توضیح دادیم. در این مطلب قصد داریم ویژگی هایی که در ES7 به Javascript اضافه شده است رو بهتون آموزش بدیم.

همونطور که در جلسه اول دوره ES6 نیز بیان شد، ماه ژوئن هر سال نسخه جدیدی از Ecmascript منتشر میشه و تغییرات مورد نظر رو اعمال میکنه. در ژوئن سال 2016 نسخه Ecmascript 2016 یا ES7 منتشر شد و ویژگی های جدیدی رو اضافه کرد.

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

ویژگی هایی که در ES7 اضافه شده اند بصورت زیر هستند:

  • Array.prototype.insludes
  • عملگر ** برای به توان رساندن

متد جدید Array.prototype.includes

همونطور که اطلاع دارید ما زیاد از متد indexOf استفاده میکنیم. با استفاده از این متد میتونیم بفهمیم که یک المنت در آرایه وجود دارد یا خیر. کد زیر رو ببینید:

همونطور که میبینید یک آرایه با 3 عضو رو تعریف و در خط بعد با استفاده از متد indexOf وجود Ali رو در اون بررسی کردیم. خروجی که در Console به ما داده میشه، عدد 1 می باشد. این خروجی به معنی این هست که المنت مورد نظر در آرایه وجود دارد و index اون در آرایه برابر با 1 می باشد.

همونطور که میبینید اگر بخوایم بفهمیم که المنت مورد نظر در کجای آرایه قرار دارد، متد indexOf به خوبی این کار رو برای ما انجام میده. اما اگر بخوایم فقط بدونیم که آرایه مورد نظر وجود داره یا خیر، این متد بهترین گزینه برای انجام این تست نمی باشد. دلیل اونم این هست که وقتی میخوایم وجود یا عدم وجود یک المنت در آرایه رو بررسی کنیم، پاسخی که به ما داده میشه باید true یا false باشد و مقدار عددی برای ما خیلی گویا نمی باشد.

مثلا کد زیر رو در نظر بگیرید:

همونطور که مشاهده میکنید، در کدهای بالا از متد includes استفاده کرده و وجود Ali و person رو در آرایه بررسی کردیم. خروجی بررسی اول true و خروجی بررسی دوم false می باشد.

پارامترهای متد includes

این متد دو ورودی رو دریافت میکنه:

  • رشته یا مقدار مورد نظر که به دنبال اون هستیم
  • مشخص کردن موقعیت index برای شروع جستجو (این ورودی اختیاری می باشد)

کدهای زیر رو در نظر بگیرید:

همونطور که میبینید در کد بالا 3 مثال مختلف قرار داده شده است. در زیر توضیحات مربوط به هر کدام رو قرار میدیم:

  1. تفاوتی که در اینجا وجود دارد، موقعیت قرارگیری عدد 4 در آرایه می باشد. در مثال اول چون عدد 4 آخرین المنت آرایه می باشد، پس مدت زمان بیشتری طول میکشه تا بررسی انجام بشه و به همین دلیل 500 میلی ثانیه زمان برده است. اما در مثال دوم چون عدد 4 عضو اول آرایه می باشد، متد includes به سرعت مقدار true رو برگشت میده و دیگه نیازی نیست که المنت های دیگه آرایه بررسی بشوند.
  2. متد indexOf توانایی بررسی وجود NaN رو نداشت ولی includes این مشکل رو برطرف کرده است
  3. همونطور که میدونین در ES6 میتونیم یک عضو آرایه رو مشخص نکنیم و مثلا دو کاما رو پشت سر هم قرار بدیم. با اینکار یک المنت undefined در پشت صحنه ایجاد میشه. مشکلی که indexOf داشت این بود که نمیتونست این مورد رو متوجه بشه ولی includes این مشکل رو نیز برطرف کرده است.

با استفاده از ورودی دوم این متد نیز میتونین مشخص کنید که از کدام index آرایه، جستجو انجام بشه.

عملگر **

همونطور که میدونین ما با استفاده از + و - و ... میتونیم به سادگی اعداد مختلف رو جمع، تفریق و ... کنیم و مقدار مورد نظر رو به دست بیاریم.

در ES7 امکانی اضافه شده است که با استفاده از ** میتونیم یک عدد رو به توان عدد دیگری برسانیم. این کار قبلا با استفاده از Math.pow انجام میگرفت. مثلا کد زیر رو در نظر بگیرید:

میبینید که با استفاده از متد pow عدد 2 رو به توان 5 رسوندیم و عدد 32 در خروجی نمایش داده میشه. حالا اگر همین کار رو با استفاده از عملگر ** بخوایم انجام بدیم بصورت زیر خواهد بود:

میبینید که خروجی همانند گذشته 32 می باشد.

به همین راحتی.

در ES7 همین دو ویژگی اضافه شده است.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران
wpdan wpdan

ممنون از سایت فوق العادتون واقعا عالی هستید
من دنبال یه دوره جامع پلاگین نویسی هستم چیزی پیشنهاد می کنید

محمد اسفندیاری

خواهش میکنم
پلاگین نویسی برای وردپرس منظورتون هست؟

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.