دالة Reduce

جزء من قسم Logic & Flow في رحلة JavaScript على Coddy — الدرس 54 من 65.

تسمح لك طريقة reduce() بـ "تقليص" مصفوفة إلى قيمة واحدة من خلال تنفيذ دالة محددة لكل عنصر في المصفوفة. يمكن أن تكون هذه القيمة الواحدة رقماً، أو سلسلة نصية، أو كائناً، أو حتى مصفوفة أخرى.

إليك صيغة الـ reducer:

array.reduce(function(accumulator, currentValue, currentIndex, array) {
    // إرجاع قيمة المجمع (accumulator) المحدثة
}, initialValue);

المكونات الرئيسية:

accumulator: يقوم بتجميع القيم المرجعة من الـ callback (فكر فيه كإجمالي تراكمي)

currentValue: العنصر الحالي الذي تتم معالجته في المصفوفة

currentIndex: (اختياري) فهرس العنصر الحالي

array: (اختياري) المصفوفة التي تم استدعاء reduce() عليها

initialValue: (اختياري) قيمة تُستخدم كأول وسيط (argument) لأول استدعاء للدالة المرجعية (callback function)

على سبيل المثال - مجموع الأرقام:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

كيف يعمل هذا خطوة بخطوة:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => {
    console.log(`Accumulator: ${acc}, Current Value: ${curr}`);
    return acc + curr;
}, 0);

// المخرجات:
// Accumulator: 0, Current Value: 1
// Accumulator: 1, Current Value: 2
// Accumulator: 3, Current Value: 3
// Accumulator: 6, Current Value: 4
// النتيجة النهائية: 10

التحدي

سهل

قم بإنشاء دالة باسم calculateGroceryTotal تأخذ مصفوفة من الكائنات التي تمثل عناصر البقالة.

كل كائن يحتوي على خاصيتين:

name: سلسلة نصية (اسم العنصر)
price: رقم (سعر العنصر)

يجب أن تقوم الدالة بما يلي:

حساب التكلفة الإجمالية لجميع العناصر
تطبيق خصم: - إذا كان الإجمالي أكبر من 100، يتم تطبيق خصم بنسبة 10%
إذا كان الإجمالي أكبر من 50 ولكن أقل من أو يساوي 100، يتم تطبيق خصم بنسبة 5%
لا يوجد خصم للمبالغ الإجمالية التي تبلغ 50 أو أقل.

إرجاع كائن يحتوي على:

originalTotal: المجموع قبل الخصم
discount: المبلغ الذي تم توفيره
finalTotal: المبلغ النهائي بعد الخصم

ورقة مرجعية

تقوم الطريقة reduce() باختزال مصفوفة إلى قيمة واحدة عن طريق تنفيذ دالة لكل عنصر:

array.reduce(function(accumulator, currentValue, currentIndex, array) {
    // إرجاع قيمة المجمع (accumulator) المحدثة
}, initialValue);

المكونات الرئيسية:

accumulator: يجمع القيم المرجعة من دالة الاستدعاء (المجموع التراكمي)
currentValue: العنصر الحالي الذي تتم معالجته
currentIndex: (اختياري) فهرس العنصر الحالي
array: (اختياري) المصفوفة التي تم استدعاء reduce() عليها
initialValue: (اختياري) القيمة الابتدائية للمجمع (accumulator)

مثال - مجموع الأرقام:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

التنفيذ خطوة بخطوة:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => {
    console.log(`Accumulator: ${acc}, Current Value: ${curr}`);
    return acc + curr;
}, 0);

// المخرجات:
// Accumulator: 0, Current Value: 1
// Accumulator: 1, Current Value: 2
// Accumulator: 3, Current Value: 3
// Accumulator: 6, Current Value: 4
// النتيجة النهائية: 10

جرّب بنفسك

function calculateGroceryTotal(items) {
    // اكتب الكود هنا
    


    return {
        originalTotal: Math.round(originalTotal * 100) / 100,  // التقريب إلى منزلتين عشريتين
        discount: Math.round(discount * 100) / 100,
        finalTotal: Math.round(finalTotal * 100) / 100
    };
}