Условная конструкция switch ... case в JavaScript

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

Работает условная конструкция switch...case  так: оператор switch принимает  какое-либо выражение или значение одной переменной, а затем просматривает ряд вариантов с помощью ключевых слов case, до тех пор, пока среди этих вариантов не найдется нужный. Далее выполняется код, соответствующий этому варианту. Если нужный вариант не найден, то выполнится код после ключевого слова default. Важный момент - после каждого блока кода после  case необходимо записывать оператор break.

Синтаксис switch...case:

На блок-схеме этот код выглядит так:

Давайте рассмотрим практический пример использования конструкции switch ... case. Например, мы просим пользователя ввести количество комнат в квартире и сохраняем это число в переменной rooms. В зависимости от того, вводит ли он 1, 2, 3 или 4, выдаем ему стоимость такой квартиры. В том случае, когда пользователь вводит любое другое число, срабатывает код после ключевого слова default, где мы выводим текст "Такое количество комнат в нашем проекте не предусмотрено". Для того чтобы не вызывать несколько диалоговых окон alert(), все строковые данные мы заносим в переменную str, и в самом конце кода, уже после того, как отработала  конструкции switch ... case, выводим ее значение внутри alert().

Попробовать:

Ниже вы найдете пример с использованием выражения внутри switch...case, которое подразумевает определение текущего дня недели на основе одного из методов объекта Date.

Ниже вы увидите результат работы кода:

Один код для нескольких case

Интересной особенностью конструкции switch...case является то, что можно написать один код для нескольких ключевых слов case. Случаев таких немного, но рассмотреть их стоит. Будем использовать такой пример: пользователю нужно ввести номер месяца, в котором он родился: 1 - январь, 12 - декабрь, а мы сообщим пользователю, на какой сезон (зима, весна, лето или осень) приходится его месяц рождения.

Поскольку в каждом времени года по 3 месяца, мы используем их номера в case: ставим после значения двоеточие, но пишем код только для последнего, третьего месяца каждого из сезонов. Там же обязательно добавляем оператор break, который прерывает выполнение кода. В ключевом слове default указываем, что пользователь неверно ввел месяц, т.к. в диалоговом окне prompt() можно ввести, что угодно.

Обратите внимание на унарный плюс рядом с методом +prompt(), который преобразует строковое значение, возвращаемое из prompt(), в число . Если его не указать, скрипт работать не будет, т.к. вместо числа мы получим строку, а она не равна числу.

Попробуйте сами:

Выбор из нескольких вариантов в списке <select>

Давайте рассмотрим еще один пример, который позволит нам отследить выбор пользователя, но уже в мини-форме с выпадающим списком в виде элемента <select>, в котором мы также имеем ограниченный выбор из элементов <option>. В этом коде у нас несколько option с названиями сыров подразумевают, что они входят в пиццу "Четыре сыра", поэтому в default мы поместим именно ее название, чтобы не писать несколько лишних операторов case.  Для реализации этого скрипта нам понадобится обработка события onchange.

Попробуйте действие скрипта со switch...case для поля <select>:

Краткая альтернатива switch...case

Для конструкции switch...case есть альтернатива для выбора одного из нескольких известных вариантов. Это использование объекта со свойствами (ключами). Ниже мы рассмотрим 2 примера, в которых будем выполнять код и с помощью switch...case, и с помощью свойств объекта.

В первом примере будет происходить замена изображения в зависимости от выбора пользователя. Но в этот раз выбор будем рассматривать не только с позиции использования switch...case, но и с точки зрения объекта, в котором к определенным свойствам привязаны ссылки на изображения с фруктами.

В html-разметке у нас есть 2 изображения с id="fruitImg" и id="fruitImgObj". В зависимости от того, какой фрукт введет пользователь мы будем заменять в них изображения таким образом: в первом - с помощью switch...case, а во втором - с помощью объекта. Изображения добавляем с сервиса unsplash.com.

Код примера:

Давайте протестируем пример. Обратите внимание, что в 2-х тегах <img> происходит загрузка разных изображений, хотя и с одними и теми же фруктами. Разница в способах будет заметна еще и тогда, когда пользователь введет фрукт не из списка: во втором варианте вместо оператора default используется логическое ИЛИ (||).

Во втором примере мы можем использовать switch...case и объект с именами функций, связанными с его свойствами-ключами, как альтернативу выражению с оператором switch:

Обратите внимание на  круглые скобки вызова функции в объекте colorCases и вызов функции radialGradient2() в том случае, если пользователь введет цифру больше или меньше нужной или любые нецифровые символы.

Давайте протестируем пример.

Надеюсь, способы использования условной конструкции switch ... case теперь понятны для вас.