في هذا الدرس 6تصفّح المواضيع
عندما تقارن نفس المتغير أو التعبير بخمس أو ست قيم محددة معروفة سلفاً—مثل رموز استجابة HTTP (200، 404، 500) أو أدوار المستخدمين أو أيام الأسبوع—يصبح تكرار else if (status === ...) مزدحماً ومكرراً.
تحسب جملة switch قيمة التعبير المستهدف مرةً واحدةً فقط، ثم توجه مسار التنفيذ بنظافة مباشرةً نحو عنوان case المطابق.
داخل قوسي switch (expression) { ... } يبدأ كل خيار بالكلمة case متبوعةً بالقيمة ونقطتين رأسيتين : ثم أوامر الفرع وتعليمة break;، ونختم الكتلة بفرع default: للتعامل الآمن مع أي قيمة غير متوقعة.
const httpCode = 404;
let label = '';
switch (httpCode) {
case 200:
label = 'OK — Resource loaded';
break;
case 404:
label = 'Not Found — Check URL';
break;
default:
label = 'Unhandled HTTP status';
}
document.getElementById('sw-out').textContent = label;لماذا تُعد تعليمة break; حاسمة في نهاية كل حالة؟ لأن نسيانها يسبب ظاهرة الانزلاق التلقائي (Fallthrough)؛ إذ يستمر المحرك بعد دخول الحالة المطابقة في تشغيل جميع أسطر الحالات التالية أسفلها تباعاً—دون فحص قيمها أصلاً—حتى يصادف أول break; أو يصل لنهاية switch!
نستثمر ميزة الانزلاق بصورة مقصودة ومفيدة عندما تشترك عدة قيم في نفس النتيجة تماماً؛ فنرتب عناوين case متتالية فوق بعضها وننهي الكتلة المشتركة بتعليمة break; واحدة:
| بنية التحكم | الحالة المثالية للاستخدام | نوع المقارنة |
|---|---|---|
switch (val) | مطابقة متغير واحد بقيم محددة ثابتة أو تجميع حالات متكافئة | مساواة صارمة === |
if / else if | النطاقات الرقمية (score >= 90) والشروط المركبة لعدة متغيرات | أي تعبير منطقي حر |
const dayName = 'Friday';
let schedule = '';
switch (dayName) {
case 'Friday':
case 'Saturday':
schedule = 'Weekend Recharge';
break;
default:
schedule = 'Active Workday';
}
document.getElementById('grp-out').textContent = `${dayName}: ${schedule}`;انتبه لقاعدة بالغة الأهمية عند فحص مدخلات النماذج النصية: تقارن جملة switch القيم باستخدام المساواة الصارمة === دون أي تحويل تلقائي للأنواع!
فإذا كانت القيمة نصاً رقمياً مثل "1" فلن تطابق الفرع الرقمي case 1: إطلاقاً؛ لذلك حوّل النوع صراحةً أولاً عبر Number(inputCode) قبل تمريره إلى switch.
تشترك جميع فروع case داخل switch في نطاق كتلي واحد مشترك! فإذا عرّفت const tax = 0.1 في الحالة الأولى ثم كررت const tax = 0.2 في الحالة الثانية بلا أقواس فرعية، يُطلق المحرك خطأ صياغة SyntaxError لتكرار اسم المتغير!
الحل الاحترافي النظيف هو إحاطة أي فرع يُعرّف متغيرات جديدة بقوسين معقوفين خاصين به: case "A": { const tax = 0.1; ... break; }.
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس مطابقة القيم المتعددة بجملة switch، ومنع الانزلاق عبر break، وتجميع الحالات المشتركة، ومراعاة المطابقة الصارمة ===، وعزل نطاق المتغيرات داخل أقواس case { ... }. الخطوة التالية: اختتم الفصل السادس الآن بدرس «معالجة الأخطاء والاستثناءات في JavaScript» لاحتواء أعطال وقت التشغيل بمرونة وأمان!
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 switch Statement جملة الاختيار المتعدد switch
- جملة تحسب قيمة التعبير مرة واحدة وتقارنها بالمساواة الصارمة === مع سلسلة حالات متتالية.
- للمراجعة
- 02 Fallthrough الانزلاق التلقائي بين الحالات
- استمرار تنفيذ الأوامر في الحالات التالية تلقائياً عند إغفال كتابة تعليمة التوقف break.
- للمراجعة
- 03 default Clause الفرع الافتراضي default
- الفرع البديل الختامي الذي يُنفذ عند عدم تطابق قيمة التعبير مع أي حالة معرفة.
- للمراجعة
- 04 Case Block Scope عزل نطاق الحالة بالأقواس
- إحاطة أوامر الفرع بقوسين معقوفين { ... } لمنع تصادم أسماء متغيرات let وconst داخل switch.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTTP HTTP
- Hypertext Transfer Protocol
- بروتوكول الويب الذي تُعد رموز حالته الرقمية المحددة مثالاً كلاسيكياً لاستخدام جملة switch.
- للمراجعة
- 02 UI UI
- User Interface
- واجهة المستخدم التي تُوجه فيها الحالات والأدوار المحددة نحو الرسائل المناسبة بجملة switch.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال رموز HTTP في محرر التجربة وأضف فرعاً جديداً case 500: منتهياً بـ break; واختبر النتيجة.
-
بدّل بين التبويب الأول والثاني في المحاكي لمشاهدة أثر المطابقة الصارمة وأثر نسيان break.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.