Посібник із оператора JavaScript Switch із прикладами

Автор

Оператор JavaScript Switch є умовним оператором потоку керування. Це неймовірно корисно для створення умовних блоків із великою кількістю пропозицій.

Ця стаття є навчальним посібником щодо оператора switch і його використання. Ми також порівняємо його з іншими умовними конструкціями, операторами if і тернарними операторами, щоб ви могли знати, коли їх використовувати.

Що таке оператор Switch у JavaScript?

Інструкція JavaScript Switch використовується, щоб вирішити, яку гілку коду виконати на основі значення виразу. Це один із двох умовних операторів у JavaScript.

Перший — це оператор if, а другий — тернарний оператор. Він працює так само, як обидва, але має різні нюанси, що робить його ідеальним для деяких випадків. У цій статті ми збираємося дослідити все це.

Як використовувати інструкцію JavaScript Switch

У цій частині статті я поясню оператор JavaScript Switch і як його використовувати. Я буду використовувати приклади коду, тому вам знадобиться компілятор JavaScript, щоб слідувати. Найпростішим у використанні є цей онлайн-компілятор JavaScript. Крім того, ви можете переглянути нашу статтю про найкращі онлайн-IDE JavaScript.

Загальний синтаксис

Загальний синтаксис оператора switch такий:

switch(<expression>) {
    case <value 1>:
        <statements>
        break;
    case <value 2>:
        <statements>
        break;
    default:
        <statements>
}

Ключове слово switch позначає початок блоку switch JavaScript. Усередині дужок ви вставляєте будь-який вираз JavaScript. Вираз — це все, що має значення. Наприклад, такі літерали, як рядки або числа, змінні або виклики функцій.

Далі ми додаємо тіло оператора switch між фігурними дужками. Корпус складається з кількох корпусів. Кожен випадок має значення та групу тверджень. Якщо вираз у круглих дужках дорівнює значенню case, тоді оператори цього case виконуються.

Для кожного випадку ми можемо додати ключове слово break. Додавати це слово зовсім необов’язково. Якщо ви додасте його, JavaScript вирветься з блоку перемикачів, коли він зустріне його. Якщо його немає, JavaScript продовжить виконувати всі випадки після нього. Це відомо як падіння. Якщо ви не хочете скористатися перевагами пропуску, рекомендується додати ключове слово break.

Останнє ключове слово, на яке слід звернути увагу, це ключове слово за замовчуванням. Цей регістр відповідає будь-якому значенню виразу в дужках.

Приклади

У цьому розділі будуть продемонстровані різні приклади використання оператора switch.

#1. З Fallthrough

Ось приклад використання оператора switch без ключового слова break. Мета цього — продемонструвати провал.

У цьому прикладі ми пишемо код для обробки різних кодів стану HTTP:

const statusCode = <insert status code here>

switch (statusCode) {
    case 200:
        console.log('OK');
    case 301:
        console.log('Redirect');
    case 403:
        console.log('Forbidden');
    case 404:
        console.log('Not Found');
    case 500:
        console.log('Internal Server Error')
}

У наведеному вище фрагменті коду ми перевіряємо, чи відповідає значення певному коду статусу, а потім друкуємо повідомлення з описом коду статусу.

Подивіться, що відбувається, коли ви встановлюєте код статусу на 403.

Після зіставлення 403 випадків також було зіставлено всі наступні випадки. Це називається падінням. Це не ідеально, оскільки ми часто любимо відповідати одному випадку. Ця дивна примха JavaScript є причиною, чому необхідно додати ключове слово break.

#2. Без Fallthrough

Щоб уникнути помилок, ми додаємо ключове слово break у кінці кожного випадку. Наступний приклад демонструє, що відбувається, коли ви це робите.

const statusCode = <insert a status code here>

switch (statusCode) {
    case 200:
        console.log('OK');
        break;
    case 301:
        console.log('Redirect');
        break;
    case 403:
        console.log('Forbidden');
        break;
    case 404:
        console.log('Not Found');
        break;
    case 500:
        console.log('Internal Server Error')
        break;
}

І коли ви запускаєте код вище з кодом статусу 403, ви отримуєте це.

