Загрузка...

Оператор switch

if / else хорош для да/нет или диапазона. Иногда вопрос другой: какое из нескольких фиксированных значений? Код дня 1…7, статус "ok" / "warn" / "err", ключ меню. Для такой формы switch — чистый инструмент. Ветвление вы уже знаете; здесь сопоставляете одно значение с несколькими помеченными case.

Что делает switch?

switch смотрит на одно выражение в скобках. Сравнивает это значение с меткой каждого case. При совпадении выполняются операторы этого пути. break выходит из switch, чтобы следующие case не выполнялись. default — запасной путь, если ничего не совпало.

Части одним взглядом

📊 Повседневные части switch

Ключевое слово Обычное чтение Типичное использование
switch посмотри на это значение… открыть выбор
case если равно этой метке… один фиксированный вариант
break остановись здесь; выйди из switch закончить после совпадения
default если ничего не совпало… запасной путь

Сравнение по строгому равенству (идея ===). Числовой case не совпадёт со строкой цифр. Держите значение и метки в одной «форме».

Простой switch

javascript 
let day = 3;
switch (day) {
case 1:
console.log("Mon");
break;
case 2:
console.log("Tue");
break;
case 3:
console.log("Wed");
break;
default:
console.log("other");
}

Одно значение, несколько помеченных путей

Здесь day равен 3, поэтому выполняется путь case 3, и консоль печатает Wed. Случаи 1 и 2 проверены и пропущены. После break switch закончен — default не выполняется.

Без break JavaScript продолжит тела следующих case. Это называют fall-through. Новичкам почти всегда нужен break после каждого завершённого case.

Почему важен break

javascript 
let day = 2;
switch (day) {
case 1:
console.log("Mon");
case 2:
console.log("Tue");
case 3:
console.log("Wed");
break;
default:
console.log("other");
}

Без break выполняются и следующие case

day равен 2. Совпадение начинается с case 2, печатается Tue, затем идёт в case 3 и печатает Wed до break. Хотелась одна метка — получились две. Ставьте break под каждым завершённым case, если только намеренно не делите код.

default когда ничего не совпало

javascript 
let day = 9;
switch (day) {
case 1:
console.log("Mon");
break;
case 2:
console.log("Tue");
break;
default:
console.log("other");
}

default закрывает «ничего из этого»

day равен 9. Ни один case не совпал, поэтому выполняется default и вы видите other. Используйте default, когда неожиданные значения всё равно нуждаются в безопасном сообщении. Опускайте только если тишина допустима.

Строковые case

javascript 
let status = "warn";
switch (status) {
case "ok":
console.log("green");
break;
case "warn":
console.log("yellow");
break;
case "err":
console.log("red");
break;
default:
console.log("unknown");
}

Case могут быть и строками

status равен "warn", поэтому вы видите yellow. Строковые case обычны для коротких кодов из формы или API. Диапазоны вроде «оценка от 60 до 90» остаются у if / else if — switch хочет дискретные метки.

Сохранить выбранную метку

javascript 
let day = 1;
let label;
switch (day) {
case 1:
label = "Mon";
break;
case 2:
label = "Tue";
break;
default:
label = "other";
}
console.log(label);

Назовите результат совпадения

Задайте label внутри каждого case (и в default), затем используйте один раз. Здесь label становится "Mon". Тот же приём, что с if / else — сначала выбор, потом использование.

Покажите выбранный путь на странице

Соберите короткое сообщение через switch и запишите его на страницу.

Выбор на странице через switch

html 
<!DOCTYPE html>
<html>
<head>
<title>Switch — page choice</title>
</head>
<body>
<p id="out">…</p>
<script>
let day = 3;
let msg;
switch (day) {
case 1:
msg = "Mon";
break;
case 2:
msg = "Tue";
break;
case 3:
msg = "Wed";
break;
default:
msg = "other";
}
let box = document.getElementById("out");
box.textContent = "day=" + msg;
</script>
</body>
</html>

day равен 3, страница показывает day=Wed. Поставьте day в 9, обновите — должен появиться day=other. Следующий урок (for) повторяет работу много раз; для «какая фиксированная метка?» инструментом остаётся switch.

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

  1. Соберите switch на let day = 1, который логирует "Mon" для case 1.
  2. Добавьте case для 2 и 3 с break после каждого.
  3. Поставьте day в 9 и убедитесь, что default логирует "other".
  4. Переключитесь по строке status с "ok", "warn", "err".
  5. Временно уберите один break и посмотрите fall-through в консоли.
  6. В HTML-демо измените только day, обновите, прочитайте новый текст day=.

Частые ошибки

  • Забыть break после case (выполняются и следующие)
  • Использовать switch для открытых диапазонов (score >= 60) — лучше if / else if
  • Смешивать типы так, что число никогда не совпадёт со строковым case
  • Опускать default, когда неизвестные значения всё ещё нуждаются в сообщении
  • Заменять каждый if на switch, когда проверка — не список фиксированных меток

Кратко

  • switch сопоставляет одно значение с несколькими метками case
  • break останавливает switch после совпадения
  • default выполняется, когда ничего не совпало
  • Лучше для дискретных значений; диапазоны остаются у if / else if
  • Сохраните метку, если результат нужен позже; при необходимости покажите на странице
  • Дальше: цикл for — повторить работу заданное число раз

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 22 из 23
Javascript Урок