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 در جاوا اسکریپت برای شمارش تعداد دفعاتی استفاده خواهد شد که نام هر خودرو در آرایه ظاهر می‌شود. قطعه کد آن به صورت زیر است.

1let myCars = ['Mercedes-Benz', 'Jeep', 'Ferrari', 'Lamborghini', 'Mercedes-Benz', 'BMW', 'Ferrari']
2
3let instances = myCars.reduce(function (allCars, car) {
4
5  if (car in allCars) {
6
7    allCars[car]++
8
9  }
10
11  else {
12
13    allCars[car] = 1
14
15  }
16
17  return allCars
18
19}, {})
20
21console.log(instances)

با اجرای کد فوق خروجی در کنسول به صورت زیر خواهد بود:

در کد فوق، متد Reduce() به myCars اعمال و تابع callback به عنوان اولین آرگومان ارسال شده است. همچنین تابع callbackدو پارامتر allCars و car را می‌گیرد.

در داخل تابع callback، با استفاده از عملگر in بررسی می‌شود که آیا خودرو قبلاً یک ویژگی در شی allCarsبوده است یا خیر و اگر این‌طور باشد، تعداد مربوط به خودروی مد نظر افزایش داده می‌شود. اگر وجود نداشت، به شی allCarsاضافه می‌شود و تعداد را روی 1 قرار خواهد داد.

دومین آرگومان ارسال شده به Reduced() شی خالی {} است که به عنوان مقدار اولیه برای شی allCarsعمل می‌کند. در نهایت، شی به‌ دست‌ آمده با تعداد نام خودرو در متغیر نمونه‌ها ذخیره و در کنسول ثبت می‌شود.

مثال گروه بندی اشیا با Reduce در جاوا اسکریپت

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

1let student = [
2
3  { name: 'David', age: 23, hobby: 'fishing' },
4
5  { name: 'Rachel', age: 25, hobby: 'cooking' },
6
7  { name: 'Rahul', age: 22, hobby: 'fishing' }
8
9];
10
11function myFunc(obj, prop) {
12
13  return obj.reduce(function (acc, item) {
14
15    let key = item[prop]
16
17    if (!acc[key]) {
18
19      acc[key] = []
20
21    }
22
23    acc[key].push(item)
24
25    return acc
26
27  }, {})
28
29}
30
31let groupedStudent = myFunc(student, 'hobby')
32
33console.log(groupedStudent)

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

در کد فوق، تابعی به نام groupObjectsByProperty تعریف شده است که آرایه obj و ویژگی prop را به عنوان پارامتر می‌گیرد. در داخل تابع، متد Reduce() روی آرایه objاعمال شده است. تابع callbackنیز ۲ پارامتر acc (accumulator) و item را می‌گیرد.

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

کلیک کنید

در تابع callback، مقدار ویژگی propاز هر شی استخراج و به متغیر key اختصاص داده شده است. اگر keyبه عنوان ویژگی در شی acc وجود نداشته باشد، به صورت آرایه خالی مقداردهی اولیه خواهد شد. سپس آیتم فعلی به آرایه keyمربوطه push داده خواهد شد. در نهایت، شی accبازگردانده می‌شود که اکنون شامل اشیای گروه‌بندی شده با مقدار خاصیت مشخص شده است.

مثال حذف موارد تکراری با متد Reduce

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

1let array = [2, 5, 7, 5, 12, 9, 7, 5, 4, 3, 5, 2, 4, 15]
2
3let newArray = array.reduce(function (accumulator, curValue) {
4
5  if (accumulator.indexOf(curValue) === -1) {
6
7    accumulator.push(curValue)
8
9  }
10
11  return accumulator
12
13}, [])
14
15console.log(newArray)

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

در قطعه کد بالا، متد Reduce() به آرایه اعمال و تابع callbackبه عنوان اولین آرگومان ارسال شده است. در داخل تابع callback، با استفاده از متد indexOf()‎ بررسی می‌شود که آیا CurValue در آرایه accumulator وجود دارد یا خیر و اگر وجود نداشته باشد (1- را برمی‌گرداند)، CurValueرا به آرایه آکومولاتور push می‌دهد.

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

کلیک کنید

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

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

Reduce در جاوا اسکریپت «ES5» به صورت زیر استفاده می‌شود:

1var euros = [29.76, 41.85, 46.5]; 
2
3var sum = euros.reduce( function(total, amount){
4  return total + amount
5});
6
7sum // 118.11

