✅ أولًا: ما هي reduce
؟
reduce
هي دالة عليا (Higher-Order Function) تستخدم لتحويل (reduce) مصفوفة إلى قيمة واحدة.
📦 الصيغة الأساسية:
array.reduce((accumulator, currentValue, index, array) => {
// المنطق
return updatedAccumulator;
}, initialValue);
JavaScript✅ المعاني:
الاسم | المعنى |
---|---|
accumulator | القيمة التي نحسبها أو نبنيها تدريجيًا |
currentValue | العنصر الحالي من المصفوفة |
index | فهرس العنصر الحالي |
array | المصفوفة الأصلية |
initialValue | القيمة الأولية للبناء |
✅ أمتى نستخدم reduce
؟
عندما تريد:
- جمع أو ضرب عناصر المصفوفة.
- إنشاء كائن جديد من المصفوفة.
- تحويل مصفوفة إلى سلسلة نصية.
- حساب المتوسط.
- إحصاء التكرارات.
- بناء بنية جديدة (مثل groupBy).
⚠️ الفرق بينها وبين map
و filter
:
الدالة | الوظيفة |
---|---|
map | ترجع مصفوفة جديدة فيها تعديلات على العناصر |
filter | ترجع مصفوفة مصفّاة بحسب شرط |
reduce | ترجع قيمة واحدة فقط (رقم، نص، كائن، مصفوفة، إلخ) |
🧪 أمثلة مشروحة خطوة بخطوة
1. ✅ جمع الأعداد
const nums = [1, 2, 3, 4, 5];
const sum = nums.reduce((acc, current) => {
return acc + current;
}, 0);
console.log(sum); // 15
JavaScript🧠 الشرح:
الخطوة | acc | current | الناتج |
---|---|---|---|
1 | 0 | 1 | 1 |
2 | 1 | 2 | 3 |
3 | 3 | 3 | 6 |
4 | 6 | 4 | 10 |
5 | 10 | 5 | 15 |
✅ ضرب كل الأعداد
const numbers = [2, 3, 4];
const product = numbers.reduce((acc, current) => acc * current, 1);
console.log(product); // 24
JavaScript✅ إيجاد أكبر قيمة
const values = [10, 25, 30, 5];
const max = values.reduce((acc, current) => {
return current > acc ? current : acc;
}, values[0]);
console.log(max); // 30
JavaScript✅ جمع الأعداد الزوجية فقط
const nums = [1, 2, 3, 4, 5, 6];
const sumEven = nums.reduce((acc, current) => {
if (current % 2 === 0) {
return acc + current;
}
return acc;
}, 0);
console.log(sumEven); // 12
JavaScript5. ✅ تحويل مصفوفة إلى سلسلة نصية مفصولة بـ -
const letters = ['a', 'b', 'c', 'd'];
const joined = letters.reduce((acc, curr) => acc + '-' + curr);
console.log(joined); // a-b-c-d
JavaScriptملاحظة: هنا لم نضع قيمة ابتدائية، فسيأخذ a
كـ acc و b
أول current
.
✅ حساب المتوسط
const scores = [80, 90, 100];
const average = scores.reduce((acc, curr, index, array) => {
acc += curr;
if (index === array.length - 1) {
return acc / array.length;
}
return acc;
}, 0);
console.log(average); // 90
JavaScript✅ عدّ تكرار القيم في المصفوفة (frequency counter)
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const count = fruits.reduce((acc, fruit) => {
acc[fruit] = (acc[fruit] || 0) + 1;
return acc;
}, {});
console.log(count);
// { apple: 3, banana: 2, orange: 1 }
JavaScript🧠 تفضيلات ونصائح
الملاحظة | التوضيح |
---|---|
لا تستخدم reduce في كل شيء | استخدم map أو filter إذا كانت الحالة بسيطة وواضحة أكثر. |
reduce أقوى من map و filter | لأنها تستطيع تنفيذ كل ما تفعله map و filter لكن بكود أطول. |
يجب أن تعطي initialValue دائمًا | لتجنب الأخطاء، خصوصًا مع القيم الفارغة. |
تستخدم كثيرًا في التحليلات والإحصاءات | مثل الجمع والتجميع وتجميع البيانات حسب فئات. |
💡 تمارين (إذا أحببت تجربتها لاحقًا)
- اجمع كل الأعداد الفردية في مصفوفة.
- احسب عدد الأحرف في مصفوفة من الكلمات.
- احسب أكثر رقم مكرر.
- اجمع الأرقام التي تقبل القسمة على 3 أو 5.
- حول مصفوفة من الأرقام إلى مصفوفة نصوص باستخدام
reduce
فقط.