0Pricing
Frontend Academy · درس

تدفق التحكم: if وelse وswitch وfor وwhile

أنشئ تفرعات باستخدام if/else وswitch، وحلقات باستخدام for وwhile، واستخدم break وcontinue للتحكم في التكرار.

تدفق التحكم: if وelse وswitch وfor وwhile درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ما هو تدفق التحكم؟

يحدد تدفق التحكم الشيفرة التي تُنفَّذ وعدد مرات تنفيذها. يوفر JavaScript الشروط (if/else وswitch) والحلقات (for وwhile وdo/while) لتوجيه مسار التنفيذ استنادًا إلى الشروط والبيانات.

if / else if / else

أبسط بنية شرطية. تُقيَّم القيمة الموجودة بين القوسين إلى truthy أو falsy. يمكن ربط عدة شروط باستخدام else if. أما else الأخيرة فهي حالة احتياطية شاملة.

const score = 75;

if (score >= 90) {
  console.log('A');
} else if (score >= 80) {
  console.log('B');
} else if (score >= 70) {
  console.log('C');
} else {
  console.log('F');
}

العامل الثلاثي

العامل الثلاثي هو صيغة مختصرة مضمّنة لـ if/else: condition ? trueValue : falseValue. يُستخدم للتعيينات البسيطة والتعبيرات في JSX. تجنّبوا تداخل العوامل الثلاثية، إذ سرعان ما تصبح غير قابلة للقراءة.

const label = age >= 18 ? 'Adult' : 'Minor';
const icon = isActive ? '🟢' : '🔴';

// In JSX:
<span>{isLoggedIn ? 'Logout' : 'Login'}</span>

تعليمة switch

تقارن switch قيمةً بعدة حالات باستخدام المساواة الصارمة. استخدموا break بعد كل حالة لمنع الانتقال التلقائي إلى الحالة التالية. تتولى default معالجة القيم غير المطابقة.

const day = 'Monday';
switch (day) {
  case 'Saturday':
  case 'Sunday':
    console.log('Weekend');
    break;
  case 'Monday':
    console.log('Start of work week');
    break;
  default:
    console.log('Weekday');
}

حلقة for

حلقة for الكلاسيكية على نمط C: المهيّئ؛ الشرط؛ الزيادة. وهي الأنسب للتكرار عددًا معلومًا من المرات أو للتكرار عبر المصفوفات باستخدام الفهرس.

for (let i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}

// Iterate array by index:
const names = ['Alice', 'Bob', 'Carol'];
for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

حلقة for...of

تكرّر for...of عبر قيم أي كائن قابل للتكرار، مثل المصفوفات والسلاسل النصية وMaps وSets. وهي أوضح من حلقة for المعتمدة على الفهرس عندما لا تكون هناك حاجة إلى الفهرس.

const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}

for (const char of 'hello') {
  console.log(char); // h e l l o
}

حلقة for...in

تكرّر for...in عبر مفاتيح الخصائص القابلة للتعداد في كائن. لا تستخدموها مع المصفوفات، بل استخدموا for...of أو أساليب المصفوفات بدلًا منها.

const user = { name: 'Alice', age: 30, role: 'admin' };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

حلقة while

تُنفّذ حلقة while ما دام شرطها truthy. تُستخدم عندما لا يكون عدد التكرارات معروفًا مسبقًا، مثل قراءة الإدخال حتى يُدخل المستخدم قيمة صالحة.

let attempts = 0;
let success = false;
while (!success && attempts < 3) {
  // try something
  attempts++;
  success = Math.random() > 0.5; // simulate
}
console.log(`Done in ${attempts} attempts`);

حلقة do...while

تُنفّذ do...while جسم الحلقة مرة واحدة على الأقل قبل التحقق من الشرط. وهي مفيدة عندما يجب تنفيذ الجسم قبل إمكانية تقييم شرط الخروج.

let input;
do {
  input = prompt('Enter a number:');
} while (isNaN(Number(input)));

break وcontinue

تخرج break من الحلقة الحالية فورًا. وتتخطى continue بقية التكرار الحالي وتنتقل إلى التالي. ويعمل كلاهما في حلقات for وwhile وdo/while.

for (let i = 0; i < 10; i++) {
  if (i === 3) continue;  // skip 3
  if (i === 7) break;     // stop at 7
  console.log(i);         // 0 1 2 4 5 6
}

التقييم قصير الدارة

يعيد && أول قيمة falsy أو القيمة الأخيرة. ويعيد || أول قيمة truthy أو القيمة الأخيرة. أما ?? (الدمج عند القيم الفارغة) فيعيد الجانب الأيمن فقط إذا كان الجانب الأيسر null أو undefined.

const name = user && user.name;    // null if user is falsy
const label = name || 'Anonymous'; // 'Anonymous' if name is falsy
const port = config.port ?? 3000;  // 3000 only if port is null/undefined

تحقق سريع

أي حلقة تضمن تنفيذ جسمها مرة واحدة على الأقل؟

مراجعة: تدفق التحكم في JavaScript

التفرّع باستخدام if/else. switch للقيم المنفصلة المتعددة. حلقة for لعدد معروف من التكرارات. for...of للكائنات القابلة للتكرار. while لعدد غير معروف من التكرارات. do...while للتنفيذ مرة واحدة على الأقل. تخرج break من الحلقات. تتخطى continue التكرارات. تُستخدم عوامل التقييم قصير الدارة لكتابة شروط مختصرة.

الأسئلة الشائعة

هل درس «تدفق التحكم: if وelse وswitch وfor وwhile» مجاني؟

نعم — نص درس «تدفق التحكم: if وelse وswitch وfor وwhile» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «تدفق التحكم: if وelse وswitch وfor وwhile»؟

أنشئ تفرعات باستخدام if/else وswitch، وحلقات باستخدام for وwhile، واستخدم break وcontinue للتحكم في التكرار. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «تدفق التحكم: if وelse وswitch وfor وwhile»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

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

  1. المتغيرات: let وconst وvar والنطاق
  2. أنواع البيانات: string وnumber وboolean وnull وundefined
  3. الدوال: التصريحات والتعابير والدوال السهمية
  4. تدفق التحكم: if وelse وswitch وfor وwhile
← العودة إلى Frontend Academy