Reduce در جاوا اسکریپت چیست و چگونه استفاده می‌ شود؟ + نمونه کد

متُد Reduce در جاوا اسکریپت نوعی تابع داخلی است که به کاربر این امکان را می‌دهد تا با اعمال تابع callback برای هر عنصر آرایه، آن را به مقداری واحد تبدیل کند. این متد در زبان برنامه نویسی جاوا اسکریپت قابلیت‌های بسیار قابل توجهی دارد و در سناریوهای مختلفی از آن استفاده می‌شود. در این مطلب از «مجله فرادرس» به این پرسش پاسخ داده می‌شود که متد Reduce در جاوا اسکریپت چیست و چندین مثال عملی نیز برای درک بهتر ارائه می‌شود.

متد Reduce در جاوا اسکریپت چیست؟

مُتد Reduce در جاوا اسکریپت جنبه‌ای اساسی از «برنامه نویسی تابعی» (Functional Programming) به حساب می‌آید. این متد، عناصر موجود در آرایه را از چپ به راست پردازش و مقدار حاصل را در یک «Accumulator» (انباشتگر| انباره) ذخیره می‌کند.

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

نکته مهم این است که Reduce متدی بدون جهش به حساب می‌آید، به این معنی که آرایه اصلی یا عناصر آن را تغییر نمی‌دهد. در عوض، مقدار مد نظر را متناسب با عملیات محاسبه می‌کند و آن را در انباشت کننده نگه می‌دارد و همزمان متغیرهای اصلی را بدون تغییر می‌گذارد. این ویژگی قدرتمند، برنامه‌نویسان جاوا اسکریپت را قادر می‌سازد تا با حفظ یکپارچگی داده‌های اصلی، آرایه را به مقداری واحد تبدیل کنند.

سینتکس Reduce در جاوا اسکریپت

«سینتکس» (Syntax) متد Reduce در Javascript به صورت قطعه کد زیر است:

1array.reduce(callbackfn(total, curValue, curIndex, array), initialValue)

در ادامه هر یک از اجرای سینتکس Reduce در قالب فهرست شرح داده شده‌اند.

• callbackfn نوعی پارامتر اجباری به حساب می‌آید که نشان دهنده تابعی است که باید روی هر عنصر آرایه اجرا شود. این پارامتر، خود ۴ آرگومان زیر را نیاز دارد:
  • total : این پارامتری اجباری است که در ابتدا مقدار initialValue را نگه می‌دارد و سپس آخرین مقدار بازگشتی را از تابع ذخیره می‌کند.
  • CurValue : این پارامتر هم اجباری است و مقدار عنصر فعلی در حال پردازش را نگه می‌دارد.
  • curIndex : این مورد، پارامتری اختیاری به حساب می‌آید که اندیس مقدار فعلی در حال پردازش را نگه می‌دارد.
  • array : این هم پارامتری اختیاری محسوب می‌شود و نشان دهنده شی کامل آرایه‌ای است که عملیات روی آن انجام می‌شود.
• initialValueنیز نوعی پارامتر اختیاری است که مقدار اولیه ارسال شده به تابع را نگه می‌دارد.

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

مفهوم Reducer و Accumulator

عبارات «کاهنده» (Reducer) و «انباشت کننده» (Accumulator) مفاهیم کلیدی هنگام کار با متد Reducer در جاوا اسکریپت هستند.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

• Reducer: به معنی کاهش دهنده یا کاهنده است و به عملیات یا عملی اطلاق می‌شود که بر روی هر عنصر آرایه در طول فرآیند Reduce اعمال می‌شود. در واقع Reducer مسئول کاهش کل آرایه به مقداری واحد با اجرای تابعی خاص بر روی هر عنصر است.
• Accumulator: این عبارت هم به معنی انباشته کننده و جزء مهمی در متد Reduce است. آکومولاتور در واقع متغیر یا ظرفی را نشان می‌دهد که نتایج میانی و نهایی را با اعمال تابع کاهنده به هر عنصر آرایه در خود نگه می‌دارد. در ابتدا، آکومولاتور ممکن است مقدار اولیه اختیاری داشته باشد و سپس آخرین مقدار بازگشتی را از تابع کاهنده ذخیره می‌کند.

درک نقش‌های کاهش‌ دهنده و انباشت کننده هنگام استفاده از متد Reducer در جاوا اسکریپت بسیار مهم است. با تعریف تابع کاهنده مناسب و مدیریت مؤثر انباشته کننده، می‌توان عملیات قدرتمندی را انجام داد.

ویژگی های Reduce در جاوا اسکریپت

متد Reduce در جاوا اسکریپت ویژگی‌های زیر را دارد:

