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

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

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

switch (day) {
  case "Monday":
    console.log("Start of the work week! 😴");
    break;
  case "Friday":
    console.log("End of the work week! 🥳");
    break;
  default:
    console.log("A regular day");
}

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

switch Основы заявления: анатомия и структура

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

switch(expression) {
    case {value1}:
    // <-- Your Code to execute -->  
    break    // optional
    case {value2}:
    // <-- Your Code to execute -->   
    break    // optional
    default: // optional
    // <-- Code that executes when no values match-->
}

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 или 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

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

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

1. Сложные условия. Если оцениваемые условия включают сложную логику, несколько переменных или реляционные и логические операторы, шаблоны if-else обеспечивают большую гибкость и лучше подходят для таких ситуаций, чем операторы switch.
2. Условия на основе диапазона: когда вам нужно проверить диапазон значений или условий, которые не являются дискретными, шаблоны if-else предлагают лучшее решение, поскольку операторы switch предназначены для сравнения дискретных значений.
3. Небольшое количество условий: если у вас есть только несколько простых условий для проверки, использование шаблона if-else может быть более простым и простым в написании, чем оператор switch.
4. Неконстантные варианты: операторы Switch требуют постоянных значений для меток вариантов, то есть они не могут быть выражениями, которые изменяются во время выполнения. Если вам нужно оценить условия с непостоянными значениями, шаблоны if-else являются подходящим выбором.
5. Оценка истинных или ложных значений: шаблоны «если-иначе» подходят, когда вам нужно проверить, является ли значение истинным или ложным. Операторы switch не предназначены для такого типа вычислений и требуют более подробного кода для достижения того же результата.
6. Условия раннего выхода: если у вас есть условие раннего выхода, когда дальнейшая оценка не требуется после выполнения определенного условия, шаблоны «если-иначе» могут быть более эффективными. С оператором switch оцениваются все случаи, даже если найдено раннее совпадение (если только вы не используете оператор «break»).

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

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

switch (yourUseCase) {
  case 'large_number_of_conditions':
  case 'single_variable_evaluation':
  case 'multiple_discrete_values':
    console.log('Consider using a switch statement.');
    break;
  case 'complex_conditions':
  case 'range_based_conditions':
  case 'non_constant_cases':
    console.log('Consider using an if-else pattern.');
    break;
  default:
    console.log('Choose the most appropriate control structure based on your specific use case.');
}

switch Функциональность и методы заявления:

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

Дело 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 после того, как будет найден и выполнен соответствующий case. Это предотвращает дальнейшее выполнение кода в оставшихся случаях, гарантируя, что генерируется только правильный вывод.

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;
}

Техника провала

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

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

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;
}

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

Выполнение нескольких случаев (забыли использовать break оператор)

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

Как это исправить: добавьте breakоператор после каждого случая, чтобы предотвратить провал.

const mood = 'happy';

switch (mood) {
  case 'happy':
    console.log('😀 Keep smiling!');
    // <--- Missing break statement
  case 'sad':
    console.log('☹️ Cheer up!');
    break;
  case 'angry':
    console.log('😠 Take a deep breath!');
    break;
}

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

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

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

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

const numOfPets = '2';

switch (numOfPets) {
  case 2: // Because '2' !== 2
    console.log('🐾 Double the fun!');
    break;
  default:
    console.log('🐾 Share the love!');
}

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

Проблемы с определением масштаба

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

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

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

Заблокируйте область действия ваших предложений:

// The problem: 
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;
}
// Fix 1: Use Block Scope when declaring
switch (weather) {
  case 'rain': { // <-- look here.
    const notification = '🌦️ ️Rainy days can be cozy!';
    console.log(notification);
    break;
  }
  case 'thunder': {
    const notification = '⚡ Be careful!';
    console.log(notification);
    break;
  }
}

// Fix 2: Declare it with let before your statement
let notification = '' // <-- look here.
switch (weather) 
  case 'rain':
    notification = '🌦️ ️Rainy days can be cozy!';
    console.log(notification);
    break;
  case 'thunder':
    notification = '⚡ Be careful!';
    console.log(notification);
    break;
}

Заключение

Теперь, когда вы знаете, что switchтакое выражение, как оно работает и когда его использовать, пора приступить к его реализации! Надеюсь, вам понравилась эта статья. Присоединяйтесь к нам в сообществе SitePoint, если у вас есть какие-либо вопросы об этой части или JavaScript в целом.