reduce() که در کنار سایر روش های آرایه در ECMAScript 5 معرفی شده است، یک راه منحصر به فرد و قدرتمند برای تبدیل آرایه ها به مقادیر منفرد ارائه می دهد.

در این مقاله، با درک اینکه متد reduce() چیست، نحو آن را می آموزید و در نهایت موارد استفاده ای را مشاهده می کنید که می توانید از آن به طور موثر استفاده کنید.

می توانید تمام کد منبع را از اینجا دریافت کنید.

فهرست مطالب

درک اصول reduce()

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

استفاده از موارد reduce()

نتیجه

درک اصول reduce()

در قلب خود، reduce() از طریق هر عنصر یک آرایه تکرار می شود و یک تابع تعریف شده توسط کاربر (که به درستی "reducer" نامیده می شود) برای عنصر فعلی و یک مقدار انباشته اعمال می کند.

این انباشته با مقدار اولیه ای که شما ارائه می کنید شروع می شود (یا به طور پیش فرض به عنصر آرایه اول می رسد) و با مقدار بازگشتی کاهنده در هر تکرار به روز می شود.

در نهایت، وضعیت نهایی انباشته به مقدار واحدی تبدیل می‌شود که توسط reduce() برگردانده می‌شود.

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

تصور کنید که یک تکه خاک رس را شکل می دهید. شما با یک توده شروع می کنید و بارها فشار و جهت را اعمال می کنید و آن را به شکل دلخواه در می آورید.

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

استفاده از موارد reduce()

حال، بیایید به سناریوهایی بپردازیم که در آن‌ها reduce() می‌درخشد:

محاسبه کل

سناریو: شما آرایه ای از اشیاء دارید که محصولات را نشان می دهند و می خواهید قیمت کل همه محصولات را محاسبه کنید.

رویکرد سنتی با یک حلقه:

 const products = [ { name: "Shirt", price: 20 }, { name: "Shoes", price: 50 }, { name: "Hat", price: 15 } ]; // Initialize totalPrice to 0 let totalPrice = 0; // Loop through each product and add its price to totalPrice for (const product of products) { totalPrice += product.price; } console.log("Total price (loop):", totalPrice); // Output: Total price (loop): 85

رویکرد سنتی یک متغیر totalPrice به 0 مقداردهی می‌کند، سپس از طریق هر محصول در آرایه products با استفاده از حلقه for...of تکرار می‌شود.

در داخل حلقه، ویژگی price محصول فعلی را به totalPrice اضافه می کند.

پس از تکرار در میان همه محصولات، totalPrice نهایی (85) در کنسول چاپ می شود.

استفاده از reduce() :

 const products = [ { name: "Shirt", price: 20 }, { name: "Shoes", price: 50 }, { name: "Hat", price: 15 } ]; // Use reduce() with an initial value of 0 for totalPrice const totalPriceReduce = products.reduce((sum, product) => sum + product.price, 0); console.log("Total price (reduce):", totalPriceReduce); // Output: Total price (reduce): 85

متد reduce() یک تابع callback و یک مقدار اولیه اختیاری (0 در این مورد) می گیرد. تابع callback دو آرگومان دریافت می کند: sum ، انباشت کننده، که در ابتدا روی مقدار اولیه (0) تنظیم شده است، و product ، شی محصول فعلی.

در داخل تابع callback، ویژگی price product فعلی به sum اضافه می شود. مقدار برگشتی تابع callback به sum جدید برای تکرار بعدی تبدیل می شود.

پس از تکرار در میان همه محصولات، sum نهایی (85) برگردانده شده و در totalPriceReduce ذخیره می شود.

مقایسه: هر دو رویکرد به یک نتیجه می‌رسند، اما reduce() روش مختصر و کاربردی‌تری برای محاسبه قیمت کل ارائه می‌دهد. از نیاز به یک حلقه صریح اجتناب می کند و به طور مستقیم منطق اضافه کردن قیمت ها را در تابع callback بیان می کند.

یافتن حداقل یا حداکثر مقادیر

سناریو: شما مجموعه ای از دماها دارید و می خواهید بالاترین و کمترین دما را پیدا کنید.

