دالة [Filter] وكيفية إستخذامها في J S شرح مفصل حصريط·آ¢ط·آ®ط·آ±
ط·آ§ط¸â€‍ط·آµط¸ظ¾ط·آ­ط·آ©
طالب عفو الرحمن
- عضوية مقفولة -
طالب عفو الرحمن
- عضوية مقفولة -
  • 19:08 - 2024/06/26

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

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

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

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

Filter

وظيفة filter في Ja va S c r i pt تُستخدم لإنشاء مصفوفة جديدة تحتوي على عناصر يتم اختيارها استنادًا إلى شرط معين.

وتُستخدم filter بشكل رئيسي في الحالات التالية:

  • تصفية البيانات: عندما تحتاج إلى استخراج مجموعة من العناصر من مصفوفة استنادًا إلى شرط معين، مثل جميع العناصر التي تلبي شرط معين مثل القيم الإيجابية أو السلع بسعر معين.

  • فرز البيانات: يمكن استخدام filter لفرز البيانات بناءً على مجموعة متنوعة من الشروط، مثل تصفية مجموعة من الموظفين بناءً على القسم أو العمرأو أي معيار آخر.

  • التعامل مع القيم الفارغة أو القيم الخاصة : عندما تحتاج إلى تصفية القيم الفارغة أو القيم التي لا تمتلك البيانات المطلوبة.

سنتعرض لكل حالة من الحالات السابقة بمثال حي حتى تكتمل الصورة

قبل البدء :

وجب التنبيه على أنني سأستخذم 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

1- تصفية البيانات

كما أشرت من قبل تصفية البيانات أعني بها التخلص من بعد البيانات التي لا تحترم شرط ما أضعه

لنعطي مثالا حيا حتى تتضح المعلومة

2024-06-26-16-12-23

هذه مصفوفة من الأعداد الإيجابية و السلبية أريد أن أفرز فقط الأعداد الإيجابية مثلا

قبل أن نتطرق إلى دالة هذا الدرس و هي Filter لنرى كيف يمككنا فرز الأعداد عن طريق Loop

عرفنا مصفوفة فارغة بإسم positiveNumbers و التي سيتم ملئها فيما بعد

نضع تمبلت for المعتاد بحيث نعرف متغير i يكون في البداية يساوي 0 ، مادام i لم يصل إلى طول المصفوفة (numbers.length)

سيظل يطبع الشرط الذي وضعته ، بالنسبة للشرط فهو بسيط

إذا كان العدد الذي وصلت له أكبر أو يساوي 0 ضعه في مصفوفة positiveNumbers

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

و في الأخير console.log الأعداد الموجبة التي حصلت عليها

2024-06-26-16-20-30

عمل شاق يأخذ الوقت الكثير ، لهذا و في مثل هذه السيناريوهات يمكننا اللجوء إلى دالة Filter

إليك الآن كم من سطر سيتم إختزاله

2024-06-26-16-21-52

تقريبا خمس أسطر تم إختزاله لكي تكون النتيجة مشابهة لما سبق

2024-06-26-16-22-15

بل يمكننا إختزال سطر إضافي ، إليك الصورة

2024-06-26-16-22-59

مادام عندنا return يسبقه معقوفات يمكننا إزالتهم في Js

2- فرز البيانات

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

تخيل معي لديك مصفوفة بها موظفي شركة ما و أنت تريد فرز فقط موظفين من رتبة معينة

إليك المثال

2024-06-26-16-29-22

لكي تكون النتيجة كما يلي

2024-06-26-16-30-41

بحيث حصلنا على مصفوفة جديدة تتكون من Object الذي يحتوي على الموظفين من رتبة HR

ثم يمكنك فيما بعد أن تستخرج فقط أسماءهم

2024-06-26-16-33-16

3- التعامل مع القيم الفارغة أو القيم الخاصة

أعني بهذا كيفية التعامل مع القيم غير المرغوب فيها

إليك المثال

2024-06-26-16-35-39

لكي نتخلص من القيم غير المرغوب فيها

2024-06-26-17-03-06

لكي يكون الناتج هو

2024-06-26-17-03-26

باختصار، filter هي دالة قوية في --SS-- تُساعد في اختيار العناصر المطلوبة من مصفوفة بناءً على شروط معينة، مما يجعلها مفيدة في مجموعة متنوعة من السيناريوهات بما في ذلك التصفية، والفرز، والتعامل مع القيم الفارغة


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

  • ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾:
    44692
