Иногда вместо множества вложенных операторов if можно использовать инструкцию switch. Switch позволяет сравнить выражение с множеством значений, что позволяет избавиться от серии операторов if и сделать код более компактным.

Инструкция switch (англ. переключатель) позволяет выбрать, какой из нескольких блоков кода должен быть выполнен, исходя из возможных значений заданного выражения. Каждое из таких значений называется вариантом (case). Инструкция switch заменяет собой сразу несколько if. Она представляет собой более наглядный способ сравнить выражение сразу с несколькими вариантами.

Синтаксис оператора switch выглядит следующим образом:

switch(n) {
    case 'value1':    // Выполняется, если n === value1
        // Исполняем блок кода 1.
        break; // Здесь останавливаемся
    case 'value2':    // Выполняется, если n === value2
        // Исполняем блок кода 2.
        break; // Здесь останавливаемся
    case 'value3':    // Выполняется, если n === value3
        // Исполняем блок кода 3.
        break; // Здесь останавливаемся
    default:   // Если все остальное не подходит...
        // Исполняем блок кода 4.
        break; // Здесь останавливаемся
}
  • Выполнение инструкции начинается с вычисления выражения n. Его иногда называют тестовым.
  • Выполняется проверка на строгое равенство значения тестового выражения n и значений меток в предложениях case (первому значению value1, затем второму value2 и так далее) в порядке их следования в теле инструкции switch.
  • Если соответствие установлено – switch начинает выполняться от соответствующей директивы case и далее, до ближайшего break (или до конца switch, если break отсутствует).
  • Если совпадения не произошло, то выполняются инструкции default-ветви. Ветвь default не является обязательной, поэтому при ее отсутствии управление передается следующей за инструкцией switch, т.е. тело ее просто пропускается.

Инструкция break выполняет немедленный выход из инструкции switch. Она может располагаться в каждом варианте case, но не является обязательной. Если её нет, то выполняется следующая инструкция из блока switch.

Пример работы инструкции switch:

Выполнить код »

При отсутствии инструкции break в каком-либо варианте, управление будет передано инструкциям, относящимся к следующим вариантам. При этом остальные проверки на соответствие выражению не будут выполняться. Интерпретатор JavaScript выйдет из инструкции switch, только когда дойдет до её конца или встретит break. Очевидно, это не то, что обычно нужно для решения задачи выбора. Поэтому каждый блок case, как правило, необходимо заканчивать инструкцией Ьreak или return.

Пример без break:

Выполнить код »
В примере выше последовательно выполнятся три alert:
alert( "x равен 2" );
alert( "x равен 3" );
alert( 'Совпадение не найдено' );

На заметку: Для выхода из инструкции switch может использоваться не только break, но также и инструкции return или continue, если switch находится внутри функции или цикла соответственно.

Если вы хотите использовать один набор инструкций сразу к нескольким случаям case, можно воспользоваться одним из двух способов. Первый способ основывается на том, что выполнение инструкции switch продолжится до её окончания, либо пока не встретится инструкция break.

В примере ниже case 1, case 2 и case 3 выполняют один и тот же код:

Выполнить код »

Второй способ группировки case, менее стандартный – во второй строке, где вы ожидали увидеть switch(x), расположено постоянное булево значение true, а в значении case используется выражение вместо константы:

Выполнить код »

Примечание: Несмотря на то, что инструкция switch позаимствована из других языков, в JavaScгipt она имеет свои особенности. Во-первых, она работает со всеми типами данных, так что ее можно использовать с числами, строками и даже с объектами. Во-вторых, значения (case) для сравнения с выражением инструкции switch могут быть не только константами, но и переменными и даже выражениями.


  • Определите время года

    Пользователь вводит значение переменной num. Переменная num может принимать 4 числовых значения: 1, 2, 3 или 4. Если она имеет значение 1, то в переменную result запишите 'весна', если имеет значение 2 – 'лето' и так далее. Решите задачу через switch-case.

    Показать решение

    Решение:

    Как известно prompt возвращает строку, например '3', а не число 3. Т.к. оператор switch предполагает строгое равенство ===, так что совпадения не будет. Для преобразования строки, введенной пользователем, в число необходимо перед prompt поставить унарный +.
    Выполнить код »
  • Декада месяца

    Пользователь вводит число от 1 до 31, которое присваивается переменной day. Определите в какую декаду месяца попадает это число: в первую, вторую или третью. Решите задачу через switch-case.

    Показать решение

    Решение:

    Выполнить код »
  • Конструкция switch вместо if

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

    
    <script>
    
    var month = 6;
    if (month == 12 || month <= 2) {
      alert( 'Зима' );
    }
    if (month >= 3 && month <= 5) {
      alert( 'Весна' );
    }
    if (month >= 6 && month <= 8) {
      alert( 'Лето' );
    }
    if (month >= 9 && month <= 11) {
      alert( 'Осень' );
    }
    
    </script>  
    
    Показать решение

    Решение:

    Выполнить код »
  • Условие if/else вместо инстукции switch

    Замените инструкцию switch условием if/else:

    
    <script>
    
    var num = 30;
    switch (num) {
      case 25:
        alert( '25' );
        break;
    
      case 10:
      case 20:
      case 30:
      case 40:
        alert( 'От 1 до 4-х десятков' );
        break;
    
      default:
        alert( 'Числа нет в базе' );
    }
    
    </script>  
    
    Показать решение

    Решение:

    Выполнить код »

Комментарии

пожелания к комментариям…
  • Приветствуются комментарии, соответствующие теме урока: вопросы, ответы, предложения.
  • Одну строчку кода оборачивайте в тег <code>, несколько строчек кода — в теги <pre><code>...ваш код...</code></pre>.
  • Допускаются ссылки на онлайн-песочницы (codepen, plnkr, JSBin и др.).