آموزش ساده و کاربردی متد Reduce برای آرایه‌ها در Javascript



visibility  
mode_comment   ۰

آموزش ساده و کاربردی متد Reduce برای آرایه‌ها در Javascript

در این مطلب میخوام متد Reduce که یک متد کاربردی برای آرایه‌ها هست رو بهتون آموزش بدم و ببینیم که چه کاربردی داره و چه مواقعی میتونیم از اون استفاده کنیم.

از ES5 به بعد متدهای زیادی برای مدیریت کردن آرایه‌ها در اختیار توسعه‌دهندگان Javascript قرار گرفته است. خیلی از این متدها به Best practice تبدیل شدن و همه ما همیشه از اونا در کدهایی که مینویسیم استفاده میکنیم و از قدرت اونا بهره میبریم.

مثلا متدهای map و filter برای آرایه‌ها، دو متدی هستند که تقریبا همه به تعداد زیاد از اونا در کدهاشون استفاده میکنن. حتما میدونین که هر کدام از این متدها مشکلی رو برای ما ساده‌سازی میکنن و میتونیم به راحتی با استفاده از اونا کدهای مورد نظرمون رو بنویسیم.

یک متد دیگه وجود داره که کاربرد و اهمیت اون مثل map و filter هست ولی افراد کمتری سراغ اون رفتن و بهش توجه خاصی نمیشه. شاید وقتی اون رو یاد بگیرید بیشتر از 2 متد filter و map از اونا استفاده کنید. این متدی که در مورد اون صحبت میکنیم، متد Reduce هست. در ابتدا تصاویر زیر رو ببینید تا فرق متد map‌ و filter و reduce‌ رو بهتر متوجه بشید. متد filter‌ بصورت زیر عمل میکنه:متد filter

همونطور که میبینید میوه‌هایی که در سمت چپ هستن رو فیلتر کردیم و فقط اونایی که پرتغال هستن فیلتر شدن و در سمت راست قرار گرفتن.

متد map بصورت زیر عمل میکنه:متد map

میبینید که هر کدام از میوه‌ها رو تغییری درونشون ایجاد کردیم و در سمت راست قرار گرفتن.

متد Reduce هم بصورت زیر عمل میکنه:متد reduce

میبینید که ترکیبی از 3 میوه رو با هم به وجود آوردیم و در نهایت فقط یک کاسه میوه داریم. به همین سادگی. این تصاویر از این آموزش گرفته شده‌اند.

بیشتر کسانی که از Javascript استفاده میکنن یا به سختی با متد Reduce کار میکنن و یا اینکه در کل بیخیال اون شدن و کلا اون رو کنار گذاشتن و با استفاده از چیزهای دیگه مشکلشون رو برطرف میکنن.

یکی از دلایلی که شاید باعث شده متد Reduce کمتر شناخته بشه و مورد استفاده قرار بگیره اینه که اسم اون یک مقدار گول‌زننده هست و آدم رو به اشتباه میندازه. معروفترین مثالی که با استفاده از اون متد Reduce رو میخوان برای اولین بار یاد بدن مثال زیر هست:

مثال بالا نسبتا بصورت ساده نشون میده که reduce‌ چگونه کار میکنه. میبینید که متد Reduce‌ برای آرایه مورد نظر استفاده کردیم. دو آرگومان برای متد Reduce مشخص کردیم که اولی تابعی هست که برای تک تک آیتم‌های آرایه اجرا میشه و دومی هم مقدار اولیه هست که در Reducer از اون استفاده میشه.

2 آرگومان به تابع اول فرستاده میشه:

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
  1. accumulator یا مقداری که از اجرای قبلی تابع بدست اومده (اگر برای بار اول باشه، این مقدار همون مقدار اولیه یا 1 خواهد بود)
  2. currentItem هم مقدار آیتم فعلی آرایه رو مشخص میکنه که مثلا بار اول 1 و بار دوم 2 و ... هست

مقداری که متد Reduce در نهایت در اختیار ما قرار میده همون مقداری هست که تابع درونی در آخرین بار اجرا شدن، خروجی میده.

