switch-case: выбор между несколькими вариантами
Когда if-else становится громоздким 🤯
Представь: ты пишешь программу, которая обрабатывает статусы заказа. Например:
1— "Ожидает оплаты"2— "В обработке"3— "Отправлен"4— "Доставлен"
С помощью if-else это выглядит так:
if (status === 1) {
console.log("Ожидает оплаты");
} else if (status === 2) {
console.log("В обработке");
} else if (status === 3) {
console.log("Отправлен");
} else if (status === 4) {
console.log("Доставлен");
} else {
console.log("Неизвестный статус");
}
Уже на 4 вариантах код становится громоздким. А если статусов 10? 20? Тут-то на помощь и приходит switch-case!
Синтаксис switch-case 🎛️
Конструкция switch проверяет значение выражения и выполняет соответствующий блок кода:
switch (выражение) {
case значение1:
// код для значение1
break;
case значение2:
// код для значение2
break;
default:
// код, если ни один case не подошел
}
Перепишем наш пример со статусами заказов:
switch (status) {
case 1:
console.log("Ожидает оплаты");
break;
case 2:
console.log("В обработке");
break;
case 3:
console.log("Отправлен");
break;
case 4:
console.log("Доставлен");
break;
default:
console.log("Неизвестный статус");
}
Гораздо чище и читабельнее, правда? Все возможные варианты собраны в одном месте.
Как это работает под капотом 🔍
- Вычисляется выражение в
switch - Его значение сравнивается с каждым
caseстрого (===) - При совпадении выполняется код от
caseдо ближайшегоbreak - Если совпадений нет — выполняется
default(если он есть)
🔥 Важно!
breakпрерывает выполнениеswitch. Без него выполнение "провалится" в следующийcase, даже если его условие не совпадает. Это частая причина багов!
Пример "проваливания" без break 💧
Иногда "проваливание" можно использовать осознанно. Например, для группировки вариантов:
switch (day) {
case 1:
case 2:
case 3:
case 4:
case 5:
console.log("Будний день");
break;
case 6:
case 7:
console.log("Выходной");
break;
default:
console.log("Нет такого дня недели");
}
Здесь для дней 1-5 (пн-пт) выводится "Будний день", а для 6-7 (сб-вс) — "Выходной".
Когда использовать switch-case? 🤔
| Критерий | if-else |
switch-case |
|---|---|---|
| Много условий | 😕 | 😍 |
| Проверка диапазонов | 😍 | ❌ |
| Строгое равенство | 😊 | 😍 |
| Читаемость | 😕 | 😍 |
💡 Совет от Данилы Бежина: если условий больше трёх — скорее всего,
switchсделает код чище. Посмотрите его видео про условные конструкции для глубокого понимания!
Продвинутые фишки 🔥
Строки в условиях
switch отлично работает со строками:
switch (theme) {
case "light":
setLightTheme();
break;
case "dark":
setDarkTheme();
break;
case "oled":
setOledTheme();
break;
}
Выражения в case
Можно использовать выражения, но они будут вычислены один раз при входе в switch:
const a = 2;
const b = 3;
switch (a + b) {
case 5:
console.log("2 + 3 = 5");
break;
case 6:
console.log("2 * 3 = 6");
break;
}
Распространённые ошибки 🚨
- Забытый
break— самая частая проблема. Всегда проверяйте его наличие! - Ненужный
default— если обработка всех случаев не требуется, его можно опустить. - Нестрогое сравнение — помните, что сравнение идёт через
===.
Практический пример: калькулятор 🧮
Давайте напишем простой калькулятор:
function calculate(a, b, operator) {
switch (operator) {
case "+":
return a + b;
case "-":
return a - b;
case "*":
return a * b;
case "/":
return a / b;
default:
throw new Error("Неизвестный оператор");
}
}
console.log(calculate(5, 3, "+")); // 8
console.log(calculate(5, 3, "&")); // Error
Альтернативы: объекты и Map 🆕
Для сложных сценариев можно использовать объекты или Map:
const operations = {
"+": (a, b) => a + b,
"-": (a, b) => a - b,
"*": (a, b) => a * b,
"/": (a, b) => a / b
};
function calculate(a, b, op) {
return operations[op]?.(a, b) ?? "Неизвестный оператор";
}
Но это уже тема для отдельного разговора! Помните — switch отлично подходит для множества дискретных значений, а объекты — для более динамических сценариев.
Теперь ты вооружён мощным инструментом для обработки множественных условий! 🛠️ Попробуй переписать свои старые if-else цепочки на switch-case — код станет чище и понятнее.