• ارائه مقدار اولیه: اگر مقدار اولیه مشخص شود، انباشت کننده روی آن مقدار تنظیم خواهد شد و curValue معادل اولین مقدار آرایه خواهد بود.
• عدم ارائه مقدار اولیه: اگر مقدار initialValue  یا همان مقدار اولیه حذف شود، انباشت کننده روی عنصر اول آرایه تنظیم شده و initialValueمعادل مقدار عنصر دوم خواهد بود.
• مدیریت آرایه‌های خالی: اگر Reduce() روی آرایه خالی بدون ارائه مقدار اولیه اعمال شود، TypeError ایجاد خواهد شد.
• عدم اجرای callbackfn برای آرایه‌های خالی یا تک عنصری: اگر آرایه خالی و FillValue ارائه شده باشد، یا اگر آرایه شامل تنها یک عنصر به همراه initialValueباشد، متد Reduce()به سادگی همان مقدار را بدون اجرای تابع callback برمی‌گرداند.

درک این ویژگی‌ها به برنامه‌ نویس کمک می‌کند تا به طور موثر از متد Reduce()استفاده کند و وی را قادر می‌سازد تا بتواند سناریوهای مختلف را مدیریت کند.

مثال Reduce در جاوا اسکریپت

در بخش بالا سینتکس متد Reduce و رسالت آن در کدنویسی جاوا اسکریپت بیان شد، در این بخش برای درک بهتر، مفهوم Reduce در قالب چند مثال همراه با توضیحات مربوطه ارائه شده است.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

مثال جمع همه مقادیر آرایه با Reduce در Javascript

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

1let num = [5, 9, 12, 24, 67]
2
3let sum = num.reduce(function (accumulator, curValue) {
4
5  return accumulator + curValue
6
7}, 0)
8
9console.log(sum)

حال با اجرای کدهای فوق در کنسول، خروجی به صورت زیر به نمایش در خواهد آمد:

کدهای فوق را همچنین می‌توان با «توابع پیکان» (Arrow Functions) به صورت زیر نوشت که خروجی آن با خروجی کد بالا یکسان است.

1let num = [5, 9, 12, 24, 67]
2
3let sum = num.reduce((accumulator, curValue) => accumulator + curValue, 0)
4
5console.log(sum)

مثال جمع کردن مقادیر در آرایه با استفاده از Array Reduce

برای محاسبه مجموع مقادیر از آرایه‌ای از اشیا، لازم است مقدار اولیه برای متد Reduce() ارائه شود. با انجام این کار، تمام عناصر آرایه به وسیله تابع پردازش شده و نتیجه مطلوب حاصل می‌شود. قطعه کد مثال مذکور به صورت زیر است:

1let initialValue = 0
2
3let obj = [{n: 5}, {n: 9}, {n: 13}, {n: 25}, {n: 40}]
4
5let sum = obj.reduce(function (accumulator, curValue) {
6
7    return accumulator + curValue.n
8
9}, initialValue)
10
11console.log(sum)

با اجرای قطعه کد بالا در کنسول، خروجی به صورت زیر به نمایش درخواهد آمد:

مثال مسطح کردن آرایه ای از آرایه ها با متد Reduce در جاوا اسکریپت

سناریویی را در نظر بگیرید که در آن آرایه‌ای از آرایه‌ها وجود دارد و هدف مسطح کردن آن به یک آرایه واحد است. کد زیر نحوه دستیابی به این هدف را با استفاده از متد Reduce در Javascript نشان می‌دهد:

1let mulArray = [[3, 5], [1, 7], [12, 9]]
2
3let newArray = mulArray.reduce(function(accumulator, curValue) {
4
5    return accumulator.concat(curValue)
6
7  },[]
8
9)
10
11console.log(newArray)

با اجرای کد بالا در کنسول جاوا اسکریپت، خروجی آن به صورت زیر خواهد بود:

در مثال فوق، متغیر mulArray آرایه‌ای متشکل از چندین آرایه است. در کدهای بالا، متد Reduce() به mulArrayاعمال شده و تابع به عنوان اولین آرگومان ارسال خواهد شد. این تابع callback دو پارامتر accumulator و curValue را می‌پذیرد. در تابع callback، از متد concat() برای الحاق آرایه curValueبا آرایه آکومولاتور استفاده شده است که با این کار آرایه مسطح مورد نظر ساخته خواهد شد.

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

کلیک کنید

دومین آرگومان ارسال شده به Reduced() آرایه‌ خالی [] است که به عنوان مقدار اولیه آکومولاتور عمل می‌کند. این آرگومان تضمین خواهد کرد که اولین تکرار با آرایه خالی شروع می‌شود. در نهایت، آرایه مسطح به دست آمده در متغیر newArray ذخیره خواهد شد و در کنسول به ثبت می‌رسد.

مثال شمارش نمونه ها در شی با استفاده از Reduce در Javascript

در این مثال، آرایه‌ای به نام myCars وجود دارد که شامل نام‌های مختلف خودرو است. در این مثال از متد Reduce در جاوا اسکریپت برای شمارش تعداد دفعاتی استفاده خواهد شد که نام هر خودرو در آرایه ظاهر می‌شود. قطعه کد آن به صورت زیر است.