نائب مراقب الكمبيوتر
حاتم Hatim
نائب مراقب الكمبيوتر
ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾: 44692
ط¸â€¦ط·آ¹ط·آ¯ط¸â€‍ ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾ ط¸ظ¹ط¸ث†ط¸â€¦ط¸ظ¹ط·آ§: 7
ط·آ§ط¸â€‍ط·آ£ط¸ظ¹ط·آ§ط¸â€¦ ط¸â€¦ط¸â€ ط·آ° ط·آ§ط¸â€‍ط·آ¥ط¸â€ ط·آ¶ط¸â€¦ط·آ§ط¸â€¦: 6385
  • 19:14 - 2024/06/26
السلام عليكم و رحمة الله و بركاته
بارك الله فيك أخي العزيز.. على الموضوع و الشرح المميز. في ميزان حسناتك يا طيب
تحياتي و تقديري.
0📊0👍0👏0👌0🧠
Koora Madrid

  • ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾:
    1834025
نائب مراقب تلفزيون كووورة
أفضل عضو لهذا الشهر في منتدى التعارف الرياضي
Koora Madrid
نائب مراقب تلفزيون كووورة
أفضل عضو لهذا الشهر في منتدى التعارف الرياضي
ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾: 1834025
ط¸â€¦ط·آ¹ط·آ¯ط¸â€‍ ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾ ط¸ظ¹ط¸ث†ط¸â€¦ط¸ظ¹ط·آ§: 296.2
ط·آ§ط¸â€‍ط·آ£ط¸ظ¹ط·آ§ط¸â€¦ ط¸â€¦ط¸â€ ط·آ° ط·آ§ط¸â€‍ط·آ¥ط¸â€ ط·آ¶ط¸â€¦ط·آ§ط¸â€¦: 6192
  • 19:19 - 2024/06/26
شكرا لك اخي العزيز على الشرح

إن شاء الله يستفيد الجميع من هذا الشرح

تحياتي لك

0📊0👍0👏0👌0🧠
Electronics Programming
  • ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾: 636
    ط¸â€ ط¸â€ڑط·آ§ط·آ· ط·آ§ط¸â€‍ط·ع¾ط¸â€¦ط¸ظ¹ط·آ²: 2024
ط·آ¹ط·آ¶ط¸ث† ط¸â€ ط·آ´ط·آ·
Electronics Programming
ط·آ¹ط·آ¶ط¸ث† ط¸â€ ط·آ´ط·آ·
ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾: 636
ط¸â€ ط¸â€ڑط·آ§ط·آ· ط·آ§ط¸â€‍ط·ع¾ط¸â€¦ط¸ظ¹ط·آ²: 2024
ط¸â€¦ط·آ¹ط·آ¯ط¸â€‍ ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾ ط¸ظ¹ط¸ث†ط¸â€¦ط¸ظ¹ط·آ§: 0.4
ط·آ§ط¸â€‍ط·آ£ط¸ظ¹ط·آ§ط¸â€¦ ط¸â€¦ط¸â€ ط·آ° ط·آ§ط¸â€‍ط·آ¥ط¸â€ ط·آ¶ط¸â€¦ط·آ§ط¸â€¦: 1630
  • 19:42 - 2024/06/26
السلام عليكم
شرح مميز جدا
كما شرحت فدالة Filter أفضل من الحلقات و أسهل
المرة القادمة لو تفضلت و تشرح لنا Map & Reduce
مشكور
0📊0👍0👏0👌0🧠
طالب عفو الرحمن
- عضوية مقفولة -
طالب عفو الرحمن
- عضوية مقفولة -
  • 19:45 - 2024/06/26

@Electronics Programming

السلام عليكم

طلبك أمر أخي الغالي

كما تفضلت فدالة Filter أفضل من الحلقات و أسهل

خصوصا إذا علمنا أنها تنشأ مصفوفة من جديد ولا تحور mutate المصفوفة الأصلية

0📊0👍0👏0👌0🧠
Electronics Programming
  • ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾: 636
    ط¸â€ ط¸â€ڑط·آ§ط·آ· ط·آ§ط¸â€‍ط·ع¾ط¸â€¦ط¸ظ¹ط·آ²: 2024
