أساسيات JavaScript: المصفوفات والحلقات

اختبار ما قبل المحاضرة اختبار ما قبل المحاضرة هل تساءلت يومًا كيف تحتفظ المواقع الإلكترونية بعناصر سلة التسوق أو تعرض قائمة أصدقائك؟ هنا تأتي المصفوفات والحلقات. المصفوفات تشبه الحاويات الرقمية التي تحتوي على معلومات متعددة، بينما تتيح لك الحلقات العمل مع كل تلك البيانات بكفاءة دون الحاجة إلى كتابة كود متكرر. معًا، يشكل هذان المفهومان الأساس لمعالجة المعلومات في برامجك. ستتعلم كيف تنتقل من كتابة كل خطوة يدويًا إلى إنشاء كود ذكي وفعال يمكنه معالجة مئات أو حتى آلاف العناصر بسرعة. بنهاية هذه الدرس، ستفهم كيفية إنجاز مهام البيانات المعقدة باستخدام بضعة أسطر فقط من الكود. دعونا نستكشف هذه المفاهيم البرمجية الأساسية. ## المصفوفات فكر في المصفوفات كخزانة ملفات رقمية - بدلاً من تخزين مستند واحد في كل درج، يمكنك تنظيم عناصر متعددة ذات صلة في حاوية واحدة منظمة. في مصطلحات البرمجة، تتيح لك المصفوفات تخزين معلومات متعددة في حزمة واحدة منظمة. سواء كنت تبني معرض صور، تدير قائمة مهام، أو تتابع أعلى النقاط في لعبة، توفر المصفوفات الأساس لتنظيم البيانات. دعونا نرى كيف تعمل. ✅ المصفوفات موجودة في كل مكان! هل يمكنك التفكير في مثال واقعي لمصفوفة، مثل مصفوفة ألواح شمسية؟ ### إنشاء المصفوفات إنشاء مصفوفة أمر بسيط للغاية - فقط استخدم الأقواس المربعة! ما الذي يحدث هنا؟ لقد أنشأت للتو حاوية فارغة باستخدام تلك الأقواس المربعة []. فكر فيها كرف مكتبة فارغ - إنه جاهز لحمل أي كتب تريد تنظيمها هناك. يمكنك أيضًا ملء المصفوفة بقيم أولية من البداية: أشياء رائعة يجب ملاحظتها: - يمكنك تخزين نصوص، أرقام، أو حتى قيم صحيحة/خاطئة في نفس المصفوفة - فقط افصل بين كل عنصر بفاصلة - بسيط! - المصفوفات مثالية للحفاظ على المعلومات ذات الصلة معًا ### فهرسة المصفوفات هناك شيء قد يبدو غير مألوف في البداية: المصفوفات ترقم عناصرها بدءًا من 0، وليس 1. هذا الفهرسة القائمة على الصفر لها جذورها في كيفية عمل ذاكرة الكمبيوتر - لقد كانت تقليدًا برمجيًا منذ الأيام الأولى للغات البرمجة مثل C. كل موقع في المصفوفة يحصل على رقم عنوان خاص به يسمى الفهرس. ✅ هل يفاجئك أن المصفوفات تبدأ بالفهرس صفر؟ في بعض لغات البرمجة، تبدأ الفهارس من 1. هناك تاريخ مثير للاهتمام حول هذا الموضوع يمكنك قراءته على ويكيبيديا. الوصول إلى عناصر المصفوفة: تفصيل ما يحدث هنا: - يستخدم تدوين الأقواس المربعة مع رقم الفهرس للوصول إلى العناصر - يعيد القيمة المخزنة في ذلك الموقع المحدد في المصفوفة - يبدأ العد من 0، مما يجعل العنصر الأول فهرسه 0 تعديل عناصر المصفوفة: في المثال أعلاه، قمنا بـ: - تعديل العنصر عند الفهرس 4 من "Rocky Road" إلى "Butter Pecan" - إضافة عنصر جديد "Cookie Dough" عند الفهرس 5 - توسيع طول المصفوفة تلقائيًا عند الإضافة خارج الحدود الحالية ### طول المصفوفة والطرق الشائعة تأتي المصفوفات بخصائص وطرق مدمجة تجعل العمل مع البيانات أسهل بكثير. إيجاد طول المصفوفة: نقاط رئيسية يجب تذكرها: - يعيد العدد الإجمالي للعناصر في المصفوفة - يتحدث تلقائيًا عند إضافة أو إزالة العناصر - يوفر عدًا ديناميكيًا مفيدًا للحلقات والتحقق طرق المصفوفة الأساسية: فهم هذه الطرق: - يضيف عناصر باستخدام push() (النهاية) وunshift() (البداية) - يزيل عناصر باستخدام pop() (النهاية) وshift() (البداية) - يحدد العناصر باستخدام indexOf() ويتحقق من وجودها باستخدام includes() - يعيد قيمًا مفيدة مثل العناصر المزالة أو مواقع الفهارس ✅ جرب بنفسك! استخدم وحدة التحكم في متصفحك لإنشاء وتعديل مصفوفة من إنشائك. ### 🧠 فحص أساسيات المصفوفة: تنظيم بياناتك اختبر فهمك للمصفوفات: - لماذا تعتقد أن المصفوفات تبدأ العد من 0 بدلاً من 1؟ - ماذا يحدث إذا حاولت الوصول إلى فهرس غير موجود (مثل arr[100] في مصفوفة تحتوي على 5 عناصر)؟ - هل يمكنك التفكير في ثلاثة سيناريوهات واقعية حيث تكون المصفوفات مفيدة؟ ## الحلقات فكر في العقوبة الشهيرة في روايات تشارلز ديكنز حيث كان الطلاب يكتبون الجمل مرارًا وتكرارًا على اللوح. تخيل لو كان بإمكانك ببساطة أن تطلب من شخص ما "اكتب هذه الجملة 100 مرة" ويتم ذلك تلقائيًا. هذا بالضبط ما تفعله الحلقات في الكود الخاص بك. الحلقات تشبه وجود مساعد لا يكل يمكنه تكرار المهام دون خطأ. سواء كنت بحاجة إلى التحقق من كل عنصر في سلة التسوق أو عرض جميع الصور في ألبوم، فإن الحلقات تتعامل مع التكرار بكفاءة. يوفر JavaScript عدة أنواع من الحلقات للاختيار من بينها. دعونا نلقي نظرة على كل نوع ونفهم متى نستخدمه. ### حلقة For حلقة for تشبه ضبط مؤقت - تعرف بالضبط عدد المرات التي تريد أن يحدث فيها شيء ما. إنها منظمة للغاية ويمكن التنبؤ بها، مما يجعلها مثالية عند العمل مع المصفوفات أو الحاجة إلى عد الأشياء. هيكل حلقة For: خطوة بخطوة، إليك ما يحدث: - تهيئة متغير العداد i إلى 0 في البداية - التحقق من الشرط i < 10 قبل كل تكرار - تنفيذ كتلة الكود عندما يكون الشرط صحيحًا - زيادة قيمة i بمقدار 1 بعد كل تكرار باستخدام i++ - التوقف عندما يصبح الشرط خاطئًا (عندما يصل i إلى 10) ✅ قم بتشغيل هذا الكود في وحدة التحكم في المتصفح. ماذا يحدث عندما تقوم بإجراء تغييرات صغيرة على العداد، الشرط، أو تعبير التكرار؟ هل يمكنك جعله يعمل بالعكس، مما ينشئ عد تنازلي؟ ### 🗓️ فحص إتقان حلقة For: التكرار المنضبط قيّم فهمك لحلقة for: - ما هي الأجزاء الثلاثة لحلقة for، وما وظيفة كل منها؟ - كيف يمكنك تكرار المصفوفة بالعكس؟ - ماذا يحدث إذا نسيت جزء الزيادة (i++)؟ ### حلقة While حلقة while تشبه قول "استمر في فعل هذا حتى..." - قد لا تعرف بالضبط عدد المرات التي ستعمل فيها، لكنك تعرف متى تتوقف. إنها مثالية لأشياء مثل طلب إدخال المستخدم حتى يعطيك ما تحتاجه، أو البحث في البيانات حتى تجد ما تبحث عنه. خصائص حلقة While: - تستمر في التنفيذ طالما أن الشرط صحيح - تتطلب إدارة يدوية لأي متغيرات عداد - تتحقق من الشرط قبل كل تكرار - تخاطر بالحلقات اللانهائية إذا لم يصبح الشرط خاطئًا أبدًا فهم هذه الأمثلة: - تدير متغير العداد i يدويًا داخل جسم الحلقة - تزيد العداد لمنع الحلقات اللانهائية - توضح حالة استخدام عملية مع إدخال المستخدم وتحديد المحاولات - تتضمن آليات أمان لمنع التنفيذ اللامتناهي ### ♾️ فحص حكمة حلقة While: التكرار القائم على الشرط اختبر فهمك لحلقات while: - ما هو الخطر الرئيسي عند استخدام حلقات while؟ - متى تختار حلقة while بدلاً من حلقة for؟ - كيف يمكنك منع الحلقات اللانهائية؟ ### بدائل الحلقات الحديثة يوفر JavaScript صياغة حلقات حديثة يمكن أن تجعل الكود الخاص بك أكثر وضوحًا وأقل عرضة للأخطاء. حلقة For...of (ES6+): المزايا الرئيسية لحلقة for...of: - تلغي إدارة الفهرس وأخطاء الفهرسة - توفر الوصول المباشر لعناصر المصفوفة - تحسن وضوح الكود وتقلل من تعقيد الصياغة طريقة forEach: ما تحتاج إلى معرفته عن forEach: - تنفذ وظيفة لكل عنصر في المصفوفة - توفر قيمة العنصر والفهرس كمعلمات - لا يمكن إيقافها مبكرًا (على عكس الحلقات التقليدية) - تعيد undefined (لا تنشئ مصفوفة جديدة) ✅ لماذا تختار حلقة for مقابل حلقة while؟ 17 ألف مشاهد كان لديهم نفس السؤال على StackOverflow، وبعض الآراء قد تكون مثيرة للاهتمام بالنسبة لك. ### 🎨 فحص صياغة الحلقات الحديثة: تبني ES6+ قيّم فهمك للبرمجة الحديثة في JavaScript: - ما هي مزايا for...of مقارنة بالحلقات التقليدية؟ - متى قد تفضل الحلقات التقليدية؟ - ما الفرق بين forEach وmap؟ ## الحلقات والمصفوفات دمج المصفوفات مع الحلقات يخلق قدرات قوية لمعالجة البيانات. هذا الاقتران أساسي للعديد من مهام البرمجة، من عرض القوائم إلى حساب الإحصائيات. معالجة المصفوفات التقليدية: دعونا نفهم كل نهج: - يستخدم خاصية طول المصفوفة لتحديد حدود الحلقة - يصل إلى العناصر بواسطة الفهرس في الحلقات التقليدية - يوفر الوصول المباشر للعناصر في الحلقات من نوع for...of - يعالج كل عنصر في المصفوفة مرة واحدة بالضبط مثال عملي لمعالجة البيانات: إليك كيف يعمل هذا الكود: - يهيئ متغيرات التتبع للمجموع والقيم القصوى والدنيا - يعالج كل درجة باستخدام حلقة واحدة فعالة - يجمع الإجمالي لحساب المتوسط - يتتبع أعلى وأدنى القيم أثناء التكرار - يحسب الإحصائيات النهائية بعد انتهاء الحلقة ✅ جرب التكرار على مصفوفة من إنشائك في وحدة التحكم في المتصفح. --- ## تحدي GitHub Copilot Agent 🚀 استخدم وضع Agent لإكمال التحدي التالي: الوصف: قم ببناء وظيفة شاملة لمعالجة البيانات تجمع بين المصفوفات والحلقات لتحليل مجموعة بيانات وتوليد رؤى مفيدة. المهمة: قم بإنشاء وظيفة تسمى analyzeGrades تأخذ مصفوفة من كائنات درجات الطلاب (كل منها يحتوي على خصائص الاسم والدرجة) وتعيد كائنًا يحتوي على إحصائيات تشمل أعلى درجة، أدنى درجة، متوسط الدرجة، عدد الطلاب الذين اجتازوا (درجة >= 70)، ومصفوفة بأسماء الطلاب الذين حصلوا على درجات أعلى من المتوسط. استخدم على الأقل نوعين مختلفين من الحلقات في الحل. تعرف على المزيد حول وضع Agent هنا. ## 🚀 التحدي تقدم JavaScript العديد من الطرق الحديثة للتعامل مع المصفوفات التي يمكن أن تحل محل الحلقات التقليدية لأداء مهام محددة. استكشف forEach، for-of، map، filter، و reduce. تحديك: قم بإعادة كتابة مثال درجات الطلاب باستخدام ثلاثة طرق مختلفة على الأقل من طرق المصفوفات. لاحظ كيف يصبح الكود أكثر وضوحًا وسهولة في القراءة باستخدام صياغة JavaScript الحديثة. ## اختبار ما بعد المحاضرة اختبار ما بعد المحاضرة ## المراجعة والدراسة الذاتية تحتوي المصفوفات في JavaScript على العديد من الطرق المفيدة جدًا لمعالجة البيانات. اقرأ عن هذه الطرق وجرب بعضها (مثل push، pop، slice و splice) على مصفوفة من إنشائك. ## الواجب حلقة على مصفوفة --- ## 📊 ملخص أدواتك للمصفوفات والحلقات --- ## 🚀 جدولك الزمني لإتقان المصفوفات والحلقات ### ⚡ ما يمكنك القيام به في الدقائق الخمس القادمة - [ ] أنشئ مصفوفة لأفلامك المفضلة وقم بالوصول إلى عناصر محددة - [ ] اكتب حلقة for تعد من 1 إلى 10 - [ ] جرب تحدي الطرق الحديثة للمصفوفات من الدرس - [ ] تدرب على فهرسة المصفوفات في وحدة التحكم بالمتصفح ### 🎯 ما يمكنك إنجازه خلال هذه الساعة - [ ] أكمل اختبار ما بعد الدرس وراجع أي مفاهيم صعبة - [ ] قم ببناء محلل شامل للدرجات من تحدي GitHub Copilot - [ ] أنشئ عربة تسوق بسيطة تضيف وتزيل العناصر - [ ] تدرب على التحويل بين أنواع الحلقات المختلفة - [ ] جرب طرق المصفوفات مثل push، pop، slice، و splice ### 📅 رحلة معالجة البيانات لمدة أسبوع - [ ] أكمل واجب "حلقة على مصفوفة" مع تحسينات إبداعية - [ ] قم ببناء تطبيق قائمة مهام باستخدام المصفوفات والحلقات - [ ] أنشئ آلة حاسبة بسيطة للإحصائيات للبيانات الرقمية - [ ] تدرب باستخدام طرق المصفوفات في MDN - [ ] قم ببناء واجهة معرض صور أو قائمة تشغيل موسيقية - [ ] استكشف البرمجة الوظيفية باستخدام map، filter، و reduce ### 🌟 تحولك خلال شهر - [ ] إتقان العمليات المتقدمة على المصفوفات وتحسين الأداء - [ ] قم ببناء لوحة تحكم كاملة لتصور البيانات - [ ] ساهم في مشاريع مفتوحة المصدر تتعلق بمعالجة البيانات - [ ] علم شخصًا آخر عن المصفوفات والحلقات باستخدام أمثلة عملية - [ ] أنشئ مكتبة شخصية لوظائف معالجة البيانات القابلة لإعادة الاستخدام - [ ] استكشف الخوارزميات وهياكل البيانات المبنية على المصفوفات ### 🏆 تسجيل الوصول النهائي لبطل معالجة البيانات احتفل بإتقانك للمصفوفات والحلقات: - ما هي العملية الأكثر فائدة على المصفوفات التي تعلمتها للتطبيقات الواقعية؟ - أي نوع من الحلقات يبدو أكثر طبيعية بالنسبة لك ولماذا؟ - كيف غير فهمك للمصفوفات والحلقات نهجك في تنظيم البيانات؟ - ما هي مهمة معالجة البيانات المعقدة التي ترغب في التعامل معها بعد ذلك؟ --- إخلاء المسؤولية: تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.