همه چیز درباره متدهای آرایه در جاوااسکریپت (map ،filter و reduce)

جاوااسکریپت یکی از پرکاربردترین زبان‌های برنامه‌نویسی در دنیای وب است و بخش مهمی از قدرت و انعطاف‌پذیری آن به کار با آرایه‌ها برمی‌گردد. آرایه‌ها به ما امکان می‌دهند مجموعه‌ای از داده‌ها را ذخیره و مدیریت کنیم، اما آنچه کار با آرایه‌ها را واقعاً قدرتمند می‌سازد، متدهای توکار آن‌هاست.

در میان این متدها، سه ابزار کلیدی یعنی map ،filter و reduce جایگاه ویژه‌ای دارند. این متدها نه تنها کدنویسی را ساده‌تر و خواناتر می‌کنند، بلکه به ما کمک می‌کنند داده‌ها را به شکلی کارآمد پردازش و تغییر دهیم. به همین دلیل، درک درست و استفاده‌ی هوشمندانه از آن‌ها برای هر توسعه‌دهنده‌ی جاوااسکریپت ضروری است.

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

متد map در جاوااسکریپت

متد map() برای ساختن یک آرایه‌ی جدید از روی آرایه‌ی موجود استفاده می‌شود. این متد روی هر عنصر آرایه پیمایش می‌کند و یک تابع مشخص را روی آن اعمال می‌نماید. خروجی هر بار اجرای تابع، در آرایه‌ی جدید قرار می‌گیرد.

نحوه‌ی نوشتن (Syntax)

var new_array = arr.map(function callback(element, index, array) {
    // مقدار بازگشتی برای new_array
}[, thisArg])

• element: عنصر فعلی آرایه (ضروری)
• index: شماره ایندکس عنصر (اختیاری)
• array: خود آرایه‌ی اصلی (اختیاری)
• thisArg: مقداری که می‌تواند به عنوان this در تابع استفاده شود (اختیاری)

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

مثال عملی

در مثال زیر، هر عدد موجود در آرایه دو برابر می‌شود:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(item => item * 2);

console.log(doubled); // [2, 4, 6, 8]

نکات تکمیلی درباره‌ی map

• map آرایه‌ی جدید ایجاد می‌کند: متد map همیشه یک آرایه‌ی جدید برمی‌گرداند و آرایه‌ی اصلی را تغییر نمی‌دهد. این ویژگی باعث می‌شود کد شما ایمن‌تر و قابل پیش‌بینی‌تر باشد.
• طول آرایه ثابت می‌ماند: تعداد عناصر آرایه‌ی خروجی دقیقاً برابر با تعداد عناصر آرایه‌ی ورودی است. حتی اگر در تابع چیزی بازگردانده نشود، مقدار undefined در آرایه‌ی جدید قرار می‌گیرد.
• مناسب برای تغییر شکل داده‌ها: بهترین کاربرد map زمانی است که می‌خواهید داده‌ها را به شکل دیگری تبدیل کنید (مثلاً استخراج یک ویژگی از آبجکت‌ها یا اعمال یک فرمول روی اعداد).
• ترکیب‌پذیری بالا: می‌توان map را همراه با متدهای دیگر مثل filter یا reduce استفاده کرد تا عملیات پیچیده‌تر روی داده‌ها انجام شود.
• بهینه‌تر از حلقه‌های سنتی: استفاده از map معمولاً کد را خواناتر و کوتاه‌تر از حلقه‌های for یا forEach می‌کند.

مثال ترکیبی: فرض کنید آرایه‌ای از آبجکت‌ها دارید و می‌خواهید فقط نام‌ها را استخراج کنید:

const users = [
  { name: "Ali", age: 25 },
  { name: "Sara", age: 30 },
  { name: "Reza", age: 28 }
];

const names = users.map(user => user.name);
console.log(names); // ["Ali", "Sara", "Reza"]

متد filter در جاوااسکریپت

متد filter() برای انتخاب عناصر خاص از یک آرایه استفاده می‌شود. این متد روی هر عنصر آرایه یک شرط (conditional statement) اعمال می‌کند. اگر نتیجه‌ی شرط true باشد، آن عنصر در آرایه‌ی خروجی قرار می‌گیرد؛ اگر نتیجه false باشد، آن عنصر حذف می‌شود.

نحوه‌ی نوشتن (Syntax)

var new_array = arr.filter(function callback(element, index, array) {
    // بازگرداندن true یا false
}[, thisArg])

• element: عنصر فعلی آرایه (ضروری)
• index: شماره ایندکس عنصر (اختیاری)
• array: خود آرایه‌ی اصلی (اختیاری)
• thisArg: مقداری که می‌تواند به عنوان this در تابع استفاده شود (اختیاری)

