آموزش برنامه نویسی
خانه مقالات JavaScript توضیح متدهای Reduce ،Map و Filter در جاوا اسکریپت

توضیح متدهای Reduce ،Map و Filter در جاوا اسکریپت

نویسنده روح الله حسینی

در زبان برنامه نویسی جاوا اسکریپت راه‌های زیادی برای دستکاری آرایه‌ها وجود داره، استفاده از سه متد Reduce ،Map و Filter هم معمولا خیلی تو این زمینه به کار میاد.

هر سه متد یک وجه مشترک دارند که اون هم این هست که تو آرایه‌ای که بهشون می‌دیم می‌گردن و روی هر کدوم از آیتم‌های آرایه عملی رو انجام می‌دن.

عملی که انجام می‌دن می‌تونه یک تغییر یا یک محاسبه باشه که نتیجه هر تغییر یا محاسبه درون یک آرایه جدید به ما تحویل داده میشه.

 

Map

متد ()map با اعمال یک فانکشن روی هر کدوم از آیتم‌های آرایه، یک آرایه جدید برمی‌گردونه.

سینتکس

 

element = آیتمی از آرایه در هر دور

از بین پارامترهای فانکشن callback فقط پارامتر element الزامی هست. معمولا عملی روی مقدار این پارامتر انجام میشه و نتیجه در آرایه جدید ذخیره میشه.

مثال

در مثال زیر هر کدوم از آیتم‌های آرایه اول(numbers) دوبرابر و در آرایه جدیدمون(doubled) ذخیره میشه.

 

Filter

متد ()filter هر کدوم از آیتم‌های آرایه رو می‌گیره و با توجه به مقداری که فانکشن callback برای این آیتم برمی‌گردونه (true یا false) تصمیم می‌گیره که آیا آیتم رو در آرایه جدید قرار بده یا نه.

همون طور که احتمالا حدس زدید اگه فانکشن callback مقدار true رو برگردونه آیتم‌مون امتحانش رو گذرونده و میتونه جزو آیتم‌های آرایه جدید قرار بگیره. اما اگه این فانکشن مقدار false رو به عنوان نتیجه برگردونه اون آیتم رد می‌شه و جزو آیتم‌های آرایه جدید قرار نمی‌گیره.

سینتکس

 

سینتکس filter مشابه map هست با این تفاوت که فانکشن callback یا باید مقدار true برگردونه یا false که در نتیحه آیتم رو  بدون تغییر یا به آرایه جدید منتقل می‌کنه یا نمی‌کنه. در این فانکشن هم مثل قبلی فقط پارامتر element الزامی هست.

مثال‌ها

در مثال زیر اعداد فرد به اصطلاح “فیلتر” شدن و فقط اعداد زوج باقی موندن.

 

در مثال بعدی متد ()filter برای تفکیک دانش‌آموزانی که نمره 18 به بالا گرفتن استفاده شده.

 

 

Reduce

متد ()reduce مقادیر آرایه‌ای که بهش می‌دیم رو به یک مقدار کاهش میده. به این صورت که فانکشنی که براش تعریف می‌کنیم میاد و همه آیتم‌های آرایه رو به مقداری واحد تقلیل میده، یعنی نتیجه نهایی فقط یک value یا مقدار هست.

سینتکس

 

این متد دوتا پارامتر داره اولی فانکشن callback هست که برای هر کدوم از آیتم‌های آرایه فراخوانی میشه(که این فانکشن هم پارامترهای خودش رو داره) و پارامتر دوم هم مقداردهی اولیه هست که در ادامه توضیح داده میشه.

بسیارخب گفتیم فانکشن callback پارامترهای خودش رو داره که چهارتا هستن که معمولا دوتای اول فقط استفاده میشن:

  • پارامتر اول – مقدار برگشتی دور قبلی*
  • پارامتر دوم – هر آیتم آرایه
  • پارامتر سوم – شماره ایندکس آیتم کنونی
  • پارامتر چهارم – آرایه اصلی (اولی)

*اون مقداردهی اولیه که بالا بهش اشاره کردیم برای پارامتر اول فانکشن callback میتونه استفاده بشه چون در دور اول، پارامتر اول هنوز مقداری تو خودش نداره.

مثال‌ها

در مثال زیر همه اعداد موجود در آرایه رو با هم جمع کردیم و مقدار نهایی برگردونده شده.

 

نکته: مقدار اولیه result رو 0 قرار دادیم.

در مثال بعدی با استفاه متد ()reduce تعداد تکرار هر کلمه در آرایه رو در یک آبجکت ذخیره می‌کنیم و در آخر این آبجکت رو به عنوان نتیجه برمی‌گردونیم.

به آرگومان {} که به عنوان initialValue یا همان مقدار اولیه وارد شده دقت کنید. {} نشون دهنده یک آبجکت (شی) خالی هست و به اولین آرگومان فانکشن callback نسبت داده شده تا بتونیم نتیجه هر دور رو داخلش ذخیره کنیم.


منبع
JavaScript Map, Reduce, and Filter Explained with Examples – freeCodeCamp.org

مقالات مرتبط

کامنت بگذارید