آموزش متدهای تکرار آرایه در جاوا اسکریپت

در این بخش از آموزش طراحی سایت به آموزش متدهای تکرار در آرایه جاوا اسکریپت می پردازیم.

آموزش متدهای تکرار آرایه در جاوا اسکریپت

در این بخش از آموزش طراحی سایت به آموزش متدهای تکرار آرایه ها در جاوا اسکریپت می پر دازیم.

متدهای تکرار در آرایه جاوا اسکریپت، هر بار روی یک آیتم از آرایه انجام می شوند.

متد ()forEach

اولین متد از متدهای تکرار آرایه در زبان جاوا اسکریپت، متد ()forEach است. این متد هر بار برای یک عنصر آرایه یک تابع (function) را فراخوانی می کند. مثال زیر نحوه استفاده از این متد را نشان می دهد. در این مثال یک آرایه عددی با نام numbers تعریف شده است و با استفاده از متد ()forEach عناصر این آرایه را پیمایش و نمایش دهیم.

آموزش جاوا اسکریپت

خروجی مثال بالا به صورت زیر است:

آموزش javascript

دقت کنید که تابع برای انجام وظیفه خود سه مقدار به عنوان ورودی دریافت می کند:

  • مقدار آیتم
  • ایندکس آیتم
  • خود آرایه

مثال بالا فقط از پارامتر مقدار استفاده می کند که می تواند به شکل زیر بازنویسی شود:

آموزش جاوا اسکریپت

خروجی مثال بالا به شکل زیر است:

آموزش جاوا اسکریپت

متد ()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 است را پیدا کرده و برمی گرداند.

آموزش جاوا اسکریپت

خروجی مثال بالا به شکل زیر است:

آموزش جاوا اسکریپت
آموزش جاوا اسکریپت دوره آموزش طراحی سایت آموزش زبان javascript آموزش متدهای تکرار آرایه در جاوا اسکریپت