Конструкция switch
Конструкция switch используется для выбора одного значения из некоторого ряда значений.
Синтаксис
switch (переменная) < case 'значение1': /* здесь код, который выполнится в случае, если переменная имеет значение1 */ break; case 'значение2': /* здесь код, который выполнится в случае, если переменная имеет значение2 */ break; case 'значение3': /* здесь код, который выполнится в случае, если переменная имеет значение3 */ break; default: /* здесь код, который выполнится в случае, если не совпала ни с одним значением */ break; >;
Сравнение производится на строгое равенство. Блок default не является обязательным.
Пример
Выведем на экран язык пользователя в зависимости от значения переменной lang :
let lang = ‘ru’; switch (lang) < case 'ru': alert('рус'); break; case 'en': alert('англ'); break; case 'de': alert('нем'); break; default: alert('язык не поддерживается'); break; >;
Пример
Выведем пору года, в которую попадает значение из переменной:
let num = 3; switch (lang) < case 1: alert('весна'); break; case 2: alert('лето'); break; case 3: alert('осень'); break; case 4: alert('зима'); break; >;
Смотрите также
- урок из учебника JavaScript,
в котором подробно описывается работа с switch-case - конструкцию if ,
которая также делает условие
Конструкция «switch»
Конструкция switch заменяет собой сразу несколько if .
Она представляет собой более наглядный способ сравнить выражение сразу с несколькими вариантами.
Синтаксис
Конструкция switch имеет один или более блок case и необязательный блок default .
Выглядит она так:
switch(x) < case 'value1': // if (x === 'value1') . [break] case 'value2': // if (x === 'value2') . [break] default: . [break] >- Переменная x проверяется на строгое равенство первому значению value1 , затем второму value2 и так далее.
- Если соответствие установлено – switch начинает выполняться от соответствующей директивы case и далее, до ближайшего break (или до конца switch ).
- Если ни один case не совпал – выполняется (если есть) вариант default .
Пример работы
Пример использования switch (сработавший код выделен):
let a = 2 + 2; switch (a)
Здесь оператор switch последовательно сравнит a со всеми вариантами из case .
Сначала 3 , затем – так как нет совпадения – 4 . Совпадение найдено, будет выполнен этот вариант, со строки alert( ‘В точку!’ ) и далее, до ближайшего break , который прервёт выполнение.
Если break нет, то выполнение пойдёт ниже по следующим case , при этом остальные проверки игнорируются.
Пример без break :
let a = 2 + 2; switch (a)
В примере выше последовательно выполнятся три alert :
alert( 'В точку!' ); alert( 'Перебор' ); alert( "Нет таких значений" );Любое выражение может быть аргументом для switch/case
И switch и case допускают любое выражение в качестве аргумента.
let a = "1"; let b = 0; switch (+a)
В этом примере выражение +a вычисляется в 1 , что совпадает с выражением b + 1 в case , и следовательно, код в этом блоке будет выполнен.
Группировка «case»
Несколько вариантов case , использующих один код, можно группировать.
Для примера, выполним один и тот же код для case 3 и case 5 , сгруппировав их:
let a = 3; switch (a) < case 4: alert('Правильно!'); break; case 3: // (*) группируем оба case case 5: alert('Неправильно!'); alert("Может вам посетить урок математики?"); break; default: alert('Результат выглядит странновато. Честно.'); >Теперь оба варианта 3 и 5 выводят одно сообщение.
Возможность группировать case – это побочный эффект того, как switch/case работает без break . Здесь выполнение case 3 начинается со строки (*) и продолжается в case 5 , потому что отсутствует break .
Тип имеет значение
Нужно отметить, что проверка на равенство всегда строгая. Значения должны быть одного типа, чтобы выполнялось равенство.
Для примера, давайте рассмотрим следующий код:
let arg = prompt("Введите число?"); switch (arg)
- Для ‘0’ и ‘1’ выполнится первый alert .
- Для ‘2’ – второй alert .
- Но для 3 , результат выполнения prompt будет строка «3» , которая не соответствует строгому равенству === с числом 3 . Таким образом, мы имеем «мёртвый код» в case 3 ! Выполнится вариант default .
Задачи
Напишите «if», аналогичный «switch»
важность: 5
Напишите if..else , соответствующий следующему switch :
switch (browser)
Если совсем точно следовать работе switch , то if должен выполнять строгое сравнение ‘===’ .
Впрочем, для таких строк, подойдёт и обычное сравнение ‘==’ .
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
Обратите внимание: конструкция browser == ‘Chrome’ || browser == ‘Firefox’ . разбита на несколько строк для лучшей читаемости.
Но всё равно запись через switch нагляднее.
JavaScript: switch
Инструкция switch была придумана в качестве альтернативы для нескольких if . Обычно она используется когда нужно сравнить некоторое значение сразу с несколькими различными вариантами (другими значениями) и выполнить соответствующий фрагмент кода из предложенных вариантов.
switch (выражение) < case выражение1: // Этот фрагмент кода выполнится, если вычисленное значение выражения в скобках // равно значению выражение1 break; . case выражениеN: // Этот фрагмент кода выполнится, если вычисленное значение выражения в скобках // равно значению выражениеN break; default: // Этот фрагмент кода выполнится при отсутствии // совпадений со значениями представленных вариантов >
В круглых скобках, после ключевого слова switch , указывается выражение, значение которого будет последовательно (сверху вниз) сравниваться со значениями выражений, указанных после ключевых слов case . При сравнении значений используется оператор === .
Если соответствие значений установлено – switch начинает выполняться от соответствующего case и далее, пока не встретится инструкция break (или до конца switch , если break отсутствует). Если соответствие значений не установлено – выполняется код, расположенный после ключевого слова default .
case и default называют вариантами switch .
Обратите внимание, что вариант default , не является обязательным. При этом его можно располагать в любом месте в теле switch , однако для удобства, его условились записывать последним.
Инструкция break выполняет немедленный выход из инструкции switch . Она может располагаться в каждом варианте, но не является обязательной. При отсутствии инструкции break в каком-либо варианте управление будет передано инструкциям, относящимся к следующему варианту.
Пример работы инструкции switch :
var x = 3; switch (x) < case 1: document.write("x равен 1"); break; case 2: document.write("x равен 2"); break; case 3: document.write("x равен 3"); break; default: document.write("x >3"); >
На изображении ниже показан порядок выполнения:
Пример без инструкции break :
var x = 2; switch (x)
Для выхода из switch может использоваться не только инструкция break , но также и инструкция return (если switch находится внутри функции) или continue (если switch находится внутри цикла).
Несколько вариантов можно ассоциировать с одним и тем же программным кодом:
var x = 3; switch (x)
Варианты case не обязательно должны записываться друг под другом, для удобства их можно расположить в ряд:
var x = 3; switch (x)
Возможность использовать выражения в case позволяет писать такой код:
var num = 30; switch (true) < case num == 0: document.write("num: " + num); break; case num >5 && num < 15: document.write("num между 5 и 15"); break; case num >20: document.write("num: " + num); break; >
С этой темой смотрят:
- if else
- Тернарный оператор
- Преобразование типов данных
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ru
Конструкция switch case в JavaScript
Switch является одной из наиболее популярных конструкций в JavaScript для выполнения различных действий в зависимости от значения переменных или выражений. Он обеспечивает простой и эффективный способ организации кода с множеством условий. В данной статье мы рассмотрим основные принципы работы конструкции switch, применение в различных сценариях, а также лучшие практики при работе с ней.
Синтаксис конструкции Switch case
Инструкция switch принимает выражение или значение и сравнивает его со “случаями”(case), перечисленными внутри нее, после чего выполняет весь код, описаный ниже подходящего “случая” до конца конструкции или до инструкции break.
Одним из ключевых отличий от конструкций if. else и подобных проверок на условие является то, что switch не завершает выполнение после нахождения совпадения, а продолжает работу до конца конструкции или до первой инструкции break. Поэтому важно не забывать указывать break, если на каждый “случай” должен отработать отдельный блок кода.
Сравниваемые значения сопоставляются строго (аналогично сравнению с помощью оператора ===) поэтому важно не только значение проверяемого выражения или переменной, но и их тип.
В рассмотренных выше примерах, если ни один из “случаев” не подойдет при сравнении конструкция не будет исполнять ни какой код внутри нее. Что бы задать поведение в таких случаях, используют инструкцию default. Она указывается при перечислении “случаев” и код, описаный внутри нее выполняется когда не найдено подходящих под условие “случаев”. Инструкцию default можно объявить в любой части конструкции, но принято делать это в конце.
Группировка внутри switch по case и break
Как мы уже знаем, switch строго сравнивает выражения и не использует проверки как другие логические ветвления вроде if…else поэтому не выйдет указать в одном “случае” несколько вариантов через логические операторы. Вместо этого можно просто указать несколько “случаев” подряд с одним блоком кода и при совпадении одного из них этот код выполнится.
Поведение switch с несколькими case без break может показаться нелогичным, ведь совпал только один “случай”, а код выполнится из всех, описанных ниже совпавшего, но такое поведение позволят группировать исполняемый код с помощью инструкции break.
В примере выше мы видим 6 case 5 из которых сгруппированы с помощью инструкции break и при совпадении одного из них будет выполнено ожидаемое количество операций (только операции ниже совпавшего). Таким образом мы можем создавать последовательно выполняемый код, удобно разделяя его на части в зависимости от значения проверяемого выражения. Важно помнить что при таком подходе следует следить за правильным порядком перечисления “случаев”.
Особенности работы с конструкцией switch
Мы уже знаем, что без инструкции break конструкция switch будет выполнять весь код, описаный ниже совпавшего значения, но на практике это не всегда верно. Switch часто используется внутри функций и если его внутренние блоки кода выполняют инструкцию return, завершающую работу всей функции, остальной код внутри switch не будет исполнен даже если не указана инструкция break.
Блоки кода внутри switch необязательно заключать в фигурные скобки, как в if…else потому что конструкция рассматривает их как один большой блок, который начинает исполняться после подходящего case. Такое поведение можно изменить, обернув блоки кода в фигурные скобки. В таком случае каждый блок будет иметь свою область видимости.
Заключение
Конструкция switch предоставляет удобный и лаконичный способ управлять потоком выполнения кода в JavaScript. Она может быть особенно полезна, когда необходимо обработать множество различных значений и выполнить соответствующие действия для каждого из них или группы значений. Однако, необходимо помнить о правильном использовании операторов case и default, а также следовать лучшим практикам для повышения читаемости и поддерживаемости кода. В итоге, конструкция switch является важным инструментом для разработчиков JavaScript и помогает создавать более эффективные программы. Надеюсь что данная статья была полезна для понимания столь важной темы, а если вы хотите изучить основы языка или детально погрузиться в устройство JavaScript я подготовил подробные курсы.
JavaScript с нуля — основы языка и практика для начинающих
— 16 часов коротких лекций по 10 — 15 минут
— 15 упражнений для закрепления на практике1
— 5 тестов для проверки знаний
— Рейтинг ⭐ 4.9 на основании отзывов
— 30-ти дневная гарантия возврата денег
JavaScript Advanced — продвинутые концепции языка и ООП
— 18 часов коротких лекций по 10 — 15 минут
— 30упражнений для закрепления на практике
— 14 тестов для проверки знаний
— Рейтинг ⭐ 4.9 на основании отзывов
— 30-ти дневная гарантия возврата денег