فهرست مطالب
وقتی در جاوااسکریپت با آرایه‌ای از داده‌ها کار می‌کنید، نوشتن حلقه‌های سنتی for برای تغییر شکل داده، فیلتر کردن گزینه‌ها یا محاسبه مجموع، کد را شلوغ و مستعد خطای مقداردهی اولیه می‌کند. پیگیری متغیرهای شمارنده دستی و مدیریت تغییرپذیری متغیرها خوانایی برنامه را کاهش می‌دهد. استاندارد جاوااسکریپت برای این سه نیاز مشخص، سه متد کاربردی در نمونه‌های آرایه فراهم کرده است: map و filter و reduce.
در این راهنما منطق کارکرد هر متد، تفاوت آن‌ها با یکدیگر و خطاهای رایجی را که حتی توسعه‌دهندگان متوسط به آن برمی‌خورند، گام‌به‌گام بررسی می‌کنیم.
منطق ساختاری سه متد در مشخصات جاوااسکریپت
طبق مستندات رسمی شبکه توسعه‌دهندگان موزیلا (MDN)، هر یک از این متدها بدون تغییر آرایه اصلی، روی عناصر پیمایش انجام می‌دهند و نتیجه متفاوتی برمی‌گردانند.
متد map روی تک‌تک عناصر یک تابع را اجرا می‌کند و خروجی آن را در قالب یک آرایه جدید با طول دقیقاً برابر با آرایه اولیه برمی‌گرداند. این متد فقط برای دگرگونی شکل داده است.
متد filter تابعی شرطی دریافت می‌کند. این تابع برای هر عنصر یک مقدار بولی برمی‌گرداند. اگر شرط برقرار باشد، عنصر وارد آرایه جدید می‌شود و در غیر این صورت حذف خواهد شد. طول آرایه خروجی می‌تواند کمتر از آرایه اولیه باشد.
متد reduce عناصر آرایه را با استفاده از یک تابع انباشتگر (accumulator) پردازش می‌کند و همه آن‌ها را در قالب یک خروجی واحد، مانند یک عدد جمع، یک رشته، یا یک شیء خلاصه تحویل می‌دهد.
نمونه کد کامل تبدیل و فیلتر داده‌ها
فرض کنید فهرستی از قیمت کالاهای یک سبد خرید داریم. می‌خواهیم قیمت‌های نامعتبر را حذف کنیم، روی هر قیمت مالیات محاسبه کنیم، و سپس مجموع کل فاکتور را به دست آوریم.
javascript// قیمت‌های ثبت‌شده در سبد خرید
const rawPrices = [۱۲۰۰۰۰, -5000, ۴۵۰۰۰۰, ۸۰۰۰۰, ۰];
// گام اول: حذف قیمت‌های نامعتبر با استفاده از filter
const validPrices = rawPrices.filter((price) => price > ۰);
// خروجی: [۱۲۰۰۰۰, ۴۵۰۰۰۰, ۸۰۰۰۰]
// گام دوم: محاسبه مالیات ۹ درصد با استفاده از map
const pricesWithTax = validPrices.map((price) => Math.round(price * 1.09));
// خروجی: [۱۳۰۸۰۰, ۴۹۰۵۰۰, ۸۷۲۰۰]
// گام سوم: محاسبه جمع نهایی سبد خرید با reduce
const finalTotal = pricesWithTax.reduce((total, currentPrice) => {
return total + currentPrice;
}, ۰);
console.log(finalTotal);
// خروجی نهایی: ۷۰۸۵۰۰
در فراخوانی reduce، عدد ۰ مقدار اولیه انباشتگر است. در هر گام، حاصل جمع ذخیره شده و به گام بعدی منتقل می‌شود.
همین زنجیره را می‌توان بدون متغیرهای میانی پشت سر هم متصل کرد:
javascriptconst totalBill = rawPrices
.filter((price) => price > ۰)
.map((price) => Math.round(price * 1.09))
.reduce((sum, item) => sum + item, ۰);
console.log(totalBill);
// خروجی: ۷۰۸۵۰۰
خطاهای رایج هنگام کار با این متدها
شناخت تله‌های نگارشی این توابع مانع بروز رفتارهای غیرمنتظره در برنامه می‌شود.
اولین اشتباه متداول، استفاده از map به جای forEach است. اگر قصد ندارید از آرایه بازگشتی استفاده کنید و فقط می‌خواهید روی یک سرویس جانبی درخواستی بفرستید یا متغیری بیرون از تابع را تغییر دهید، نباید از map استفاده کرد. اجرای map بدون استفاده از خروجی آن، حافظه اضافی برای ساخت آرایه بی‌استفاده هدر می‌دهد.
دومین اشتباه، فراموش کردن بازگرداندن مقدار (return) درون تابع یا فیلتر کردن ناقص با map است:
javascriptconst numbers = [۱, ۲, ۳, ۴];
// کد اشتباه: استفاده از map برای فیلتر کردن
const wrong = numbers.map((num) => {
if (num > ۲) return num;
});
console.log(wrong);
// خروجی: [undefined, undefined, ۳, ۴]
چون تابع callback در شاخه شرطی مقدار برنمی‌گرداند، جاوااسکریپت undefined در آرایه قرار می‌دهد. برای کاهش تعداد اعضا باید حتماً از filter بهره ببرید.
سومین اشتباه، پاس دادن مستقیم توابعی است که آرگومان اختیاری می‌پذیرند. معروف‌ترین نمونه آن پاس دادن parseInt به map است:
javascript// نتیجه ناخواسته به دلیل ارسال شاخص حلقه به عنوان مبنای عددی
const parsedWrong = ["۱۰", "۱۰", "۱۰"].map(parseInt);
console.log(parsedWrong);
// خروجی: [۱۰, NaN, ۲]
// راهکار درست: مشخص کردن صریح آرگومان
const parsedCorrect = ["۱۰", "۱۰", "۱۰"].map((str) => parseInt(str, ۱۰));
console.log(parsedCorrect);
// خروجی: [۱۰, ۱۰, ۱۰]
چهارمین اشتباه، فراموش کردن مقدار اولیه در reduce هنگام کار با آرایه‌ای از اشیا است. اگر مقدار اولیه نگذارید، اولین عنصر آرایه به عنوان مقدار آغازین انباشتگر انتخاب می‌شود و در محاسبات بعدی خطای نوع یا تبدیل به رشته ایجاد خواهد شد.
قدم بعدی در تسلط بر آرایه‌ها
برای ساخت برنامه‌های تعاملی فرانت‌اند یا کار در محیط سرور Node.js، فهم دقیق متدهای تابعی الزامی است. اکنون که منطق این سه متد را شناختید، پیاده‌سازی مواردی مثل متدهای find و some و every را در ادیتور تمرین کنید.
اگر می‌خواهید منطق پشت آرایه‌ها، اشیا و مفاهیم ناهمگام را منسجم و پروژه‌محور تمرین کنید، دوره جاوااسکریپت از صفر تا برنامه‌نویس مسیر عملی مناسبی برای یادگیری گام‌به‌گام فراهم کرده است.
نظرها
اولین نفری باشید که نظر میدهدسؤالتان را بپرسید یا تجربه‌تان را بنویسید تا نویسنده‌ی مطلب پاسخ بدهد.