در مثال بالا به جای کلمه کلیدی var از const استفاده شده و بعد از پارامترها، عبارتfunction با "fat arrow" (=>) جایگزین و عبارت return از آن حذف شده است. این شیوه نوشتن متد Reduce در ES5 است و با این حال سینتکس «جاوا اسکریپت ES6» برای این هدف مختصرتر و واجد خطای کمتری خواهد بود.

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

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

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

کلیک کنید

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

1const euros = [29.76, 41.85, 46.5];
2
3const average = euros.reduce((total, amount, index, array) => {
4  total += amount;
5  if( index === array.length-1) { 
6    return total/array.length;
7  }else { 
8    return total;
9  }
10});
11
12average // 39.37

Map و Filter به عنوان کاهش در جاوا اسکریپت

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

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

کلیک کنید

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

به عنوان نمونه، در ادامه آرایه‌ای از مقادیر به آرایه دیگری کاهش داده خواهد شد که در آن هر مقدار آرایه ۲ برابر می‌شود. برای رسیدن به این هدف، باید مقدار اولیه برای آکومولاتور تعیین شود که در این مورد آرایه‌ای خالی خواهد بود. مقدار اولیه نشان دهنده مقدار شروع پارامتر کل در هنگام شروع کار عملیات کاهش است. می‌توان مقدار اولیه را با اضافه کردن کاما (, ) و سپس مقدار اولیه دلخواه خود در داخل پرانتز بعد از {} تنظیم کرد. درست مانند مثال زیر:

1const average = euros.reduce((total, amount, index, array) => {
2  total += amount
3  return total/array.length
4}, 0);

در مثال‌های قبلی، مقدار اولیه حذف و به جای آن مقداری پیش‌فرض total به آن اختصاص یافته بود. با این حال، زمانی که مقدار اولیه روی آرایه‌ای خالی قرار گیرد، می‌توان هر مقداری را به totalاختصاص داد. اگر هدف این باشد که آرایه‌ای از مقادیر را به آرایه دیگری کاهش دهیم که در آن هر مقدار دو برابر می‌شود، باید مقدار 2* را به آرایه totalاعمال یا به اصطلاح push کرد. مثال زیر این مفهوم را می‌رساند.

1const euros = [29.76, 41.85, 46.5];
2
3const doubled = euros.reduce((total, amount) => {
4  total.push(amount * 2);
5  return total;
6}, []);
7
8doubled // [59.52, 83.7, 93]

در مثال بالا با استفاده از متد Reduce در جاوا اسکریپت، با موفقیت آرایه‌ای جدید ایجاد شد که در آن هر مقدار ۲ برابر می‌شود. با این حال، می‌توان قدمی فراتر رفت و «پالایش» (فیلترینگ| Filtering) را اعمال کرد تا اعداد خاصی از دو برابر شدن مصون بمانند. این کار را می‌توان با ترکیب دستور if در Reducer انجام داد. مثال زیر این موضوع را نشان می‌دهد.

1const euro = [29.76, 41.85, 46.5];
2
3const above30 = euro.reduce((total, amount) => {
4  if (amount > 30) {
5    total.push(amount);
6  }
7  return total;
8}, []);
9
10above30 // [ 41.85, 46.5 ]

عملیات «Map » و «Filter » نیز با استفاده از متد Reduce در جاوا اسکریپت قابل دستیابی هستند. با این حال، در مورد این مثال‌ها، استفاده مستقیم از عملیات Mapو Filterساده‌تر خواهد بود. قدرت واقعی متد Reduce زمانی است که کاربر نیاز به ترکیب عملیات Mapو Filterرا با هم دارد، به خصوص زمانی که کاربر با مقادیر زیادی داده سروکار داشته باشد.

وقتی عملیات Mapو Filterبا هم ترکیب می‌شوند، اساساً عملیات ۲ بار انجام خواهند شد. ابتدا هر مقدار را Filter می‌کند و سپس عملیات Mapروی آن‌ها انجام می‌گیرد. با این حال، با متد Reduce در Javascript، می‌توان عملیات ذکر شده را هم‌زمان انجام داد. در مثال‌های ساده و پیش پا افتاده به دلیل افزایش پیچیدگی کدها، استفاده از متد Reduce برای انجام عملیات Mapو Filterتوصیه نمی‌شود ولی در سناریوهای پیچیده‌تر و ترکیبی می‌توان از کارایی متد Reduce برای انجام این کار استفاده کرد.

Piping با متد Reduce

