Опубликовано: среда, 21 июня 2023 г. в 08:17

JavaScript: Освоение оператора switch

JavaScript

Источник: «Mastering the JavaScript switch Statement»

Освойте оператор switch: более организованную и лаконичную альтернативу использования нескольких операторов if-else

Оператор JavaScript switch — это способ принимать решения в коде на основе различных условий. Это более организованная и лаконичная альтернатива использованию нескольких оператора if-else. Оператор switch оценивает заданное выражение, которое может быть переменной или значением, и сравнивает его с несколькими возможными случаями/кейсами. Если значения выражения соответствует одному из случаев, выполняется соответствующий блок кода (набор инструкций). Если совпадений не найдено, опциональный случай/кейс по умолчанию может быть выполнен в качестве запасного варианта, то есть он запускается, когда ни один из других случаев/кейсов не применим.

Например, вот простое выражение switch проверяющее значение переменной day:

switch (day) {
  case "Monday":
    console.log("Начало рабочей недели! 😴");
    break;
  case "Friday":
    console.log("Конец рабочей недели! 🥳");
    break;
  default:
    console.log("Обычный день");
}

Освоив оператор switch, вы сможете писать более чистый, эффективный и лучше организованный JavaScript код, что в конечном итоге улучшит навыки программирования.

Основы оператора `switch` Анатомия и структура

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

switch(выражение) {
    case {значение1}:
    // <-- Ваш код для выполнения -->
    break    // опционально
    case {значение2}:
    // <-- Ваш код для выполнения -->
    break    // опционально
    default: // опционально
    // <-- Код выполняющийся, когда нет совпадений -->
}

const superhero = 'Spider-Man';
switch (superhero) {
  case 'Batman':
    console.log('🦇 The Dark Knight!');
    break;
  case 'Wonder Woman':
    console.log('👸 The Amazon Princess!');
    break;
  default:
    console.log('💥 There are so many amazing superheroes!');
}

`switch` vs `if-else`

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

Например, рассмотрим следующую структуру if-else:

if (color === "red") {
  console.log("The color is red 🟥");
} else if (color === "blue") {
  console.log("The color is blue 🟦");
} else if (color === "green") {
  console.log("The color is green 🟩");
} else {
  console.log("Unknown color 🌈");
}

Эквивалентное выражение switch будет выглядеть следующим образом:

switch (color) {
  case "red":
    console.log("The color is red 🟥");
    break;
  case "blue":
    console.log("The color is blue 🟦");
    break;
  case "green":
    console.log("The color is green 🟩");
    break;
  default:
    console.log("Unknown color 🌈");
}

Выражение switch предлагает более организованный и читаемый способ обработки нескольких условий, особенно при работе с большим количеством случаев. В Выражении switch вычисляемым выражением является переменная или значение, заключённое в круглые скобки (в данном примере это переменная color).

Когда использование `switch` предпочтительнее, чем `if-else`

Большое количество условий с одной переменной: Кода у вас есть большое количество условий для обработки, операторы switch более организованы и легче читаются, чем цепочки if-else.
Оценка одной переменной: Если оцениваемые условия основаны на одной переменной или выражении с несколькими различными значениями, операторы switch могут обеспечить более эффективное и чистое решение, чем шаблоны if-else.
Более быстрое выполнение кода: В определённых ситуациях движки JavaScript могут оптимизировать операторы switch, что приводит к более быстрому выполнению кода по сравнению с серией операторов if-else.
Более простое обслуживание: Операторы switch упрощают добавление, удаление или изменение случаев, поскольку каждый случай является автономным в пределах блока switch. Напротив, цепочки if-else могут потребовать более обширных модификаций, когда необходимы изменения.
Запасной вариант по умолчанию: Выражения switch предоставляют опциональный вариант default, который может быть выполнен, когда ни один из других кейсов не соответствует заданному выражению. Эта возможность обеспечивает чистый способ обработки неожиданных или неизвестных значений.

Когда использование `if-else` предпочтительнее, чем `switch`

Комплексные условия: Если оцениваемые условия включают комплексную логику, несколько переменных или реляционные и логические операторы, шаблоны if-else обеспечивают большую гибкость и лучше подходят для таких ситуаций, чем оператор switch.
Условия на основе диапазона: Когда нужно проверить диапазон значений или условий не являющихся дискретными, шаблоны if-else предлагают лучшее решение, поскольку операторы switch предназначены для сравнения дискретных значений.
Небольшое количество условий: Если есть только несколько простых условий для проверки, использование шаблона if-else может быть более простым и лёгким в написании, чем оператор switch.
Не константные варианты: Выражения switch требуют константных значений для меток case, что означает, что они не могут быть выражениями изменяющимися во время выполнения. Если нужно оценить условия с не константными значениями, шаблоны if-else являются подходящим выбором.
Оценка истинных или ложных значений: Шаблоны if-else подходят, когда нужно проверить, является ли значение истинным или ложным. Выражения switch не предназначены для такого типа вычислений и требуют более подробного кода для достижения такого же результата.
Условия раннего выхода: Если есть условие раннего выхода, когда не требуется дальнейшая оценка после выполнения определённого условия, шаблоны if-else могут быть более эффективными. С оператором switch оцениваются все случаю, даже если найдено ранее совпадение (есть только не используется оператор break).