در مثال بالا متد Reduce از مقدار 1 شروع میکنه و در هر بار اجرای تابع درونی، مقدار جمع شده قبلی رو با آیتم فعلی جمع میکنه. پس در نهایت 1 و 2 و 3 و 4 با هم جمع شده و مقدار 11 برگشت داده میشه و در متغیر sum قرار میگیره.

حالا سوالی که شاید از خودتون بپرسید اینه که کاربرد Reducer همینه و فقط برای اینکار از اون استفاده میکنن؟!

در جواب این پرسش باید بگیم که این مثالی هست که با استفاده از اون روش کار متد Reduce توضیح داده میشه ولی با استفاده از این متد کارهای پیچیده و جالبی رو میتونین انجام بدین که بدون اون انجامش سخت خواهد بود. در ادامه مثالهای واقعی‌تر و کاربردی‌تر رو در اختیارتون قرار میدم تا بهتر با کاربرد این متد آشنا بشید.

info نکته :

متد Reduce زمانی کاربرد داره که شما میخواید یک آرایه رو به یک چیز دیگری که آرایه نیست تبدیل کنید. یعنی آرایه رو تجزیه و تحلیل کنید و با استفاده از اون یک چیز دیگه‌ای رو بسازید و یا اینکه یک خروجی خاص رو بدست بیارید که در برنامتون به اون احتیاج دارید.

همونطور که در مثال بالا دیدید یک آرایه رو تبدیل به یک عدد کردیم که مجموع همه اعضای آرایه هست. پس همونطور که از اسم reducer برداشت میشه، ما آرایه مورد نظر رو کاهش دادیم و اون رو به یک عدد تبدیل کردیم. پس reducer در کل به معنای کاهش دهنده هست. در مثال بالا خروجی یک عدد ساده بود و همیشه اینطور نیست و ممکنه که چیزهای پیچیده‌تر و خاصتری رو به وجود بیاریم.

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

همونطور که میبینید در ابتدا یک متغیر بنام trips داریم که آرایه‌ای از Object ها هست و مسافت طی شد توسط روشهای مختلف رو مشخص میکنه. مثلا آیتم اول اون میگه که توسط car یا ماشین، 42 واحد حرکت کردیم. همونطور که در انتها و خط آخر مشخص هست، خروجی یک Object هست و مانند مثال قبلی یک عدد خالی نیست و این شئ، مجموع کل انواع مختلف رو مشخص میکنه. مثلا میگه که در کل 132 واحد با استفاده از ماشین حرکت کردیم.

پس همونطور که میبینیم با استفاده از Reducer میتونیم کارهای جالبی رو انجام بدیم.

متد Reduce یک تبدیل‌کننده است

این متد یک آرایه رو میگیره و اون رو به چیز دیگری تبدیل میکنه. فهمیدن این موضوع نه تنها به فهم این متد کمک میکنه بلکه به شما کمک میکنه که بفهمید چه مواقعی به این متد نیاز دارید و میتونین با استفاده از اون مشکلتون رو برطرف کنید. مثالهای زیر رو ببینید:

  • فرض کنید که یک آرایه از کاربرها دارید و میخواید جمله‌ای مثل حسن و محمد و علی برای شما دعوت دوستی ارسال کرده‌اند رو از روی آرایه به وجود بیارید. متد Reduce به خوبی اینکار رو برای شما انجام میده.
  • در دسته‌بندی ها Reducer خیلی بدردتون میخوره و میتونین از اون بهره ببرید.
  • و مثالهای بسیار دیگر ...

امیدوارم که این توضیحات بهتون در فهم بیشتر متد Reduce کمک کرده باشه و بتونین از اون در کدنویسی‌هاتون استفاده کنید و گامی به سمت حرفه‌ای‌تر شدن بردارید.

اگر شما هم مثالی برای استفاده از Reducer دارید خوشحال میشم که در بخش نظرات با من و دیگر کاربران به اشتراک بذارید.

نتیجه‌گیری

در این مطلب متد Reduce رو با مثال‌های کاربردی و تصاویر گویا آموزش دادیم و مواردی که Reducer در اونا به ما کمک میکنه رو بیان کردیم.

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

نیاز به لاگین

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