Як бачите, код тепер відповідає лише одному випадку й уникає помилок.

#3. Корисний Fallthrough

Тим не менш, важливо зазначити, що провал може бути корисним у деяких випадках. Розглянемо наступний приклад, де ми хочемо перевірити, чи рухається людина горизонтально чи вертикально на основі спрямованого введення.

const direction = '<enter direction here>'

switch(direction) {
    case 'left':
    case 'right':
        console.log('horizontal movement');
        break;
    case 'up':
    case 'down':
        console.log('horizontal movement');
        break;
}

Якщо ви встановите напрямок ліворуч і запустите код вище, це результат:

І коли ви встановлюєте напрямок праворуч, ви все одно отримуєте той самий результат:

Це пояснюється тим, що коли лівий регістр збігається, він потрапляє в правий регістр і друкує «горизонтальний рух». Але оскільки є ключове слово break, воно не потрапляє до верхнього регістру. Коли правильний регістр збігається, він запускає оператори в потрібному регістрі та переривається.

Тому «горизонтальний рух» відображається, коли напрямок ліворуч або праворуч. Таким чином, fallthrough дозволяє створити логіку АБО у вашому коді.

#4. Діапазони відповідності

Оператор JavaScript switch перевіряє, чи значення регістра дорівнює значенню виразу. Якщо так, він виконує оператори в цьому випадку. Однак інколи ви можете перевірити, чи значення входить у заданий діапазон. Зіставлення діапазонів може бути складним, але наведений нижче фрагмент коду демонструє обхідний шлях.

У наведеному нижче прикладі ми реалізуємо програму, яка, отримавши оцінку, друкує оцінку. Наприклад, якщо позначка вище 90, програма надрукує A+. Якщо воно вище 80, але менше 90, буде надруковано A тощо.

Для цього я вставив вираз true в дужки. Потім значення кожного випадку було визначено як логічну операцію, яка буде істинною, лише якщо позначка знаходиться в діапазоні для цього випадку. Наприклад, остання позначка >= 90 буде істинною, лише якщо позначка більша або дорівнює 90. Тому вона відповідатиме значенню виразу, оскільки істина дорівнює істині.

const mark = <replace with any mark>;

switch (true) {
    case mark >= 50 && mark < 60:
        console.log('D');
        break;
    case mark >= 60 && mark < 70:
        console.log('C');
        break;
    case mark >= 70 && mark < 80:
        console.log('B');
        break;
    case mark >= 80 && mark < 90:
        console.log('A')
        break;
    case mark >= 90:
        console.log('A+')
        break;
    default:
        console.log('<50')
}

Вихід коду вище, коли позначка встановлена ​​на 80:

А коли позначка встановлена ​​на 95:

А коли позначка 45:

Лексичний огляд

Інструкції всередині регістру в комутаторі не мають лексичної області видимості. Це означає, що змінні, визначені в одному регістрі, будуть доступні в іншому регістрі. Це важливо знати, коли ви пишете блоки перемикачів, де буде відповідати більше ніж один регістр. Ось приклад, щоб краще пояснити це:

switch (true) {
    case true:
        let num = 10
    case true:
        console.log(num);
}

У наведеному вище фрагменті коду обидва випадки збігаються. У першому випадку ми визначаємо змінну num; у другому ми отримуємо доступ до його значення. Ми не отримаємо жодних помилок, як ви можете бачити на знімку екрана нижче:

Різниця між оператором Switch та іншими умовами

Оператор Switch краще підходить для сценаріїв, коли ви тестуєте кілька умов. Інструкція if підходить для умов, коли ви тестуєте 2 або 3 умови. Тернарний оператор підходить лише для умов, коли ви хочете виразити умовний оператор як однорядковий.

Для стислості вам слід спочатку написати тернарні оператори. Якщо неможливо виразити логіку в потрійному операторі, ви можете використовувати оператор if. Але якщо це неможливо, ви обираєте оператор switch.

Висновок

У цій статті описано оператор switch, як ним користуватися та його дивні особливості. Ми також розглянули, коли його використовувати.

Далі ви можете відшліфувати JavaScript за допомогою цих шпаргалок JavaScript.