Принятие решения о выборе `switch` или `if-else`

Оба switch и if-else решают схожие проблемы и имеют преимущества и недостатки в зависимости от ваших вариантов использования. Что бы помочь принять решение, я написал простой оператор switch:

switch (вашВариантИспользования) {
  case 'большое_количество_условий':
  case 'оценка_одной_переменной':
  case 'несколько_дискретных_значений':
    console.log('Рассмотрите возможность использования switch.');
    break;
  case 'комплексные_условия':
  case 'условия_на_основе_диапазонов':
  case 'неконстантные_варианты':
    console.log('Рассмотрите возможность использования шаблона if-else.');
    break;
  default:
    console.log('Выберите наиболее подходящую структуру управления на основе конкретного варианта использования.');
}

Функциональность оператора `switch` и техники

Оператор switch предоставляет дополнительные возможности и концепции, которые можно использовать для повышения производительности, удобочитаемости и лаконичности кода.

Вариант `default`

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

const beverage = 'lemonade';

switch (beverage) {
  case 'coffee':
    console.log('☕️ Enjoy your coffee!');
    break;
  case 'tea':
    console.log('🍵 Have a relaxing cup of tea!');
    break;
  default:
    console.log('🥤 Your choice of drink is not listed, but cheers anyway!');
}

Ключевое слово `break`

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

const transport = 'bike';

switch (transport) {
  case 'car':
    console.log('🚗 Drive safely!');
    break;
  case 'bike':
    console.log('🚲 Enjoy your bike ride!');
    break;
  case 'bus':
    console.log('🚌 Have a pleasant bus journey!');
    break;
}

Техника Сквозного прохода

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

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

const clothing = 'jacket';

switch (clothing) {
  case 't-shirt':
  case 'shorts':
    console.log('😎 Looks like it\'s warm outside!');
    break;
  case 'jacket':
  case 'sweater':
    console.log('❄️ Bundle up, it\'s cold!');
    // No break, fall-through to the next case
  case 'scarf':
    console.log('🧣 Don\'t forget your scarf!');
    break;
}

Распространённые проблемы и подводные камни

Выполнение нескольких `case` (пропустили оператор `break`)

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

Как исправить: Добавьте оператор break после каждого case, чтобы предотвратить сквозной проход.

const mood = 'happy';

switch (mood) {
  case 'happy':
    console.log('😀 Keep smiling!');
    // <--- Пропущен оператор break
  case 'sad':
    console.log('☹️ Cheer up!');
    break;
  case 'angry':
    console.log('😠 Take a deep breath!');
    break;
}

// --Output--
//😀 Keep smiling!
//☹️ Cheer up!

Некорректное сравнение значений и типов

Оператор switch используют строгое сравнение, что может привести к неожиданным результатам при сравнении разных типов данных. В приведённом ниже примере строка "2", не равна числу 2. Эта ловушка может привести к тому, что case не будут выполняться должным образом.

Как исправить: Рассмотрите тип переменных и помните, что они будут оцениваться строго. Если вы работаете над более крупными проектами, вам может помочь TypeScript.

const numOfPets = '2';

switch (numOfPets) {
  case 2: // Потому, что '2' !== 2
    console.log('🐾 Double the fun!');
    break;
  default:
    console.log('🐾 Share the love!');
}

// -- Output --
// 🐾 Share the love!

Проблемы с областью видимости

Распространённой ошибкой в операторах switch является объявление переменных без блочной или неправильной области видимости, что делает их недоступными в case или вызывает синтаксические ошибки. Вы можете столкнуться с ошибкой Uncaught SyntaxError: ..., если попытаетесь повторно объявить одну и ту же переменную в нескольких кейсах.

Исправления:

Для общих переменных, которые собираетесь использовать во всех case, объявите их с помощью let перед switch или;
Ограничьте свои case как блок (т.е. заключите в фигурные скобки {...})

case в блоках:

// Проблема:
switch (weather) {
  case 'rain':
    const notification = '🌦️ ️Rainy days can be cozy!';
    console.log(notification);
    break;
  case 'thunder':
    // 'notification' is still accessible here
    console.log(notification + ' ⚡ Be careful!');
    break;
}
// Вариант 1: Используйте блоки при объявлении
switch (weather) {
  case 'rain': { // <-- обратите внимание.
    const notification = '🌦️ ️Rainy days can be cozy!';
    console.log(notification);
    break;
  }
  case 'thunder': {
    const notification = '⚡ Be careful!';
    console.log(notification);
    break;
  }
}

// Вариант 2: Объявите с помощью let перед оператором switch
let notification = '' // <-- обратите внимание.
switch (weather)
  case 'rain':
    notification = '🌦️ ️Rainy days can be cozy!';
    console.log(notification);
    break;
  case 'thunder':
    notification = '⚡ Be careful!';
    console.log(notification);
    break;
}

Заключение

Теперь, когда вы знаете, что такое оператор switch, как он работает и когда его использовать, пришло время приступить к его использованию! Надеюсь вам понравилась эта статья.

JavaScript: Освоение оператора switch

Основы оператора switch Анатомия и структура

switch vs if-else

Когда использование switch предпочтительнее, чем if-else

Когда использование if-else предпочтительнее, чем switch

Принятие решения о выборе switch или if-else

Функциональность оператора switch и техники

Вариант default

Ключевое слово break