رویکرد سنتی با حلقه ها:

 const temperatures = [25, 18, 32, 20, 15]; // Initialize maxTemp and minTemp to unrealistic values let maxTemp = -Infinity; let minTemp = Infinity; // Loop through each temperature and update maxTemp and minTemp for (const temp of temperatures) { maxTemp = Math.max(maxTemp, temp); minTemp = Math.min(minTemp, temp); } console.log("Max temp (loop):", maxTemp); // Output: Max temp (loop): 32 console.log("Min temp (loop):", minTemp); // Output: Min temp (loop): 15

رویکرد سنتی، maxTemp به بی‌نهایت منفی و minTemp را به بی‌نهایت مثبت اولیه می‌کند تا اطمینان حاصل شود که با اولین دمایی که با آن مواجه می‌شوند به‌روزرسانی می‌شوند.

سپس در هر دما در آرایه temperatures با استفاده از حلقه for...of تکرار می شود. در داخل حلقه، از Math.max() برای مقایسه maxTemp فعلی با دمای فعلی استفاده می کند و در صورت لزوم maxTemp به روز می کند.

به طور مشابه، از Math.min() برای مقایسه minTemp فعلی و به روز رسانی آن در صورت نیاز استفاده می کند. پس از تکرار در تمام دماها، maxTemp نهایی (32) و minTemp (15) در کنسول چاپ می شوند.

استفاده از reduce() :

 const temperatures = [25, 18, 32, 20, 15]; // Use reduce() with initial values of -Infinity and Infinity const maxTempReduce = temperatures.reduce((max, temp) => Math.max(max, temp), -Infinity); const minTempReduce = temperatures.reduce((min, temp) => Math.min(min, temp), Infinity); console.log("Max temp (reduce):", maxTempReduce); // Output: Max temp (reduce): 32 console.log("Min temp (reduce):", minTempReduce); // Output: Min temp (reduce): 15

متد reduce() یک تابع callback و یک مقدار اولیه (بی نهایت منفی و مثبت در این مورد) می گیرد. تابع callback دو آرگومان دریافت می کند: max یا min ، انباشت کننده، که به عنوان مقادیر اولیه شروع می شود، و temp ، دمای فعلی.

در داخل تابع callback، Math.max() یا Math.min() برای مقایسه دمای فعلی با انباشته و به روز رسانی آن استفاده می شود.

پس از تکرار در تمام دماها، حداکثر و حداقل دماهای نهایی برمی گردند.

مقایسه: هر دو رویکرد به یک نتیجه می‌رسند، اما reduce() راه مختصر و کاربردی‌تری برای یافتن مقادیر حداکثر و حداقل ارائه می‌دهد. این اهرم مفهوم انباشته را برای مقایسه و به روز رسانی مستقیم مقادیر در تابع callback می کند.

اشیاء مجتمع ساختمانی:

سناریو: شما آرایه ای از دانش آموزان دارید و می خواهید آنها را بر اساس موضوعاتشان در یک شیء واحد گروه بندی کنید.

رویکرد سنتی با حلقه ها:

 const students = [ { name: "Alice", age: 25, subject: "Math" }, { name: "Bob", age: 30, subject: "Science" }, { name: "Charlie", age: 28, subject: "History" }, ]; // Initialize an empty object to store subject groups const subjectMap = {}; // Loop through each student and add them to their respective subject group for (const student of students) { const subject = student.subject; if (!subjectMap [subject]) { subjectMap[subject] = []; } subjectMap[subject].push(student); } console.log("Subject map (loop):", subjectMap); // Output: { Math: [...], Science: [...], History: [...] }

این رویکرد یک شی خالی subjectMap برای ذخیره دانش آموزان گروه بندی شده اولیه می کند. سپس از طریق هر دانش آموز در آرایه students با استفاده از حلقه for...of تکرار می شود.

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

پس از تکرار در میان همه دانش‌آموزان، شیء subjectMap نهایی شامل گروه‌هایی از دانش‌آموزان بر اساس موضوعات آنه است.

استفاده از reduce() :

 const students = [ { name: "Alice", age: 25, subject: "Math" }, { name: "Bob", age: 30, subject: "Science" }, { name: "Charlie", age: 28, subject: "History" }, ]; // Use reduce() to build the subject map object const subjectMapReduce = students.reduce((map, student) => { const subject = student.subject; map[subject] = map[subject] || []; map[subject].push(student); return map; }, {}); console.log("Subject map (reduce):", subjectMapReduce); // Output: { Math: [...], Science: [...], History: [...] }

