Learn JavaScript #9. Конструкция "switch"

Конструкция switch заменяет собой сразу несколько if.

Она представляет собой более наглядный способ сравнить выражение сразу с несколькими вариантами.

Синтаксис

Конструкция switch имеет один или более блок case и необязательный блок default.

Выглядит она так:

switch(x) {
  case 'value1': // if (xxx === 'value1') - проверка на строгое равенство
   ...
    [break]

  case 'value2': // if (xxx === 'value2') - проверка на строгое равенство
   ...
    [break]

  default:
   ...
   [break]

}

• Переменная x проверяется на строгое равенство первому значению value1, затем второму value2 и так далее.
• Если соответствие установлено - switch начинает выполняться от соответствующей директивы case и далее, до ближайшего break (или до конца switch).
• Если ни один case не совпал - выполняется (если есть) вариант default

Пример работы

Пример использования switch:

let a = 2 + 2;

switch (a) {
  case 3:
    alert( 'Маловато' );
    break;
  case 4:
    alert( 'В точку!' );
    break;
  case 5:
    alert( 'Перебор' );
    break;
  default:
    alert( 'Нет таких значений' );
}

  // Сработает 'case 4', появится уведомления "В точку!"

Здесь оператор switch последовательно сравнит a со всеми вариантами из case.

Сначала 3, затем - так как нет совпадения - 4. Совпадение найдено, будет выполнен этот вариант, со строки alert( 'В точку!' ) и далее, до ближайшего break, который прервёт выполнение.

Если break нет, то выполнение пойдет ниже по следующим case, при этом остальные проверки игнорируются.

Группировка "case"

Несколько вариантов case, использующих один код, можно группировать.

Для примера, выполним один и тот же код для case 4 и case 5, сгруппировав их:

let a = 4;

switch (a) {
  case 3:
    alert('Неправильно!');
    break;
    
  case 4: // (*) группируем оба case
  case 5:
    alert('Правильно!');
    alert('Вы неплохо знаете математику!');
    break;
    
  default:
    alert('Результат выглядит странновато. Честно.');
}

Теперь оба варианта 4 и 5 выводят одно сообщение.

Возможность группировать case - это побочный эффект того, как switch/case работает без break. Здесь выполнение case 4 начинается со строки (*) и продолжается в 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", аналогичный "switch"

Напишите if...else, соответствующий следующему switch:

switch (browser) {
  case 'Edge':
    alert( 'You`ve got the Edge' );
    break
  
  case 'Chrome':
  case 'Firefox':
  case 'Safari':
  case 'Opera':
    alert( 'Okay we support these browsers too' );
    break;
    
  default:
    alert( 'We hope that this page looks ok!' );
}

Решение:

browser = prompt('Укажите свой браузер', '');

if (browser === 'Edge') {
    alert('You`ve got the Edge');
  } else if (browser === 'Chrome' 
  || browser === 'Firefox' 
  || browser === 'Safari' 
  || browser === 'Opera' ) {
    alert('Okay we support these browsers too');
  } else {
    alert('We hope that this page looks ok!');
  }

Переписать условия "if" на "switch"

Перепишете код с использованием одной конструкции switch:

const number = +prompt('Введите число между 0 и 3', ''); // why 'const'?

if (number === 0) {
  alert('Вы ввели число 0');
}

if (number === 1) {
  alert('Вы ввели число 1');
}

if (number === 2 || number === 3) {
  alert('Вы ввели число 2, либо 3');
}

Решение:

let number = +prompt('Введите число между 0 и 3', '');

switch (number) {

  case 0:
    alert('Вы ввели число 0');
    break;
    
  case 1:
    alert('Вы ввели число 1');
    break;

  case 2:
  case 3:
    alert('Вы ввели число 2, либо 3');
    break;
}