9.1 KiB

Raw Permalink 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

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

🚀 التحدي

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

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

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

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

الواجب

تكرار مصفوفة

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

9.1 KiB Raw Permalink Blame History