یکی از جنبه‌های جذاب متد Reduce در جاوا اسکریپت، توانایی آن در کار نه تنها با اعداد و رشته‌ها، بلکه با توابع در جاوا اسکریپت است. سناریویی را در نظر بگیرید که در آن مجموعه‌ای از توابع پایه ریاضی وجود دارند.

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

کلیک کنید

این توابع کاربر را قادر می‌سازند تا عملیاتی مانند افزایش، کاهش، دو برابر کردن و نصف کردن مقداری را انجام دهد. قطعه کد زیر این موضوع را نشان می‌دهد:

1function increment(input) { return input + 1;}
2
3function decrement(input) { return input — 1; }
4
5function double(input) { return input * 2; }
6
7function halve(input) { return input / 2; }

فرض بر این است که کاربر می‌خواهد مقداری را افزایش، دو برابر و سپس کاهش دهد. به جای اینکه هر بار یک تابع جداگانه بنویسد، می‌تواند با استفاده از متد Reduce، نوعی «خط لوله» (Pipeline) قابل استفاده مجدد ایجاد کند. در این زمینه، pipeline دنباله‌ای از توابع است که یک مقدار اولیه را به یک مقدار نهایی تبدیل می‌کند. pipelineدر مثال فرضی این بخش شامل سه تابع افزایش، دو برابر و کاهش با رعایت ترتیب ذکر شده است.

با استفاده از Reduce ، می‌توان pipelineایجاد کرد که مقداری اولیه می‌گیرد و هر تابع را در دنباله اعمال خواهد کرد و مقدار را گام به گام با توجه به عملیات موردنظر تغییر می‌دهد. این رویکرد نیاز به بازنویسی توابع را در هر بار حذف می‌کند و راه‌حل انعطاف‌پذیرتر و قابل استفاده مجدد را ارائه می‌دهد.

1let pipeline = [increment, double, decrement];

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

1const result = pipeline.reduce(function(total, func) {
2  return func(total);
3}, 1);
4
5result // 3

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

فیلم آموزش پروژه محور جاوا اسکریپت – پیاده سازی سبد خرید فروشگاهی با JavaScript در فرادرس

کلیک کنید

به عنوان مثال، اگر نیاز کاربر شامل سه بار کاهش، به دنبال آن ۲ برابر کردن، کاهش مجدد آن و در نهایت نصف کردن آن باشد، می‌توان به سادگی pipelineرا با تنظیم مجدد توابع بر اساس آن اصلاح کرد. قطعه کد زیر برای بیان این مفهوم است:

1var pipeline = [
2
3  increment,
4  
5  increment,
6  
7  increment,
8  
9  double,
10  
11  decrement,
12  
13  halve
14  
15];

اشتباهات رایج در استفاده از Reduce در جاوا اسکریپت

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

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

کلیک کنید

در حالی که این ممکن است در موارد خاص به خوبی کار کند، اما می‌تواند منجر به نتایج غیرمنتظره شود، به ویژه در هنگام انجام عملیاتی مانند محاسبه تعداد اقلام احتمال رخدداد خطا وجود دارد. بنابراین، مهم است اطمینان حاصل شود که همیشه مقدار اولیه مناسب هنگام استفاده از Reduceارائه شده باشد تا از هرگونه رفتار غیرمنتظره جلوگیری شود.

اشتباه دیگری که باید مراقب آن بود، فراموش کردن بازگردانی مقدار کل در تابع Reducer است. تابع کاهنده باید همیشه مقداری را برگرداند تا متد Reduce به درستی کار کند. عدم انجام این کار می‌تواند منجر به نتایج نادرست یا غیرمنتظره شود.

Reduce در جاوا اسکریپت به وسیله چه مرورگرهایی پشتیبانی می شود؟

Reduce در جاوا اسکریپت به وسیله مرورگرهای مختلفی مانند؛ «گوگل کروم»، «مایکروسافت اج ۹»، «موزیلا فایرفاکس ۳»، «سافاری ۵» و «اوپرا ۱۰.۵» پشتیبانی خواهد شد. این مرورگرها عملکردهای لازم را برای استفاده از متد Reduce روی آرایه‌ها در جاوا اسکریپت پیاده‌سازی کرده‌اند.

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

کلیک کنید

سخن پایانی

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

فیلم مجموعه آموزش طراحی و برنامه ‌نویسی سایت – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

همچنین در این مطلب، آموزش استفاده از Pipeline در ترکیب با متد Reduce ارائه شد. در پایان اشتباهات رایجی که در به کارگیری این متد امکان دارد کاربران با آن مواجه شوند نیز ارائه شد.