متد reduce() یک تابع callback و یک مقدار اولیه (در این مورد یک شی خالی) می گیرد. تابع callback دو آرگومان دریافت می کند: map ، acumulator که به عنوان شی خالی اولیه شروع می شود، و student ، شی دانشجوی فعلی.

در داخل تابع callback، ویژگی subject دانشجوی فعلی بازیابی می شود. اگر subject در map وجود نداشته باشد، یک آرایه خالی برای آن ایجاد می شود. شی دانش آموز فعلی به آرایه موضوعی مربوطه در map فشار داده می شود.

شی map به روز شده به عنوان انباشته کننده جدید برای تکرار بعدی برگردانده می شود. پس از تکرار در میان همه دانش آموزان، شی map نهایی شامل دانش آموزان گروه بندی شده است.

مقایسه: هر دو رویکرد به یک نتیجه می‌رسند، اما reduce() راه مختصر و کاربردی‌تری برای ساخت شی ارائه می‌دهد. این اهرم مفهوم انباشته برای ساخت مستقیم subjectMap در تابع callback است.

مسطح کردن آرایه های چند بعدی:

سناریو: شما یک ساختار آرایه تودرتو دارید و می خواهید یک آرایه تک سطحی ایجاد کنید.

رویکرد سنتی با حلقه ها:

 const multiArray = [[1, 2], [3, 4], [5]]; // Initialize an empty array to store flattened elements const flatArray = []; // Loop through each sub-array and push its elements into flatArray for (const subArray of multiArray) { for (const element of subArray) { flatArray.push(element); } } console.log("Flat array (loop):", flatArray); // Output: [1, 2, 3, 4, 5]

این رویکرد یک آرایه خالی flatArray برای ذخیره عناصر مسطح شده اولیه می کند. سپس از طریق هر زیر آرایه در multiArray با استفاده از یک حلقه تودرتو for...of تکرار می شود.

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

استفاده از reduce() :

 const multiArray = [[1, 2], [3, 4], [5]]; // Use reduce() to flatten the multidimensional array const flatArrayReduce = multiArray.reduce((accumulator, currentArray) => { return accumulator.concat(currentArray); }, []); console.log("Flat array (reduce):", flatArrayReduce); // Output: [1, 2, 3, 4, 5]

متد reduce() یک تابع callback و یک مقدار اولیه (آرایه خالی [] در این مورد) می گیرد. تابع callback دو آرگومان دریافت می کند: accumulator ، acumulator که به عنوان آرایه خالی اولیه شروع می شود، و currentArray ، آرایه فرعی فعلی در حال پردازش است.

در داخل تابع callback، از متد concat() برای الحاق currentArray به accumulator استفاده می‌شود که به طور موثر آرایه را مسطح می‌کند. نتیجه concat() تبدیل به انباشته کننده جدید برای تکرار بعدی می شود.

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

مقایسه: هر دو رویکرد به یک نتیجه از مسطح کردن آرایه می رسند، اما reduce() راه حل ظریف و مختصرتری ارائه می دهد. از مفهوم انباشته برای ساخت تدریجی آرایه مسطح استفاده می کند و از نیاز به حلقه های تودرتو و فشار دستی عناصر اجتناب می کند.

نتیجه

به طور خلاصه، متد reduce() در جاوا اسکریپت روشی مختصر و قدرتمند برای تبدیل آرایه ها به مقادیر منفرد یا ساختارهای داده پیچیده ارائه می دهد.

با ارائه انعطاف‌پذیری از طریق یک تابع کاهنده قابل تنظیم و یک مقدار اولیه اختیاری، reduce() وظایف رایجی مانند محاسبه مجموع، یافتن افراط‌ها، گروه‌بندی اشیا و مسطح کردن آرایه‌ها را ساده می‌کند.

درک reduce() توسعه دهندگان را قادر می سازد تا کدهای تمیزتر و کارآمدتر بنویسند و امکانات جدیدی را برای دستکاری داده ها در پروژه های جاوا اسکریپت باز می کند.

اگر بازخوردی دارید، در توییتر یا لینکدین به من پیام دهید.

خبرکاو