Цикл switch case javascript

The «switch» statement

It gives a more descriptive way to compare a value with multiple variants.

The syntax

The switch has one or more case blocks and an optional default.

• The value of x is checked for a strict equality to the value from the first case (that is, value1 ) then to the second ( value2 ) and so on.
• If the equality is found, switch starts to execute the code starting from the corresponding case , until the nearest break (or until the end of switch ).
• If no case is matched then the default code is executed (if it exists).

An example

An example of switch (the executed code is highlighted):

Here the switch starts to compare a from the first case variant that is 3 . The match fails.

Then 4 . That’s a match, so the execution starts from case 4 until the nearest break .

If there is no break then the execution continues with the next case without any checks.

In the example above we’ll see sequential execution of three alert s:

alert( 'Exactly!' ); alert( 'Too big' ); alert( "I don't know such values" );

Both switch and case allow arbitrary expressions.

let a = "1"; let b = 0; switch (+a)

Here +a gives 1 , that’s compared with b + 1 in case , and the corresponding code is executed.

Grouping of “case”

Several variants of case which share the same code can be grouped.

For example, if we want the same code to run for case 3 and case 5 :

Now both 3 and 5 show the same message.

The ability to “group” cases is a side effect of how switch/case works without break . Here the execution of case 3 starts from the line (*) and goes through case 5 , because there’s no break .

Type matters

Let’s emphasize that the equality check is always strict. The values must be of the same type to match.

For example, let’s consider the code:

let arg = prompt("Enter a value?"); switch (arg)

1. For 0 , 1 , the first alert runs.
2. For 2 the second alert runs.
3. But for 3 , the result of the prompt is a string «3» , which is not strictly equal === to the number 3 . So we’ve got a dead code in case 3 ! The default variant will execute.

Tasks

Rewrite the «switch» into an «if»

Write the code using if..else which would correspond to the following switch :

To precisely match the functionality of switch , the if must use a strict comparison ‘===’ .

For given strings though, a simple ‘==’ works too.

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

Please note: the construct browser == ‘Chrome’ || browser == ‘Firefox’ … is split into multiple lines for better readability.

But the switch construct is still cleaner and more descriptive.

Источник

Конструкция «switch»

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

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

Синтаксис

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

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

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

Пример использования switch (сработавший код выделен):

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

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

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

В примере выше последовательно выполнятся три alert :

alert( 'В точку!' ); alert( 'Перебор' ); alert( "Нет таких значений" );

И switch и case допускают любое выражение в качестве аргумента.

let a = "1"; let b = 0; switch (+a)

В этом примере выражение +a вычисляется в 1 , что совпадает с выражением b + 1 в case , и следовательно, код в этом блоке будет выполнен.

Группировка «case»

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

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

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

Возможность группировать case – это побочный эффект того, как switch/case работает без break . Здесь выполнение case 3 начинается со строки (*) и продолжается в case 5 , потому что отсутствует break .

Тип имеет значение

Нужно отметить, что проверка на равенство всегда строгая. Значения должны быть одного типа, чтобы выполнялось равенство.

Для примера, давайте рассмотрим следующий код:

let arg = prompt("Введите число?"); switch (arg)

1. Для ‘0’ и ‘1’ выполнится первый alert .
2. Для ‘2’ – второй alert .
3. Но для 3 , результат выполнения prompt будет строка «3» , которая не соответствует строгому равенству === с числом 3 . Таким образом, мы имеем «мёртвый код» в case 3 ! Выполнится вариант default .

Задачи

Напишите «if», аналогичный «switch»

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

Если совсем точно следовать работе 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 нагляднее.

Источник

switch

Выполняем код при совпадении значения переменной с ожидаемым значением.

Время чтения: меньше 5 мин

Обновлено 20 декабря 2021

Кратко

Скопировать ссылку «Кратко» Скопировано

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

Похож на if . . . else , но решает более узкую задачу.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 switch (имя_переменной_значение_которой_сравниваем)  case значение: // код break> switch (имя_переменной_значение_которой_сравниваем)  case значение: // код break >    Скопировать Скопировано Не удалось скопировать   

В круглых скобках указывается переменная, значение которой сравнивается. В фигурных скобках с помощью ключевого слова case указываются возможные значения и код, который нужно выполнить.

