دالة [Reduce] وكيفية إستخذامها في J S شرح مفصل حصريآخر
الصفحة
طالب عفو الرحمن
- عضوية مقفولة -
طالب عفو الرحمن
- عضوية مقفولة -
  • 20:58 - 2024/07/02

بسم الله الرحمن الرحيم والصلاة على من بعت رحمة للعالمين
سيد الأولين والأخرين سيدنا محمد صلى الله عليه وأله وسلم

أما بعد ...
إخواني أحبائي وأصدقائي أهلا بكم...

ندخل صلب الموضوع
سلام حار لكل متصفح للموضوع وكل عضو بالمنتدى

سنتحدث اليوم إن شاء الله عن إحدى أقوى الدوال في الجافا سكريبت ألا وهي

Reduce

دالة reduce في J ava Sc ript تُستخدم لتقليل مصفوفة إلى قيمة واحدة بناءً على دالة معينة.

تعمل reduce عن طريق تطبيق الدالة المحددة على كل عنصر في المصفوفة، مع تجميع النتائج إلى قيمة واحدة تمثل الناتج النهائي.

قبل البدء :

وجب التنبيه على أنني سأستخذم extension خاصة وهي Live Server حتى نتمكن من متابعة التغييرات أول بأول

2024-06-26-15-11-26

سنقوم بإنشاء مجلد خاص بالدرس يحتوي على ملفين أساسيين و اللذان سنستخذمهما في هذا الدرس

2024-06-26-16-07-42

في ملف index.html سنقوم بعمل تمبلت الخاصة بHtml 5

2024-06-26-16-09-27

بعض التعديلات على السريع في ملف index حيث سنقوم بتعريف ملف jS الخاص بنا

2024-06-26-16-10-14

قبل شرح دالة Reduce تعال نشوف كيف يمكننا القيام بعملية

الجمع عن طريق دالة ForEach

2024-07-02-11-35-01

في البداية نقوم بتعريف مصفوفة متكونة من أعداد عشوائية من إختيارنا “ ليس مشكلا أن تكون الأعداد مكونة من أرقام سالبة أو موجبة”

سميتها groceryList “ تبقى التسمية خيارا لكم كما تشاؤون”

نعرف متغيرا بإسم Total نجعله Let حتى نتمكن من التعديل عليه فيما بعد بحيث سيخزن فيه مجموع الأعداد التي في المصفوفة السابقة

نعمل Looping على المصفوفة عن طريق ForEach والتي تقبل متغير سنسميه price حيث سيحمل في كل مره قيمة عدد من المصفوفة GroceryList

هنا total += price سنعمل على جمع الأعداد وتخزينها في المتغير Total

خلف الكواليس هكذا ستشتغل الدالة

2024-07-02-17-27-20

النتيجة المتحصل عليها في Console.log(total)

2024-07-02-11-38-10

وهكذا حتى ننتهي من جميع أعداد الموجودة في المصفوفة

ربما هذه الطريقة ليست المحببة في مثل هذه الأوضاع حيث تأتي دالة Reduce لتجعل الأمور أكثر بساطة

وتقلل إمكانية الوقوع في الأخطاء

لنرى كيفية عمل هذه الدالة القوية في J S “ وربما صعبة للوهلة الأولى لكن مع الأمثلة ستستطيعون فهمها أكثر”

2024-07-02-11-37-33

سنعتمد على نفس المصفوفة السابقة

بالنسبة لهذه الدالة فتحتاج إلى

** Call Back Fun ct ion **

والتي تحتاج بدورها إلى محددين ‘Parameters’

غالبا الأول هو *Accumulator* وهو في هذه الحالة سيكون العدد المتراكم

أما الثاني فهو *CurrentValue* وهو القيمة الحالية المتوصل إليها

**القيمة الإبتدائية** في هذه الحالة نريد البدء من الصفر

في الأخير سنحصل على النتيجة نفسها كما في Foreach

2024-07-02-11-38-10

فكيف تشتغل هذه الدالة خلف الكواليس

2024-07-02-11-44-02

كما لو قلنا أنه accumulator هو نفسه total و CurrentValue هي price في المثال السابق

كما يمكننا من خلال دالة Reduce الحصول على القيمة الأكبر بين أعداد المتواجدة في المصفوفة

2024-07-02-11-47-36

