آموزش ویژگی های ECMAScript 6 (جلسه 19) : متدهای جدید اضافه شده به آرایه ها

همونطور که اطلاع دارید در جلسه گذشته در مورد روشهای مختلف تعریف آرایه توضیحاتی رو قرار دادیم و شما رو با متدهای Array.of و Array.from آشنا کردیم. در این جلسه میخوایم با متدهای جدیدی که برای آرایه ها اضافه شده و امکاناتی که در اختیار ما قرار میدن، آشنا بشیم.

متدهای find و findIndex

جستجوی المنت و عضوی خاص در یک آرایه در ES5 دردسرهای زیادی داشت و راه مشخص و از پیش تعریف شده ای برای اون وجود نداشت و مجبور بودیم از متدهایی مانند indexOf و lastIndexOf استفاده کنیم و به سختی متوجه بشیم که اون عضو درون آرایه قرار دارد یا خیر. کتابخانه هایی مانند Lodash و Underscore امکاناتی رو به وجود آورده بودن که بتونین درون آرایه مورد نظرتون جستجو کنید. اما این روشها از پیش تعریف شده نبودند و به ابزار دیگه ای نیازمند بود. در ES6 دو متد بنام find و findIndex معرفی شده اند که بعضی از این مشکلات رو برطرف میکنن و به راحتی میتونین با استفاده از اونا درون آرایه مورد نظرتون به جستجو بپردازید.

برای متد find یک شرط رو قرار میدیم و این شرط برای هر کدام از اعضای آرایه بررسی میشه و اولین عضوی که در این شرایط صدق کنه برگشت داده میشه. کد زیر رو در نظر بگیرید:

میبینید که در خط 1 یک آرایه رو تعریف کردیم و تعدادی عدد رو درون اون قرار دادیم. بعد از اون در خط 3 با استفاده از متد find میخوایم اولین عضوی در آرایه که بزرگتر یا مساوی با 15 است رو به دست بیاریم. برای اینکار یک تابع بنام isBigEnough ساختیم و به متد find پاس دادیم. با اینکار به ازای هر عضو آرایه، تابع isBigEnough یکبار اجرا میشه و اگر شرط مورد نظر true بشه، اون عضو برگشت داده میشه. اگر هیچ کدام از اعضا در شرط مورد نظر صدق نکنند، undefined برگشت داده میشه. پس در کد بالا، عدد 20 در Console چاپ خواهد شد، چون اولین عضوی از آرایه است که بزرگتر از 15 می باشد. میتونیم کد بالا رو با استفاده از Arrow function بصورت خلاصه شده در بیاریم:

خروجی همانند حالت قبل خواهد بود. متد findIndex شبیه به متد find است با این تفاوت که بجای برگشت دادن عضو، اندیس اون رو برمی گردونه. مثلا در کد بالا اگر از findIndex استفاده کنیم، اندیس عضو 20 که همون 5 هست، برگشت داده میشه. کد اون بصورت زیر میشه:

به همین راحتی. برای متد findIndex اگر هیچ کدام از اعضا در شرط مورد نظر صدق نکنند، -1 برگشت داده میشه.در Ecmascript 2016 که همون ES7 هست یک متد بنام includes افزوده شده که وجود داشتن یک المنت در آرایه رو برای شما بررسی میکنه. مثلا برای اینکه بررسی کنید عدد 4 درون یک آرایه هست یا خیر، بصورت زیر عمل میکنیم:

همونطور که میبینید چون عدد 4 درون آرایه است، پس مقدار True درون Console چاپ میشه و اگر وجود نداشت، False برگشت داده میشه. چون این متد مربوط به ES7 هست بیشتر از این در موردش توضیح نمیدیم و خودتون میتونین در اینجا در مورد اون مطالعه کنید.

متد fill

با استفاده از متد fill میتونین آرایه مورد نظرتون رو بصورت کلی یا جزئی با یک عدد ثابت، پر و جایگزین کنید. این متد سه ورودی رو دریافت میکنه. ورودی اول اجباری و دو ورودی بعدی اختیاری هستند. کد زیر رو در نظر بگیرید:

میبینید که فقط از ورودی اول استفاده کردیم. با اینکار کل اعضای آرایه مورد نظر با عدد 2 جایگزین میشن و خروجی یک آرایه با 7 عدد 2 خواهد بود. ورودی های بعدی به ترتیب اندیس ابتدا و انتها رو مشخص میکنن و با استفاده از اونا میتونین فقط بخشی از یک آرایه رو با عدد مورد نظر پر کنید. مثلا کد زیر رو در نظر بگیرید:

میبینید که گفتیم از اندیس 3 تا اندیس 5 رو با عدد 2 جایگزین کن. با اینکار خروجی در Console بصورت زیر خواهد بود:

میبینید که اندیس های 3 و 4 با 2 جایگزین شده اند. متد بعدی که در این زمینه وجود داره، متد copyWithin هست که خودتون میتونین اون رو در اینجا مطالعه کنید.

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

یا علی