Пример приветствия пользователя в зависимости от статуса:

 switch (membershipStatus)  case 'vip': // выполнится, если в переменной membershipStatus хранится строка 'vip' console.log('Приветствуем вас, ваше великолепие!') console.log('рады вас видеть!') break case 'diamond': console.log('Здравствуйте, бриллиантовый клиент!') break case 'gold': console.log('Привет, золотой мой!') break default: // выполнится, если ни один другой случай не сработал console.log('Прив') break> switch (membershipStatus)  case 'vip': // выполнится, если в переменной membershipStatus хранится строка 'vip' console.log('Приветствуем вас, ваше великолепие!') console.log('рады вас видеть!') break case 'diamond': console.log('Здравствуйте, бриллиантовый клиент!') break case 'gold': console.log('Привет, золотой мой!') break default: // выполнится, если ни один другой случай не сработал console.log('Прив') break >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

В программировании часто встречается задача выполнения разного кода в зависимости от какого-либо условия. Обычно, такие задачи решают с помощью конструкции if . . . else .

Среди этих задач есть особый подтип — когда нужно посмотреть на значение переменной и выполнить разный код, в зависимости от этого значения. Например, применить разную скидку для клиентов разного статуса — самым любимым клиентам дать скидку 25%, с картой лояльности — 10%, а обычным покупателям не дать ничего.

Такую задачу тоже можно решить с помощью if . . else :

 let discountif (memberStatus === 'vip')  discount = 0.25> else if (memberStatus === 'diamond')  discount = 0.2> else if (memberStatus === 'gold' || memberStatus === 'silver')  // скидка 10% пользователям статуса золотой и серебряный discount = 0.1> else  discount = 0> let discount if (memberStatus === 'vip')  discount = 0.25 > else if (memberStatus === 'diamond')  discount = 0.2 > else if (memberStatus === 'gold' || memberStatus === 'silver')  // скидка 10% пользователям статуса золотой и серебряный discount = 0.1 > else  discount = 0 >    Скопировать Скопировано Не удалось скопировать   

Код выше работает, но выглядит избыточно — в нем очень много сравнений с использованием member Status . Конструкция switch решает такую задачу меньшим объёмом кода:

 let discountswitch (memberStatus)  case 'vip': discount = 0.25 break case 'diamond': discount = 0.2 break case 'gold': case 'silver': // можно написать несколько кейсов и связать с одним блоком discount = 0.1 break default: discount = 0 break> let discount switch (memberStatus)  case 'vip': discount = 0.25 break case 'diamond': discount = 0.2 break case 'gold': case 'silver': // можно написать несколько кейсов и связать с одним блоком discount = 0.1 break default: discount = 0 break >    Скопировать Скопировано Не удалось скопировать   

В круглых скобках указана переменная, значение которой нужно сравнивать с различными возможными значениями — кейсами. Порядок обычно не имеет значения.

Внутри кейса пишется список команд, которые нужно выполнить. Список команд завершается оператором break .

Существует необязательный кейс default , который срабатывает, если ни одно значение не подошло.

Что будет, если не поставить break ?

Скопировать ссылку «Что будет, если не поставить break?» Скопировано

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

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

В коде появился баг — значение для бриллиантового уровня будет установлено в 0 . 1 вместо 0 . 2 .

На практике

Скопировать ссылку «На практике» Скопировано

Николай Лопин советует

Скопировать ссылку «Николай Лопин советует» Скопировано

🛠 Обязательно ставьте break в конце каждого кейса. Такой код будет хорошо читаться и не приведёт к неожиданным багам.

🛠 Всегда добавляйте default блок к своим свитчам. Код приложения постоянно меняется. Когда-нибудь свитч перестанет покрывать все возможные значения переменной и default -случай будет вашей страховкой, которая не даст приложению разломаться.

🛠 Если в вашем свитче меньше трёх кейсов, то if . . . else будет читаться проще.

🛠 Если внутри кейса нужно создать переменную, то придётся добавить фигурные скобки, иначе JavaScript упадёт с ошибкой:

 switch (variable)  case 5:  const myVar = 'Hello' >> switch (variable)  case 5:  const myVar = 'Hello' > >    Скопировать Скопировано Не удалось скопировать   

Источник