هنا سنضع في Callback fun ction دالة الرياضيات الخاصة ب J S وهي Math.max والتي تعطينا قيمة الأكبر بين الأعداد مصفوفة معينة

ثم في القيمة الافتراضية فستكون -Infinity

سنحصل في الأخير على 110 كأكبر قيمة بين الأعداد في مصفوفتنا

2024-07-02-11-47-57

ما يميز دالة Reduce هو أنا لا تتعامل فقط مع الأعداد فحسب بل تتخطاه إلى النصوص

في المثال الموالي سنرى كيف يمكننا استخراج جملة إنطلاقا من مجموعة كلمات في مصفوفة ** بطبيعة الحال الكلمات فهي مرتبة لكي تعطينا جملة مفيدة**

2024-07-02-11-49-58

في هذا المثال هكذا ستعمل دالة Reduce

2024-07-02-18-12-54

بنفس المبدأ فهي تلف على قيم المصفوفة ثم تقوم بتخزينها بالتوالي حسب ما تريده أنت

مثال أخر للتعامل مع الأعداد

التجميع للإحصائيات يمكن استخدام reduce لحساب الإحصائيات مثل المتوسط أو العدد الإجمالي للعناصر التي تلبي شرطًا معينًا.

2024-07-02-11-50-52

accumulator يبدأ بالقيمة الابتدائية { count: 0, sum: 0 }.

currentValue هو العنصر الحالي في المصفوفة أثناء عملية التكرار.

ما يحدث في كل تكرار Loop:

accumulator.count++: يقوم بزيادة العداد count بمقدار 1 لكل عنصر في المصفوفة.

accumulator.sum += currentValue: يقوم بإضافة القيمة الحالية currentValue إلى المجموع sum.

return accumulator: يُرجع الكائن accumulator بعد تحديث القيم.

النتيجة النهائية

2024-07-02-11-51-14

كما ترى عزيزي القارئ دالة ال Reduce هي دالة قوية

تمكمن قوة دالة reduce في --SS-- في قدرتها على إجراء عمليات تحويل وتجميع متقدمة على المصفوفات بطرق مرنة وقوية

سأعطي مثال أخير لكنه شوي متقدم سنتعامل من خلاله مع Object

2024-07-02-11-52-54

في هذه المرة وعلى عكس الأمثلة السابقة فهنا سنتعامل مع Object وليس Array

**هنا نقوم بتعريف كائن data يحتوي على ثلاثة مفاتيح Keys (أسماء الأشخاص) وقيم Values (أعمارهم).

Object.keys(data):

هذه الدالة تُرجع مصفوفة تحتوي على جميع المفاتيح keys (الأسماء) في الكائن data.
النتيجة ستكون: ['Alice', 'Bob', 'Carol'].
.reduce((accumulator, key) => { ... }, []):

هنا دالة reduce سنُستخدمها لتقليل مصفوفة إلى قيمة واحدة بناءً على دالة push.
تبدأ بـ accumulator كقيمة ابتدائية، وهي في هذه الحالة مصفوفة فارغة [].

key هي المفتاح الحالي من المصفوفة التي تحتوي على المفاتيح ['Alice', 'Bob', 'Carol'].
data[key] تُعطي القيمة المقابلة للمفتاح في الكائن data (أي العمر).
accumulator.push({ name: key, age: data[key] }):


نقوم بإضافة كائن جديد إلى accumulator يحتوي على name كاسم الشخص وage كعمر الشخص.


return accumulator:
نقوم بإرجاع accumulator لتستمر العملية حتى النهاية.

النتيجة المتحصل عليها هي مصفوفة جديدة بها أسماء الأعضاء و أعمارهم

2024-07-02-11-53-15

أتمنى أن تكونوا فهمتم المثال الأخير رغم أنه مثال متقدم

والسلام عليكم ورحمة الله وبركاته

هذا الموضوع إهداء ونزول عند طلب الأخ @Electronics Programming


1📊0👍0👏0👌1🧠
د عبد الرحمن

  • المشاركات:
    15578
مشرف مشاكل الحاسب والشبكات
مشرف عالم البرمجة وملحقاتها
عضو في لجنة تطوير برنامج المنتديات
د عبد الرحمن

مشرف مشاكل الحاسب والشبكات
مشرف عالم البرمجة وملحقاتها
عضو في لجنة تطوير برنامج المنتديات
المشاركات: 15578
معدل المشاركات يوميا: 3
الأيام منذ الإنضمام: 5193
  • 21:08 - 2024/07/02
السلام عليكم

بارك الله فيك على الشرح،،

لو فقط تستطيع تظيف لبعض الاخوة تعمق في شرح callback فقليلون هم من لهم دراية بها حتى بدوال lambda

في ميزان الحسنات ان شاء الله ،،

0📊0👍0👏0👌0🧠
Electronics Programming
  • المشاركات: 635
    نقاط التميز: 2004
عضو نشط
Electronics Programming
عضو نشط
المشاركات: 635
نقاط التميز: 2004
معدل المشاركات يوميا: 0.4
الأيام منذ الإنضمام: 1569
  • 21:13 - 2024/07/02
السلام عليكم
شرح رائع و مستوى متقدم جدا
إستوعبت بفضل هذا الشرح عمل دالة Reduce و لم يبقى لدي أي غموض
المنتدى يحتاج لمثل هذه الشروحات الإحترافية
و مشكور على الإهداء ؛
0📊0👍0👏0👌0🧠
طالب عفو الرحمن
- عضوية مقفولة -
طالب عفو الرحمن
- عضوية مقفولة -
  • 21:15 - 2024/07/02
السلام عليكم

سأحاول في قادم الأيام أعمل على هذا الشرح وسيكون إهداءا لك أخي عبد الله

إقتباس لمشاركة: @د عبدالله 21:08:51 - 2024/07/02

السلام عليكم

بارك الله فيك على الشرح،،

لو فقط تستطيع تظيف لبعض الاخوة تعمق في شرح callback فقليلون هم من لهم دراية بها حتى بدوال lambda

في ميزان الحسنات ان شاء الله ،،

3📊0👍0👏1👌0🧠
طالب عفو الرحمن
- عضوية مقفولة -
طالب عفو الرحمن
- عضوية مقفولة -
  • 21:16 - 2024/07/02
هذا أقل واجب فأنت من إقترحت الموضوع علي في بادئ الأمر

@Electronics Programming

0📊0👍0👏0👌0🧠
محمد

  • المشاركات:
    47000
مراقب الكمبيوتر
مراقب التجارة والإقتصاد الحديث
عضو في لجنة تطوير برنامج المنتديات
محمد
مراقب الكمبيوتر
مراقب التجارة والإقتصاد الحديث
عضو في لجنة تطوير برنامج المنتديات
المشاركات: 47000
معدل المشاركات يوميا: 7.3
الأيام منذ الإنضمام: 6477
  • 23:55 - 2024/07/03
السلام عليكم ورحمة الله ـــ

بارك الله فيك اخي عبد العزيز ،، شرح بسيط وسلس لدالة مميزة ،،

عن نفسي كنت استعمل الطريقة الاولى ،، 😅 ،، مثل هده الدوال تختزل علينا الكثير من الاسطر ..

جعلها الله عملك هذا بميزان حسناتك …

0📊0👍0👏0👌0🧠
محمد

  • المشاركات:
    47000
مراقب الكمبيوتر
مراقب التجارة والإقتصاد الحديث
عضو في لجنة تطوير برنامج المنتديات
محمد
مراقب الكمبيوتر
مراقب التجارة والإقتصاد الحديث
عضو في لجنة تطوير برنامج المنتديات
  • 23:56 - 2024/07/03

لك من رقابة قسم الكمبيوتر

+30 نقطة

تحياتي


0📊0👍0👏0👌0🧠
حاتم Hatim

  • المشاركات:
    44498
نائب مراقب الكمبيوتر
حاتم Hatim
نائب مراقب الكمبيوتر
المشاركات: 44498
معدل المشاركات يوميا: 7
الأيام منذ الإنضمام: 6324
  • 00:35 - 2024/07/06
السلام عليكم و رحمة الله و بركاته
بارك الله فيك أخي عبد العزيزعلى الموضوع و شرحك المميز،
الله يجازيك كل خير... و لا تحرمنا من إبداعاتك ...
تحياتي و تقديري..
0📊0👍0👏0👌0🧠

الرد على المواضيع متوفر للأعضاء فقط.

الرجاء الدخول بعضويتك أو التسجيل بعضوية جديدة.

  • إسم العضوية: 
  • الكلمة السرية: 

 دالة [Reduce] وكيفية إستخذامها في J S شرح مفصل حصريبداية
الصفحة