در این بخش از آموزش طراحی سایت به آموزش متدهای تکرار آرایه ها در جاوا اسکریپت می پر دازیم.
متدهای تکرار در آرایه جاوا اسکریپت، هر بار روی یک آیتم از آرایه انجام می شوند.
متد ()forEach
اولین متد از متدهای تکرار آرایه در زبان جاوا اسکریپت، متد ()forEach است. این متد هر بار برای یک عنصر آرایه یک تابع (function) را فراخوانی می کند. مثال زیر نحوه استفاده از این متد را نشان می دهد. در این مثال یک آرایه عددی با نام numbers تعریف شده است و با استفاده از متد ()forEach عناصر این آرایه را پیمایش و نمایش دهیم.
خروجی مثال بالا به صورت زیر است:
دقت کنید که تابع برای انجام وظیفه خود سه مقدار به عنوان ورودی دریافت می کند:
- مقدار آیتم
- ایندکس آیتم
- خود آرایه
مثال بالا فقط از پارامتر مقدار استفاده می کند که می تواند به شکل زیر بازنویسی شود:
خروجی مثال بالا به شکل زیر است:
متد ()forEach در تمام مرورگرها به غیر از اینترنت اکسپلورر 8 یا پایین تر پشتیبانی می شود.
متد ()map
متد ()map با اعمال یک تابع روی هر عنصر آرایه، یک آرایه ی جدید می سازد.این متد تابع فراخوانی شده را روی عنصرهای بدون مقدار آرایه انجام نمی دهد. دقت داشته باشید که متد ()map آرایه ی اصلی را تغییر نمی دهد. مثال زیر هر مقدار آرایه را در عدد 2 ضرب نموده و در آرایه جدید numbers2 قرار می دهد:
خروجی مثال بالا به شکل زیر است:
وقتی تابع برگشتی فقط ازپارامتر مقدار استفاده می کند، پارامترهای ایندکس و آرایه می توانند حذف شوند. مثال زیر استفاده از متد ()map با تنها یک پارامتر ورودی را نشان می دهد.
خروجی مثال بالا به شکل زیر است:
متد ()filter
متد ()filter با عنصرهای آرایه ای که یک تست را گذارندند، آرایه ای جدید می سازد. مثال زیر با عنصرهای با مقدار بزرگتر از 18 یک آرایه جدیدی درست می کند.
خروجی مثال بالا به شکل زیر است:
در مثال بالا تابع برگشتی فقط از پارامتر مقدار استفاده می کند و پارامترهای ایندکس و آرایه می توانند حذف شوند. تصویر زیر نحوه انجام این کار را نشان می دهد:
همانطور که می بینید خروجی زیر با خروجی مثال بالا که با استفاده از 3 مقدار ورودی نوشته شده بود برابر است.
متد ()reduce
متد ()reduce یک عملیات را بر روی هر عنصر آرایه انجام می دهد و در نهایت یک مقدار تکی تولید می کند و برگشت می دهد.
این مثال حاصل جمع تمام اعداد یک آرایه را محاسبه کرده و برمی گرداند.
خروجی مثال بالا به شکل زیر است. همانطور که می بینید مقدار 99 که حاصل تمام عناصر آرایه است در خروجی نمایش داده شده است.
همچنین مثال بالا را با ورودی های کمتر به شکل زیر می توان نوشت.
همانطور که می بینید خروجی زیر نیز مشابه خروجی مثال بالا می باشد.
متد ()reduce همچنین می تواند یک مقدار اولیه را بپذیرد و از آن در function استفاده نمایید.
همانطور که در خروجی مثال بالا می بینید، مقدار 100 که به عنوان یک مقدار اولیه به متد ()reduce ارسال شده است، به حاصل جمع عناصر آرایه افزوده شده و در نهایت مقدار 199 به عنوان خروجی برگشت داده است.
متد ()reduceRight
متد ()reduceRight یک تابع را روی هر عنصر آرایه اجرا می کند و در نهایت یک مقداری را تولید می کند. این متد برعکس متد ()reduce از راست به چپ روی مقادیر آرایه عمال می کند.
مثال زیر حاصل جمع تمام اعداد در یک آرایه را محاسبه و نشان می دهد.
خروجی مثال بالا به شکل زیر است:
دقت داشته باشید که تابع 4 ورودی دریافت می کند:
- مقدار کل (مقدار اولیه، مقدار برگشتی در دفعه ی قبل)
- مقدار آیتم
- ایندکس آیتم
- خود آرایه
اما مثال بالا از پارامترهای ایندکس و آرایه استفاده نمی کند و بنابراین می توانید آن را به صورت زیر بنویسید:
خروجی مثال بالا مشابه مثال قبل می باشد.
متد ()every
متد ()every بررسی می کند که آیا تمام مقادیر آرایه یک تست را پاس می کنند یا خیر؟ مثال زیر بررسی می کند که آیا تمام مقادیر آرایه از 18 بزرگتر هستند یا خیر.
خروجی مثال بالا به شکل زیر است:
اما مثل متدهای قبلی این متد نیز می تواند تنها با استفاده از یک ورودی فراخوانی گردد.
خروجی مثال بالا به شکل زیر است:
متد ()some
متد ()some بررسی می کند که آیا برخی از مقادیر آرایه یک تست را می گذرانند.
مثال زیر بررسی می کند که برخی مقادیر آرایه از 18 بزرگتر هستند یا خیر:
خروجی مثال بالا به شکل زیر است:
متد ()indexOf
متد ()indexOf در یک آرایه جاوا اسکریپت، یک عنصر را در آرایه جستجو کرده و موقعیت آن در آرایه را بر می گرداند.
نکته: اولین آیتم در موقعیت 0، دومین آیتم در موقعیت 1 و به همین ترتیب...
خروجی مثال بالا به شکل زیر است:
قاعده نوشتاری و استفاده از متد ()indexOf به شکل زیر است:
(indexOf(item, start
پارامتر ورودی item همان مقداری است که قصد جستجوی آن در آرایه را داریم. و پارامتر ورودی start موقعیت شروع جستجو در آرایه را مشخص می کند. متد ()indexOf در صورتی که موفق به پیدا کردن آیتم موردنظر نشود، مقدار 1- را به عنوان خروجی برمی گرداند.
اگر آیتم موردنظر بیشتر از یکبار در آرایه ظاهر شده باشد، متد ()indexOf اولین موقعیت ظاهر شدن آن آیتم را برمی گرداند.
متد ()lastIndexOf
متد ()lastIndexOf مانند متد ()indexOf می باشد، اما برعکس متد ()indexOf آخرین موقعیت ظاهر شدن یک عنصر را بر می گرداند. به عبارتی از انتهای آرایه شروع به جستجوی عنصر آرایه می کند.
خروجی مثال بالا به شکل زیر است.
متد ()find
متد ()find مقدار اولین عنصر آرایه را که یک تستی را پاس کند، بر می گرداند.
این مثال اولین عنصری که بزرگتر از 18 است را بر می گرداند:
خروجی مثال بالا به شکل زیر است:
متد ()findIndex
متد ()findIndex موقعیت اولین عنصر آرایه که یک عمیلات تست را گذرانده باشد را بر می گرداند.
این مثال ایندکس اولین عنصرکه بزرگتر از 18 است را پیدا کرده و برمی گرداند.
خروجی مثال بالا به شکل زیر است: