٥ يونيو ٢٠٢٠

جملة "switch"

جملة switch يمكنها استبدال العديد من جمل `if.

تعطي طريقة أفضل لمقارنة متغير مقابل مجموعة من القيم.

طريقة الكتابة

جملة switch تحتوي على case واحدة أو أكثر وحالة إفتراضية إختيارية.

مثل هذا:

switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    [break]

  case 'value2':  // if (x === 'value2')
    ...
    [break]

  default:
    ...
    [break]
}
  • قيمة x يتم إختبار تساويها مع أول case (value1) ثم تتنتقل إلى (value2) وهكذا.
  • إذا وجد تساوي تبدأ switch بتنفيذ الكود ابتداءًا من هذه ال case حتى أقرب break (أو نهاية switch).
  • إذا لم تطابق أي حالة يتم تنفيذ الكود بداخل default إذا وجدت.

مثال

مثال على switch (تم نحديد الكود الذي سينفذ):

let a = 2 + 2;

switch (a) {
  case 3:
    alert( 'قليل جدًا' );
    break;
  case 4:
    alert( 'تمامًا!' );
    break;
  case 5:
    alert( 'كثير جدًا' );
    break;
  default:
    alert( "لا أعرف هذه القيمة" );
}

تبدأ switch بمقارنة قيمة a بدايةً من أول case التي هي 3. لا تطابق.

ثم 4. وهنا يحدث تطابق ويبدأ التنفيذ من case 4 حتى أقرب break.

إذا لم يوجد break يستمر تنفيذ case التالية بدون فحص الشرط.

مثال بدون break:

let a = 2 + 2;

switch (a) {
  case 3:
    alert( 'قليل جدًا' );
  case 4:
    alert( 'تمامًا!' );
  case 5:
    alert( 'كثير جدًا' );
  default:
    alert( "لا أعرف هذه القيمة" );
}

في هذا المثال سيتم تنفيذ ثلاثة أوامر alert:

alert( 'تمامًا!' );
alert( 'كثير جدًا' );
alert( "لا أعرف هذه القيمة" );
يمكن استخدام أي تعبير بداخل switch/case

إن switch و case يسمحان باستخدام التعبيرات.

مثال:

let a = "1";
let b = 0;

switch (+a) {
  case b + 1:
    alert("سيتم تنفيذ هذا لأن +a هو 1 ويساوي تمامًا b+1");
    break;

  default:
    alert("لن يتم تنفيذ هذا");
}

هنا +a تعطي 1 ويتم مقارنتها مع b + 1 في case وينفذ الكود.

تجميع “case”

يمكن تجميع العديد من case التي تتشارك في نفس الأوامر.

مثلًا إذا أردنا تنفيذ نفس الأوامر في case 3 و case 5:

let a = 3;

switch (a) {
  case 4:
    alert('صحيح!');
    break;

  case 3: // (*) تجميع حالتين
  case 5:
    alert('خطأ!');
    alert("لماذا لا تأخذ روس في الرياضيات ؟");
    break;

  default:
    alert('النتيجة غريبة حقًا.');
}

الآن كل من 3 و 5 يظهرون الرسالة.

إمكانية تجميع الحالات هي تأثير جانبي لطريقة عمل switch/case بدون break. هنا يبدأ التنفيذ من case 3 في السطر (*) وينتقل إلى case 5 لعدم وجود break.

الأنواع مهمة

عملية التساوي هي عملية حادة فيجب أن تكون القيم من نفس النوع ليتم التطابق.

على سبيل المثال لنأخذ البرنامج التالي:

let arg = prompt("أكتب قيمة ؟");
switch (arg) {
  case '0':
  case '1':
    alert( 'صفر أو واحد' );
    break;

  case '2':
    alert( 'أثنان' );
    break;

  case 3:
    alert( 'لن ينفذ أبدًا!' );
    break;
  default:
    alert( 'قيمة غير معروفة' );
}
  1. إذا أدخلنا 0, 1 يتم تنفيذ أول alert.
  2. إذا أدخلنا 2 يتم تنفيذ ثاني alert.
  3. ولكن إذا أدخلنا 3 تكون نتيجة prompt هي النص "3" الذي لا يطابق === الرقم 3. لذلك لن يتم تنفيذ الأوامر في هذه case 3! وسيتم تنفيذ default.

مهمه

أكتب برنامج باستخدام if..else يطابق جملة switch التالية:

switch (browser) {
  case 'Edge':
    alert( "لديك Edge!" );
    break;

  case 'Chrome':
  case 'Firefox':
  case 'Safari':
  case 'Opera':
    alert( 'حسنا نحن ندعم هذه المتصفحات أيضًا' );
    break;

  default:
    alert( 'نتمنى أن تكون هذه الصفحة معروضة بشكل جيد' );
}

للوصول إلى وظيفة switch باستخدام if يجب استخدام عامل التساوي الثلاثي '==='.

بالنسبة للنصوص فإن '==' ستعمل أيضًا.

if (browser == "Edge") {
    alert("لديك Edge!");
} else if (
    browser == "Chrome" ||
    browser == "Firefox" ||
    browser == "Safari" ||
    browser == "Opera"
) {
    alert("حسنا نحن ندعم هذه المتصفحات أيضًا");
} else {
    alert("نتمنى أن تكون هذه الصفحة معروضة بشكل جيد");
}

تم فصل browser == 'Chrome' || browser == 'Firefox' … إلى عدة سطور لسهولة القراءة.

لكن استخدام switch ما زال أفضل.

أعد كتابة البرنامج التالي باستخدام switch:

let a = +prompt('a?', '');

if (a == 0) {
  alert( 0 );
}
if (a == 1) {
  alert( 1 );
}

if (a == 2 || a == 3) {
  alert( '2,3' );
}

أول شرطين يتحولان إلى أثنان case. الشرط الثالث يتحول إلى حالتين:

let a = +prompt('a?', '');

switch (a) {
  case 0:
    alert( 0 );
    break;

  case 1:
    alert( 1 );
    break;

  case 2:
  case 3:
    alert( '2,3' );
    break;
}

لاحظ أن break في النهاية ليست مطلوبة ولكن تم وضعها تحسبًا للمستقبل.

ربما نريد لاحقًا إضافة المزيد من case على سبيل المثال case 4. وإذا نسينا وضع break في نهاية case 3 سيكون هناك خطأ.

خريطة الدورة التعليمية

التعليقات

إقرأ هذا قبل أن تضع تعليقًا…
  • إذا كان لديك اقتراحات أو تريد تحسينًا - من فضلك من فضلك إفتح موضوعًا فى جيتهاب أو شارك بنفسك بدلًا من التعليقات.
  • إذا لم تستطع أن تفهم شيئّا فى المقال - وضّح ماهو.
  • إذا كنت تريد عرض كود استخدم عنصر <code> ، وللكثير من السطور استخدم <pre>، ولأكثر من 10 سطور استخدم (plnkr, JSBin, codepen…)