Поиск по сайту:
Где начало того конца, которым оканчивается начало? (К. Прутков).

Как использовать оператор Switch в JavaScript

28.09.2017
Как использовать оператор Switch в JavaScript

Введение

Условные операторы являются одними из самых полезных и общих для всех языков программирования. «Как написать условные операторы в JavaScript » описывает, как использовать ключевые слова if, else и else if, чтобы контролировать поток программы, основанной на различных условиях, которые в JavaScript часто являются результатом пользовательского ввода.

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

В этой статье мы научимся использовать заявление switch, а также научмся использовать соответствующие ключевые слова case, break и default. Наконец, мы узнаем, как использовать несколько выборов в заявлении switch.

Switch

Оператор switch вычисляет выражение и выполняет код в результате сопоставления случая. Сначала это может выглядеть немного пугающе, но основной синтаксис подобен заявлению if. Он всегда будет написан как switch () {}, со скобками, содержащих выражение для проверки, а также фигурные скобки, содержащие потенциальный код для выполнения.

Ниже приведен пример заявления switch с двумя заявлениями case, и запасным вариантом, известным как default.

switch (выражение) {
case x:
// выполнения кода блока в случае x
break;
case y:
// выполнения кода блока в случае y
break;
default:
// Выполнения кода блока по умолчанию
}

 

Следуя логике блока кода выше, это последовательность событий, которые будут иметь место.

Выражение Switch

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

Давайте сделаем пример рабочего оператора switch после указанного выше синтаксиса. В этом блоке кода, мы найдем текущий день недели с new Date()методом, и с помощью getDay() напечатаем номер, соответствующий текущему дню. Понедельник начинается с единицы, и так продолжается до 7, которая является воскресеньем. Мы начнем с создания нашей переменной.

const day = new Date().getDay();

 

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

week.js

// Установите текущий день недели в переменную, с 1- это понедельник и до 7- это воскресенье
const day = new Date().getDay();

switch (day) {
case 1:
console.log("Счастливый понедельник!");
break;
case 2:
console.log("Сегодня вторник.");
break;
case 3:
console.log("Это среда!");
break;
case 4:
console.log("Еще один день до выходных!");
break;
case 5:
console.log("Счастливая пятница!");
break;
case 6:
console.log("Пришла замечательная суббота!");
break;
case 7:
console.log("Это воскресенье, время расслабиться!");
break;
default:
console.log("Что-то пошло ужасно неправильно...");
}

 

Вывод

'Еще один день до выходных!'

 

Этот код был проверен на четверг, что соответствует 4, поэтому вывод на консоль будет: «Еще один день до выходных!». В зависимости от того, в какой день недели вы тестируете код, ваш выход будет отличаться. Мы включили блок default в конце, чтобы запустить в случае ошибки, которая в данном случае не должна произойти, поскольку есть только семь дней в неделю. Мы могли бы, например, распечатать результаты понедельника по пятницу, и блок default мог иметь такое же сообщение на выходные.

Если бы мы опустили ключевое слово break в каждом заявлении, ни один из других утверждений case не был бы оценено истинно, но программа продолжала бы проверять, пока не дошла до конца. Для того, чтобы сделать наши программы быстрее и эффективнее, мы включаем break.

Диапазон  Switch

Возможно, возникнет случай, в котором вам нужно будет оценить диапазон значений в блоке switch, в отличие от одного значения, как в нашем примере выше. Мы можем сделать это, установив выражение true и делать операцию в каждом сообщении case.

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

  • Оценка от 90 и выше является A
  • Оценка от 80 до 89 является B
  • Оценка от 70 до 79 представляет собой С
  • Оценка от 60 до 69 является D
  • Оценка от 59 или ниже является I

Теперь мы можем написать, это в заявлении switch. Поскольку мы делаем проверку диапазона, мы будем выполнять операцию в каждом case, чтобы проверить, что каждое выражение вычисляем как true, а затем выполним заявление после того, как требования к true было удовлетворено.

grades.js

// Установка оценки студента
const grade = 87;

switch (true) {
// Если оценка 90 или больше
case grade >= 90:
console.log("A");
break;
// Если оценка 80 или больше
case grade >= 80:
console.log("B");
break;
// Если оценка 70 или больше
case grade >= 70:
console.log("C");
break;
// Если оценка 60 или больше
case grade >= 60:
console.log("D");
break;
// Если оценка 59 или ниже
default:
console.log("F");
}

 

Вывод

'B'

 

Выражение в скобках, оценивается как true в данном примере. Это означает, что любое, case которое вычисляется как true будет выполнено.

Так же, как с else if, switch оценивается сверху вниз, и первое выполненное условие будет выполнено. Поэтому, так как наша переменная grade равна 87, следовательно, имеет значение true для C и D, но выводиться первым B.

Множественные Cases

Вы можете столкнуться с кодом, в котором несколько case должны иметь один и тот же вывод. Для того, чтобы достичь этого, вы можете использовать более одного case для каждого блока кода.

Чтобы проверить это, мы собираемся сделать небольшое приложение, соответствующее текущему месяцу у соответствующего сезона. Во- первых, мы будем использовать метод new Date(), чтобы найти номер, соответствующий текущему месяцу, и применим его к переменной month.

const month = new Date().getMonth();

 

Метод new Date().getMonth() будет выводить число от 0 до 11, с 0 это январь и 11 будет декабря. Во время этой публикации, месяц сентябрь, который будет соответствовать 8.

Наше приложение будет выводить четыре сезона со следующими характеристиками для простоты:

  • Зима : январь, февраль и март
  • Весна : апрель, май и июнь
  • Лето : июль, август и сентябрь
  • Осень : октябрь, ноябрь и декабрь

Ниже наш код.

seasons.js

// Получить номер, соответствующий текущему месяцу, с 0 это январь и 11 это декабрь
const month = new Date().getMonth();

switch (month) {
// январь, февраль, март
case 0:
case 1:
case 2:
console.log("Зима");
break;
// Апрель, Май, Июнь
case 3:
case 4:
case 5:
console.log("Весна");
break;
// Июль, Август, Сентябрь
case 6:
case 7:
case 8:
console.log("Лето");
break;
// Октябрь, Ноябрь, Декабрь
case 9:
case 10:
case 11:
console.log("Осень");
break;
default:
console.log("Что-то пошло не так.");
}

 

Когда мы запустим этот код, мы получим вывод, идентифицирующий текущий сезон, основанный на спецификации выше.

Вывод

Лето

 

Текущий месяц на момент публикации был 8, что соответствует одному из заявлений case с выходом сезона «Лето».

Вывод

В этой статье мы рассмотрели заявление switch, тип заявления conditonal, которое вычисляет выражение и выводит различные значения на основе сопоставления результатов. Мы рассмотрели заявление switch, используя диапазон и несколько заявлений case.

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...
Поделиться в соц. сетях:
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

**ссылки nofollow

0 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии

Читайте также

Спасибо!

Теперь редакторы в курсе.