Вам бонус- начислено 1 монета за дневную активность. Сейчас у вас 1 монета

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

Лекция



Привет, сегодня поговорим про конструкция switch, обещаю рассказать все что знаю. Для того чтобы лучше понимать что такое конструкция switch , настоятельно рекомендую прочитать все из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend).


  1. Синтаксис
  2. Пример работы
  3. Группировка case
  4. Тип имеет значение

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

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

Синтаксис

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

01 switch(x) {
02   case 'value1':  // if (x === 'value1')
03     ...
04     [break]
05  
06   case 'value2':  // if (x === 'value2')
07     ...
08     [break]
09  
10   default:
11     ...
12     [break]
13 }

 

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

    При этом case называют вариантами switch.

  • Если ни один case не совпал — выполняетcя (если есть) вариант default.

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

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

   
01 var a = 2+2;
02  
03 switch (a) {
04   case 3:
05     alert('Маловато');
06     break;
07   case 4:
08     alert('В точку!');
09     break;
10   case 5:
11     alert('Перебор');
12     break;
13   default:
14     alert('Я таких значений не знаю');
15 }

 

Будет выведено только одно значение, соответствующее 4. После чего break прервет выполнение.

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

Например:

 

   
01 var a = 2+2;
02  
03 switch (a) {
04   case 3:
05     alert('Маловато');
06   case 4:
07     alert('В точку!');
08   case 5:
09     alert('Перебор');
10   default:
11     alert('Я таких значений не знаю');
12 }

 

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

 

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

 

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

Например:

   
01 var a = 1;
02 var b = 0;
03  
04 switch(a) {
05   case b+1:
06     alert(1);
07     break;
08  
09   default:
10     alert('нет-нет, выполнится вариант выше')
11 }

 

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

Несколько значений case можно группировать.

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

 

   
01 var a = 2+2;
02  
03 switch (a) {
04   case 4:
05     alert('Верно!');
06     break;
07  
08   case 3:                    // (*)
09   case 5:                    // (**)
10     alert('Неверно!');
11     break;
12  
13   default:
14     alert('Я таких значений не знаю');
15 }

 

При case 3 выполнение идет со строки (3) и идет вниз до ближайшего break, таким образом проходя и то, что предназначено для case 5.

 

Важность: 5

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

01 switch (browser) {
02   case 'IE':
03     alert('О, да у вас IE!');
04     break;
05  
06   case 'Chrome':
07   case 'Firefox':
08   case 'Safari':
09   case 'Opera':
10     alert('Да, и эти браузеры мы поддерживаем');
11     break;
12  
13   default:
14     alert('Мы надеемся, что и в вашем браузере все ок!');
15 }

 

Решение

Если совсем точно следовать условию, то сравнение должно быть строгим '==='.

В реальном случае, скорее всего, подойдет обычное сравнение '=='.

 

1 if(browser == 'IE') {
2   alert('О, да у вас IE!');
3 } else if (browser == 'Chrome' || browser == 'Firefox'
4   || browser == 'Safari' || browser == 'Opera') {
5   alert('Да, и эти браузеры мы поддерживаем');
6 } else {
7   alert('Мы надеемся, что и в вашем браузере все ок!');
8 }

 

Как видно, эта запись существенно хуже читается, чем конструкция switch.

[Открыть задачу в новом окне]

 

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

Следующий пример принимает значение от посетителя.

 

   
01 var arg = prompt("Введите arg?")
02 switch(arg) {
03   case '0':
04   case '1':
05     alert('Один или ноль');
06  
07   case '2':
08     alert('Два');
09     break;
10  
11   case 3:
12     alert('Никогда не выполнится');
13  
14   case null:
15     alert('Отмена');
16     break;
17  
18   default:
19     alert('Неизвестное значение: ' + arg)
20 }

 

Что оно выведет при вводе чисел 0, 1, 2, 3? Подумайте и потом читайте дальше…

  • При вводе 0 или 1 выполнится первый alert, далее выполнение продолжится вниз до первогоbreak и выведет второй alert('Два').
  • При вводе 2, switch перейдет к case '2' и выведет Два.
  • При вводе 3, switch перейдет на default. Это потому, что prompt возвращает строку '3', а не число. Об этом говорит сайт https://intellect.icu . Типы разные. Switch использует строгое равенство ===, так что совпадения не будет.
  • При отмене сработает case null.

 

Важность: 4

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

   
01 var a = +prompt('a?', '');
02  
03 if (a == 0) {
04   alert(0);
05 }
06 if (a == 1) {
07   alert(1);
08 }
09  
10 if (a == 2 ||  a == 3) {
11   alert('2,3');
12 }

 

Решение

Первые две проверки — обычный case, третья разделена на два case:

 

   
01 var a = +prompt('a?', '');
02  
03 switch(a) {
04   case 0:
05     alert(0);
06     break;
07  
08   case 1:
09     alert(1);
10     break;
11  
12   case 2:
13   case 3:
14     alert('2,3');
15     break;
16 }

 

Обратите внимание: break внизу не обязателен, но ставится по «правилам хорошего тона».

Если он не стоит, то при дописывании в конец нового case, к примеру case 4, мы, скорее всего, забудем его поставить. В результате выполнение case 2/case 3продолжится на case 4 и будет ошибка.

К сожалению, в одной статье не просто дать все знания про конструкция switch. Но я - старался. Если ты проявишь интерес к раскрытию подробностей,я обязательно напишу продолжение! Надеюсь, что теперь ты понял что такое конструкция switch и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Из статьи мы узнали кратко, но содержательно про конструкция switch
создано: 2014-10-07
обновлено: 2024-11-14
263

Рейтиг 9 of 10. count vote: 2
Вы довольны ?:
Поделиться:

Найди готовое или заработай

С нашими удобными сервисами без комиссии*

Как это работает? | Узнать цену?

Найти исполнителя
$0 / весь год.
  • У вас есть задание, но нет времени его делать
  • Вы хотите найти профессионала для выплнения задания
  • Возможно примерение функции гаранта на сделку
  • Приорететная поддержка
  • идеально подходит для студентов, у которых нет времени для решения заданий
Создать заявку
Готовое решение
$0 / весь год.
  • Вы можите продать(исполнителем) или купить(заказчиком) готовое решение
  • Вам предоставят готовое решение
  • Будет предоставлено в минимальные сроки т.к. задание уже готовое
  • Вы получите базовую гарантию 8 дней
  • Вы можете заработать на материалах
  • подходит как для студентов так и для преподавателей
Добавить решение
Я исполнитель
$0 / весь год.
  • Вы профессионал своего дела
  • У вас есть опыт и желание зарабатывать
  • Вы хотите помочь в решении задач или написании работ
  • Возможно примерение функции гаранта на сделку
  • подходит для опытных студентов так и для преподавателей
Разместить резюме

Комментарии

Оставить комментарий
Если у вас есть какое-либо предложение, идея, благодарность или комментарий, не стесняйтесь писать. Мы очень ценим отзывы и рады услышать ваше мнение.
To reply

Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Термины: Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)