ط·آ¹ط·آ¶ط¸ث† ط¸â€ ط·آ´ط·آ·
Electronics Programming
ط·آ¹ط·آ¶ط¸ث† ط¸â€ ط·آ´ط·آ·
ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾: 636
ط¸â€ ط¸â€ڑط·آ§ط·آ· ط·آ§ط¸â€‍ط·ع¾ط¸â€¦ط¸ظ¹ط·آ²: 2024
ط¸â€¦ط·آ¹ط·آ¯ط¸â€‍ ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾ ط¸ظ¹ط¸ث†ط¸â€¦ط¸ظ¹ط·آ§: 0.4
ط·آ§ط¸â€‍ط·آ£ط¸ظ¹ط·آ§ط¸â€¦ ط¸â€¦ط¸â€ ط·آ° ط·آ§ط¸â€‍ط·آ¥ط¸â€ ط·آ¶ط¸â€¦ط·آ§ط¸â€¦: 1630
  • 20:06 - 2024/06/26
إقتباس لمشاركة:  @طالب عفو الرحمن 19:45 - 2024/06/26  

 مشكور على المعلومة
تبدو أنها فكرة جيدة ترك المصفوفة الأصلية كما هي
و إنشاء جدول جديد في المتغيرات المفلترة
مشكور مرة آخرى

 

0📊0👍0👏0👌0🧠
طالب عفو الرحمن
- عضوية مقفولة -
طالب عفو الرحمن
- عضوية مقفولة -
  • 20:20 - 2024/06/26
@Electronics Programming

خصوصا إذا كنت شغال على ReactJs

0📊0👍0👏0👌0🧠
saifxcode
  • ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾: 1592
    ط¸â€ ط¸â€ڑط·آ§ط·آ· ط·آ§ط¸â€‍ط·ع¾ط¸â€¦ط¸ظ¹ط·آ²: 2842
مشرف سابق
saifxcode
مشرف سابق
ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾: 1592
ط¸â€ ط¸â€ڑط·آ§ط·آ· ط·آ§ط¸â€‍ط·ع¾ط¸â€¦ط¸ظ¹ط·آ²: 2842
ط¸â€¦ط·آ¹ط·آ¯ط¸â€‍ ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾ ط¸ظ¹ط¸ث†ط¸â€¦ط¸ظ¹ط·آ§: 1.4
ط·آ§ط¸â€‍ط·آ£ط¸ظ¹ط·آ§ط¸â€¦ ط¸â€¦ط¸â€ ط·آ° ط·آ§ط¸â€‍ط·آ¥ط¸â€ ط·آ¶ط¸â€¦ط·آ§ط¸â€¦: 1167
  • 14:22 - 2024/06/27
السلام عليكم ورحمة الله وبركاته
موضوع متعوب عليه و مميز
بارك الله فيك عزيزي
0📊0👍0👏0👌0🧠
محمد

  • ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾:
    47000
مراقب الكمبيوتر
مراقب التجارة والإقتصاد الحديث
عضو في لجنة تطوير برنامج المنتديات
محمد
مراقب الكمبيوتر
مراقب التجارة والإقتصاد الحديث
عضو في لجنة تطوير برنامج المنتديات
ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾: 47000
ط¸â€¦ط·آ¹ط·آ¯ط¸â€‍ ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾ ط¸ظ¹ط¸ث†ط¸â€¦ط¸ظ¹ط·آ§: 7.2
ط·آ§ط¸â€‍ط·آ£ط¸ظ¹ط·آ§ط¸â€¦ ط¸â€¦ط¸â€ ط·آ° ط·آ§ط¸â€‍ط·آ¥ط¸â€ ط·آ¶ط¸â€¦ط·آ§ط¸â€¦: 6538
  • 16:05 - 2024/06/27

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

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

البساطة والتدقيق في الشرح ،،

استعمل كثيرا filter عند اشتغالي بـــ ajax واستقبال المعلومات من قاعدة البيانات ،، من تم فلترتتها حسب احتياجات الصفحة او الاكدسيوب المعنية …


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

+30 نقطة

تحياتي


0📊0👍0👏0👌0🧠
NobleLion

  • ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾:
    11690
مشرف القنوات الرياضية الأجنبية
مشرف الشهر بقسم منتديات تلفزيون كووورة
NobleLion

