9.8 KiB

Raw Blame History

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

رسم توضيحي بواسطة Tomomi Imura

اختبار ما قبل المحاضرة

تتناول هذه الدرس أساسيات لغة JavaScript، وهي اللغة التي تضيف التفاعل إلى الويب. في هذا الدرس، ستتعلم عن المصفوفات والحلقات، والتي تُستخدم لمعالجة البيانات.

🎥 انقر على الصور أعلاه لمشاهدة فيديوهات حول المصفوفات والحلقات.

يمكنك أخذ هذا الدرس على Microsoft Learn!

المصفوفات

العمل مع البيانات هو مهمة شائعة في أي لغة برمجة، ويصبح الأمر أسهل عندما يتم تنظيم البيانات في شكل هيكلي مثل المصفوفات. باستخدام المصفوفات، يتم تخزين البيانات في هيكل يشبه القائمة. واحدة من الفوائد الرئيسية للمصفوفات هي أنه يمكنك تخزين أنواع مختلفة من البيانات في مصفوفة واحدة.

✅ المصفوفات موجودة في كل مكان حولنا! هل يمكنك التفكير في مثال واقعي على المصفوفات، مثل مصفوفة الألواح الشمسية؟

صيغة كتابة المصفوفة هي زوج من الأقواس المربعة.

let myArray = [];

هذه مصفوفة فارغة، ولكن يمكن تعريف المصفوفات وهي تحتوي بالفعل على بيانات. يتم فصل القيم المتعددة في المصفوفة بفاصلة.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

يتم تخصيص قيم المصفوفة قيمة فريدة تُسمى الفهرس، وهو رقم صحيح يتم تخصيصه بناءً على المسافة من بداية المصفوفة. في المثال أعلاه، القيمة النصية "Chocolate" لها فهرس 0، وفهرس "Rocky Road" هو 4. استخدم الفهرس مع الأقواس المربعة لاسترجاع أو تغيير أو إدخال قيم المصفوفة.

✅ هل يفاجئك أن المصفوفات تبدأ من الفهرس صفر؟ في بعض لغات البرمجة، تبدأ الفهارس من 1. هناك تاريخ مثير للاهتمام حول هذا الموضوع، يمكنك قراءته على ويكيبيديا.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"

يمكنك استخدام الفهرس لتغيير قيمة، مثل هذا:

iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"

ويمكنك إدخال قيمة جديدة في فهرس معين مثل هذا:

iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"

✅ الطريقة الأكثر شيوعًا لإضافة قيم إلى المصفوفة هي باستخدام مشغلات المصفوفة مثل array.push()

لمعرفة عدد العناصر الموجودة في المصفوفة، استخدم خاصية length.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5

✅ جرب بنفسك! استخدم وحدة التحكم في متصفحك لإنشاء ومعالجة مصفوفة من صنعك.

الحلقات

تسمح لنا الحلقات بتنفيذ مهام متكررة أو تكرارية، ويمكن أن توفر الكثير من الوقت والرمز. يمكن أن تختلف كل تكرار في متغيراتها وقيمها وشروطها. هناك أنواع مختلفة من الحلقات في JavaScript، وكلها لها اختلافات صغيرة، لكنها تقوم بنفس الوظيفة: التكرار على البيانات.

حلقة For

تتطلب حلقة for ثلاثة أجزاء للتكرار:

counter متغير يتم عادةً تهيئته برقم يعد عدد التكرارات
condition تعبير يستخدم عوامل المقارنة لإيقاف الحلقة عندما يصبح false
iteration-expression يتم تشغيله في نهاية كل تكرار، ويُستخدم عادةً لتغيير قيمة العداد

// Counting up to 10
for (let i = 0; i < 10; i++) {
  console.log(i);
}

✅ قم بتشغيل هذا الكود في وحدة التحكم في المتصفح. ماذا يحدث عندما تقوم بإجراء تغييرات صغيرة على العداد أو الشرط أو تعبير التكرار؟ هل يمكنك جعله يعمل بالعكس، ليقوم بالعد التنازلي؟

حلقة While

على عكس صيغة حلقة for، تتطلب حلقات while فقط شرطًا لإيقاف الحلقة عندما يصبح الشرط false. تعتمد الشروط في الحلقات عادةً على قيم أخرى مثل العدادات، ويجب إدارتها أثناء الحلقة. يجب إنشاء قيم البداية للعدادات خارج الحلقة، وأي تعبيرات لتلبية شرط، بما في ذلك تغيير العداد، يجب الحفاظ عليها داخل الحلقة.

//Counting up to 10
let i = 0;
while (i < 10) {
 console.log(i);
 i++;
}

✅ لماذا تختار حلقة for مقابل حلقة while؟ 17 ألف مشاهد كان لديهم نفس السؤال على StackOverflow، وبعض الآراء قد تكون مثيرة للاهتمام بالنسبة لك.

الحلقات والمصفوفات

تُستخدم المصفوفات غالبًا مع الحلقات لأن معظم الشروط تتطلب طول المصفوفة لإيقاف الحلقة، ويمكن أن يكون الفهرس أيضًا قيمة العداد.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed

✅ جرب التكرار على مصفوفة من صنعك في وحدة التحكم في المتصفح.

تحدي GitHub Copilot Agent 🚀

استخدم وضع Agent لإكمال التحدي التالي:

الوصف: قم ببناء وظيفة معالجة بيانات تجمع بين المصفوفات والحلقات لتحليل مجموعة بيانات.

المهمة: قم بإنشاء وظيفة تُسمى analyzeGrades تأخذ مصفوفة من كائنات درجات الطلاب (كل منها يحتوي على خصائص الاسم والدرجة) وتعيد إحصائيات تشمل أعلى درجة، أدنى درجة، متوسط الدرجات، وعدد الطلاب الذين اجتازوا (الدرجة >= 70). استخدم الحلقات لمعالجة البيانات.

🚀 التحدي

هناك طرق أخرى للتكرار على المصفوفات غير الحلقات for وwhile. هناك forEach، for-of، وmap. أعد كتابة حلقة المصفوفة باستخدام واحدة من هذه التقنيات.

اختبار ما بعد المحاضرة

المراجعة والدراسة الذاتية

المصفوفات في JavaScript تحتوي على العديد من الطرق المرتبطة بها، والتي تكون مفيدة للغاية لمعالجة البيانات. اقرأ عن هذه الطرق وجرب بعضها (مثل push، pop، slice وsplice) على مصفوفة من صنعك.

الواجب

تكرار مصفوفة

إخلاء المسؤولية:
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي Co-op Translator. بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو عدم دقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الرسمي. للحصول على معلومات حاسمة، يُوصى بالترجمة البشرية الاحترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة تنشأ عن استخدام هذه الترجمة.

9.8 KiB Raw Blame History