تفاوت اصلی filter با map این است که در filter تابع باید true یا false بازگرداند تا مشخص شود عنصر در آرایه‌ی جدید باقی بماند یا حذف شود.

مثال‌ها

فیلتر کردن اعداد زوج

const numbers = [1, 2, 3, 4];
const evens = numbers.filter(item => item % 2 === 0);

console.log(evens); // [2, 4]

انتخاب دانش‌آموزانی با نمره‌ی بالای 90

const students = [
  { name: 'Quincy', grade: 96 },
  { name: 'Jason', grade: 84 },
  { name: 'Alexis', grade: 100 },
  { name: 'Sam', grade: 65 },
  { name: 'Katie', grade: 90 }
];

const studentGrades = students.filter(student => student.grade >= 90);

console.log(studentGrades);
// [
//   { name: 'Quincy', grade: 96 },
//   { name: 'Alexis', grade: 100 },
//   { name: 'Katie', grade: 90 }
// ]

نکات تکمیلی درباره‌ی filter

• متد filter آرایه‌ی جدید ایجاد می‌کند: مانند map، آرایه‌ی اصلی تغییر نمی‌کند.
• طول آرایه‌ی خروجی ممکن است کمتر باشد: برخلاف map، تعداد عناصر خروجی وابسته به شرط است.
• کاربرد رایج: انتخاب داده‌های معتبر، حذف داده‌های ناخواسته، یا اعمال فیلترهای منطقی روی مجموعه‌ها.
• ترکیب‌پذیری بالا: می‌توان filter را همراه با map یا reduce استفاده کرد تا داده‌ها همزمان فیلتر و پردازش شوند.

متد reduce در جاوااسکریپت

متد reduce() برای کاهش یک آرایه به یک مقدار نهایی استفاده می‌شود. این متد یک تابع موسوم به reducer را روی هر عنصر آرایه اجرا می‌کند و نتیجه‌ی هر مرحله را به مرحله‌ی بعد منتقل می‌کند تا در نهایت تنها یک مقدار خروجی تولید شود.

نحوه‌ی نوشتن (Syntax)

arr.reduce(callback[, initialValue])

• callback: تابعی که روی هر عنصر آرایه اجرا می‌شود. این تابع معمولاً دو آرگومان اصلی دارد:
• • accumulator: مقدار بازگشتی از مرحله‌ی قبل (تجمع‌کننده)
  • currentValue: عنصر فعلی آرایه
  • index: ایندکس عنصر فعلی (اختیاری)
  • array: خود آرایه‌ی اصلی (اختیاری)

• initialValue: مقدار اولیه‌ی accumulator که اختیاری است. اگر داده شود، اولین بار به عنوان مقدار اولیه استفاده می‌شود.

مثال‌ها

جمع کردن همه‌ی اعداد یک آرایه

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function (result, item) {
  return result + item;
}, 0);

console.log(sum); // 10

شمارش تعداد تکرار رشته‌ها در آرایه

var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit'];

var petCounts = pets.reduce(function(obj, pet){
    if (!obj[pet]) {
        obj[pet] = 1;
    } else {
        obj[pet]++;
    }
    return obj;
}, {});

console.log(petCounts);
/*
خروجی:
{
  dog: 2,
  chicken: 3,
  cat: 1,
  rabbit: 1
}
*/

نکات تکمیلی درباره‌ی reduce

• انعطاف‌پذیری بالا: متد reduce می‌تواند برای جمع، ضرب، ترکیب داده‌ها، یا حتی ساختن آبجکت‌های پیچیده استفاده شود.
• نیاز به مقدار اولیه: اگر مقدار اولیه مشخص نشود، اولین عنصر آرایه به عنوان مقدار اولیه در نظر گرفته می‌شود.
• کاربردهای رایج: محاسبه مجموع، میانگین، تبدیل آرایه به آبجکت، یا حتی پیاده‌سازی ساختارهای داده‌ای.
• قدرت ترکیب‌پذیری: می‌توان reduce را همراه با متدهای دیگر مثل map و filter استفاده کرد تا عملیات پیچیده‌تر روی داده‌ها انجام شود.

تفاوت متدهای map، filter و reduce

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

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

جمع‌بندی

در این مقاله با سه متد مهم آرایه در جاوااسکریپت یعنی map ،filter و reduce آشنا شدیم. هر کدام از این متدها نقش ویژه‌ای در پردازش داده‌ها دارند:

• map برای تبدیل و تغییر شکل عناصر به کار می‌رود.
• filter برای انتخاب داده‌های معتبر یا مورد نیاز استفاده می‌شود.
• reduce برای ترکیب کل آرایه و تولید یک مقدار نهایی کاربرد دارد.

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

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