مقدمه

متد reduce یکی از متدهایی در جاوااسکریپت است که در ابتدا ممکن است درک آن کمی سخت باشد، مخصوصاً به خاطر توضیحات مبهمی که در اینترنت وجود دارد. اما یادگیری reduce بسیار ارزشمند است، چون در مدیریت state (مثل Redux) کاربرد زیادی دارد.

ساختار کلی متد reduce به این شکل است:

arr.reduce(callback, initialValue);

مفاهیم مهم در Reduce

در reduce با دو مفهوم اصلی روبه‌رو هستیم:

• Accumulator (انباشت‌کننده): مقداری که در نهایت به آن می‌رسیم.
• Reducer (کاهش‌دهنده): تابعی که عملیات لازم را انجام می‌دهد تا آرایه به یک مقدار نهایی تبدیل شود.

نکته مهم این است که reduce همیشه فقط یک مقدار برمی‌گرداند؛ به همین دلیل نام آن Reduce است.

مثال ساده

مثال کلاسیک زیر مجموع اعداد یک آرایه را حساب می‌کند:

let value = 0; 

const numbers = [5, 10, 15];

for(let i = 0; i < numbers.length; i++) {
  value += numbers[i];
}

خروجی این کد برابر است با:

30

این روش کاملاً درست است، اما با reduce می‌توانیم این کار را بدون تغییر دادن متغیر اصلی انجام دهیم.

انجام همان کار با Reduce

/* مقدار اولیه */
const initialValue = 0;

/* آرایه اعداد */
const numbers = [5, 10, 15];

/* تابع reducer */
const reducer = (accumulator, item) => {
  return accumulator + item;
};

/* اجرای reduce */
const total = numbers.reduce(reducer, initialValue);

Reduce پشت صحنه چگونه کار می‌کند؟

اگر داخل تابع reducer مقدارها را چاپ کنیم:

const reducer = (accumulator, item) => {
  console.log(accumulator, item);
  return accumulator + item;
};

اتفاقات زیر رخ می‌دهد:

1. تابع ۳ بار اجرا می‌شود چون آرایه ۳ عضو دارد.
2. مقدار اولیه accumulator برابر 0 است.
3. در هر مرحله مقدار item به accumulator اضافه می‌شود.
4. در مرحله آخر:
   • accumulator = 15
   • item = 15
   • نتیجه = 30

تخت کردن آرایه‌ها با Reduce

فرض کنید آرایه زیر را داریم:

const numArray = [1, 2, [3, 10, [11, 12]], [1, 2, [3, 4]], 5, 6];

اگر بخواهیم این آرایه تو در تو را به یک آرایه ساده تبدیل کنیم:

function flattenArray(data) {

  const initialValue = [];

  return data.reduce((total, value) => {

    return total.concat(
      Array.isArray(value)
        ? flattenArray(value)
        : value
    );

  }, initialValue);
}

نتیجه

flattenArray(numArray);

خروجی:

[1, 2, 3, 10, 11, 12, 1, 2, 3, 4, 5, 6]

در این مثال:

• اگر مقدار فعلی آرایه باشد، تابع دوباره خودش را صدا می‌زند (بازگشتی).
• اگر مقدار معمولی باشد، به آرایه نهایی اضافه می‌شود.

تغییر ساختار آبجکت با Reduce

فرض کنید داده‌های زیر را از سرور دریافت کرده‌ایم:

const pokemon = [
  { name: "charmander", type: "fire" },
  { name: "squirtle", type: "water" },
  { name: "bulbasaur", type: "grass" }
]

می‌خواهیم خروجی به این شکل باشد:

const pokemonModified = {
  charmander: { type: "fire" },
  squirtle: { type: "water" },
  bulbasaur: { type: "grass" }
};

تبدیل با Reduce

const getMapFromArray = data =>
  data.reduce((acc, item) => {

    acc[item.name] = {
      type: item.type
    };

    return acc;

  }, {});

اجرای تابع

getMapFromArray(pokemon);

خروجی:

{
  charmander: { type: "fire" },
  squirtle: { type: "water" },
  bulbasaur: { type: "grass" }
}

جمع‌بندی

در نگاه اول، reduce از متدهایی مثل map یا filter پیچیده‌تر به نظر می‌رسد، اما وقتی ساختار و منطق آن را درک کنید، تبدیل به یکی از قدرتمندترین ابزارهای کار با آرایه‌ها در جاوااسکریپت می‌شود.

از مهم‌ترین کاربردهای reduce می‌توان به موارد زیر اشاره کرد:

• جمع کردن مقادیر
• تبدیل ساختار داده‌ها
• ساخت آبجکت‌ها
• تخت کردن آرایه‌ها
• پردازش داده‌های پیچیده

از همراهی شما با پارمین کلود سپاسگزاریم.