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

همچنین در وبلاگ من موجود است

من از روش کاهش استفاده نمی کنم و با آن خوب هستم

احتمالاً شما قبلاً یک توسعه دهنده جاوا اسکریپت با تجربه هستید اما از آن استفاده نکرده اید .reduce() روش در شما
کد تولید هنوز. شما هنوز نمی توانید مورد استفاده مناسب برای این روش پیدا کنید.

چه کاری انجام می دهد و چرا می خواهم از آن استفاده کنم؟ – ممکن است بپرسید

در این مقاله نمونه کدهای زیادی را به شما نشان خواهم داد که در آن .reduce() یک انتخاب عالی است

مبانی

زمانی که نیاز به تکرار روی یک آرایه دارید، می توانید از آن استفاده کنید for، forEach یا for..of. زمانی که نیاز به تکرار و بازگشت دارید
داده (بیشتر اوقات – اصلاح شده) داده برای هر عنصری که احتمالاً استفاده می کنید map.

reduce در مقایسه با روش های ذکر شده در بالا کمی متفاوت است. برای محاسبه یک مقدار بر اساس استفاده می شود
روی آرایه

در اینجا یک مثال کوچک وجود دارد که تفاوت های اصلی را نشان می دهد:

map([🌽, 🐮, 🐔], cook) => [🍿, 🍔, 🍳]

filter([🍿, 🍔, 🍳], isVegetarian) =>  [🍿, 🍳]

reduce([🍿, 🍳], eat) => 💩

امیدوارم از قبل اصول اولیه را دریافت کرده باشید، درست است؟

مورد استفاده اساسی

بهترین مثالی که مفروضات ما را برای محاسبه یک مقدار بر اساس آرایه برآورده می کند، بدست آوردن مجموع مقداری سفارش است.
در زیر می توانید مجموعه ای از محصولات را به همراه قیمت آن مشاهده کنید. ساده ترین راه برای محاسبه کل سفارش، استفاده از آن است
for..of:

const order = [
    { product: '👘', price: 21 },
    { product: '👜', price: 37 },
    { product: '🦺', price: 69 },
];

let total = 0; // 127

for (const item of order) {
    total += item.price
}

reduce همین مشکل را در یک لاینر راحت حل می کند:

const total = order.reduce((total, item) => total + item.price, 0) // 127

مثال های اضافی فراوان

در این بخش نمونه های بسیار دیگری از استفاده را به شما نشان خواهم داد reduce. لطفاً به خاطر داشته باشید که بسیاری از اینها می توانند، و
باید با استفاده از روش های آرایه مناسب تر و کارآمدتر بازنویسی شود.

بیایید با لیست مواد تشکیل دهنده یک تخم مرغ همزده شروع کنیم 🍳:

const ingredients = [
    {id: 1, name: "egg 🥚", calories: 140, diet: "vegetarian"},
    {id: 2, name: "egg 🥚", calories: 140, diet: "vegetarian"},
    {id: 3, name: "butter 🧈", calories: 90, diet: "vegetarian"},
    {id: 4, name: "bacon 🥓", calories: 210, diet: "carnivore"}
]

مواد را بشمار

result = ingredients.reduce((acc, item) => acc + 1, 0); // 4

// alternative way
result = ingredient.lenght; // 4

مجموع کالری تمام مواد تشکیل دهنده

result = ingredients.reduce((acc, item) => acc += item.calories, 0) // 580

// alternative way
// .reduce is problably the best solution in this case

نام مجموعه ای از مواد تشکیل دهنده

result = ingredients.reduce((acc, item) => [...acc, item.name], []) // [ 'eggs', 'butter', 'bacon' ]

// alternative way
result = ingredients.map(item => item.name); // [ 'eggs', 'butter', 'bacon' ]

تعداد رخدادها

result = ingredients.reduces((acc, item) => {
    return {...acc, [person.age]: (acc[person.age] ||0) + 1} // { 'egg 🥚': 2, 'butter 🧈': 1, 'bacon 🥓': 1 }
}, {})

// alternative way
// using lodash
_.countBy(ingredients, "name");

گروه بر اساس نوع رژیم غذایی

result = ingredients.reduce((grouped, item) => {
    const {diet, name} = item;
    if(grouped[diet] == null) grouped[diet] = [];
    grouped[diet].push(name)
    return grouped
}, {}) // {vegetarian: [ 'egg 🥚', 'egg 🥚', 'butter 🧈' ], carnivore: [ 'bacon 🥓' ]}

// alternative way (need to be transformed to return just names)
_.groupBy(ingredients, "diet"); 

جستجوی مواد تشکیل دهنده بر اساس شناسه

result = ingredients.reduce((acc, item) => {
  return {...acc, [item.id]: item}
}, {})

/* 
{
    '1': {
        id: 1,
        name: 'egg 🥚',
        calories: 140,
        diet: 'vegetarian'
},
    '2': {
        id: 2,
        name: 'egg 🥚',
        ... 
*/

وقتی می‌خواهیم به یک عنصر خاص دسترسی پیدا کنیم، ایجاد چنین شیئی به ما یک مزیت کارایی می‌دهد – لازم نیست
تکرار روی یک آرایه کامل به دنبال عنصر منطبق است.

موادی را با بیشترین کالری دریافت کنید

result = ingredients.reduce((acc, item) => {
  if (acc === null || item.calories > acc) return item.calories
  return acc
}, null) // 210

// alternative way
result = Math.max(...ingredients.map(item => item.calories)) // 210

خلاصه

پس از خواندن و درک همه این مثال ها مطمئن هستم که می دانید در چه مواردی reduce بهترین راه حل خواهد بود

استفاده كردن reduce به نظر می رسد یک راه عالی برای حل برخی از مشکلات در جاوا اسکریپت باشد، اما در عین حال مخالف نیز وجود دارد
دیدگاه در میان بسیاری از توسعه دهندگان جیک آرچیبالد (@jaffathecake) در این مورد توییتی منتشر کرد:

تمام کدهایی که از array.reduce استفاده می کنند باید بدون array.reduce بازنویسی شوند تا برای انسان قابل خواندن باشد. موضوع را قطع می کند

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