مشرف القنوات الرياضية الأجنبية
مشرف الشهر بقسم منتديات تلفزيون كووورة
ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾: 11690
ط¸â€¦ط·آ¹ط·آ¯ط¸â€‍ ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾ ط¸ظ¹ط¸ث†ط¸â€¦ط¸ظ¹ط·آ§: 3
ط·آ§ط¸â€‍ط·آ£ط¸ظ¹ط·آ§ط¸â€¦ ط¸â€¦ط¸â€ ط·آ° ط·آ§ط¸â€‍ط·آ¥ط¸â€ ط·آ¶ط¸â€¦ط·آ§ط¸â€¦: 3959
  • 01:25 - 2024/06/28
شكرا لك اخي العزيز على الشرح
0📊0👍0👏0👌0🧠
ابو ريكارد

  • ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾: 7052
    ط¸â€ ط¸â€ڑط·آ§ط·آ· ط·آ§ط¸â€‍ط·ع¾ط¸â€¦ط¸ظ¹ط·آ²: 6098
ط·آ¹ط·آ¶ط¸ث† ط·آ£ط·آ³ط·آ§ط·آ³ط¸ظ¹
ابو ريكارد

ط·آ¹ط·آ¶ط¸ث† ط·آ£ط·آ³ط·آ§ط·آ³ط¸ظ¹
ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾: 7052
ط¸â€ ط¸â€ڑط·آ§ط·آ· ط·آ§ط¸â€‍ط·ع¾ط¸â€¦ط¸ظ¹ط·آ²: 6098
ط¸â€¦ط·آ¹ط·آ¯ط¸â€‍ ط·آ§ط¸â€‍ط¸â€¦ط·آ´ط·آ§ط·آ±ط¸ئ’ط·آ§ط·ع¾ ط¸ظ¹ط¸ث†ط¸â€¦ط¸ظ¹ط·آ§: 1.8
ط·آ§ط¸â€‍ط·آ£ط¸ظ¹ط·آ§ط¸â€¦ ط¸â€¦ط¸â€ ط·آ° ط·آ§ط¸â€‍ط·آ¥ط¸â€ ط·آ¶ط¸â€¦ط·آ§ط¸â€¦: 3900
  • 12:36 - 2024/06/28
جيد جيد عاشت الايادي
0📊0👍0👏0👌0🧠

ط·آ§ط¸â€‍ط·آ±ط·آ¯ ط·آ¹ط¸â€‍ط¸â€° ط·آ§ط¸â€‍ط¸â€¦ط¸ث†ط·آ§ط·آ¶ط¸ظ¹ط·آ¹ ط¸â€¦ط·ع¾ط¸ث†ط¸ظ¾ط·آ± ط¸â€‍ط¸â€‍ط·آ£ط·آ¹ط·آ¶ط·آ§ط·طŒ ط¸ظ¾ط¸â€ڑط·آ·.

ط·آ§ط¸â€‍ط·آ±ط·آ¬ط·آ§ط·طŒ ط·آ§ط¸â€‍ط·آ¯ط·آ®ط¸ث†ط¸â€‍ ط·آ¨ط·آ¹ط·آ¶ط¸ث†ط¸ظ¹ط·ع¾ط¸ئ’ ط·آ£ط¸ث† ط·آ§ط¸â€‍ط·ع¾ط·آ³ط·آ¬ط¸ظ¹ط¸â€‍ ط·آ¨ط·آ¹ط·آ¶ط¸ث†ط¸ظ¹ط·آ© ط·آ¬ط·آ¯ط¸ظ¹ط·آ¯ط·آ©.

  • ط·آ¥ط·آ³ط¸â€¦ ط·آ§ط¸â€‍ط·آ¹ط·آ¶ط¸ث†ط¸ظ¹ط·آ©: 
  • ط·آ§ط¸â€‍ط¸ئ’ط¸â€‍ط¸â€¦ط·آ© ط·آ§ط¸â€‍ط·آ³ط·آ±ط¸ظ¹ط·آ©: 

 دالة [Filter] وكيفية إستخذامها في J S شرح مفصل حصريط·آ¨ط·آ¯ط·آ§ط¸ظ¹ط·آ©
ط·آ§ط¸â€‍ط·آµط¸ظ¾ط·آ­ط·آ©