Умовні оператори в JavaСценарій: if, else і else if
Джеймс Гартман
⚡ Розумний підсумок
Умовні оператори в JavaСкрипт вирішує, який блок коду виконуватиметься, перевіряючи умову, а форми if, if…else та if…else if…else охоплюють майже всі рішення щодо розгалуження, які коли-небудь знадобляться скрипту-початківцю.
JavaУмовні оператори сценарію
Існує в основному три типи умовних операторів JavaScript.
- if Заява: оператор «if» виконує код на основі умови.
- if…else Заява: оператор if…else складається з двох блоків коду; коли умова істинна, виконується перший блок коду, а коли умова хибна, виконується другий блок коду.
- if… else if… else Заява: Коли потрібно перевірити кілька умов і виконати різні блоки коду залежно від того, яка з умов є істинною, використовується оператор if…else if…else.
Кожна з трьох форм розглядається нижче разом із її синтаксисом та прикладом виконання. Ті самі правила застосовуються незалежно від того, чи знаходиться скрипт всередині сторінки або у зовнішньому файлі, і чи умова записана на верхньому рівні, чи всередині функція.
Як використовувати умовні оператори
Умовні оператори використовуються для визначення потоку виконання на основі різних умов. Якщо умова істинна, ви можете виконати одну дію, а якщо умова хибна, ви можете виконати іншу дію.
На діаграмі нижче ця ідея зображена як розвилка: одна умова оцінюється один раз, а керування переходить або до істинної, або до хибної гілки, а не до обох обох.
Якщо Заява
Синтаксис:
if(condition) { lines of code to be executed if condition is true }
Ви можете використовувати if оператор, якщо потрібно перевірити лише певну умову. Коли вираз у дужках має вигляд true, блок виконується; коли він обчислюється як false, інтерпретатор пропускає його одразу, і скрипт продовжує виконувати наступний оператор.
Спробуйте самі:
<html>
<head>
<title>IF Statments!!!</title>
<script type="text/javascript">
var age = prompt("Please enter your age");
if(age>=18)
document.write("You are an adult <br />");
if(age<18)
document.write("You are NOT an adult <br />");
</script>
</head>
<body>
</body>
</html>
У прикладі у відвідувача запитується вік, а потім це значення перевіряється двічі: один раз для віку від 18 років, один раз для віку до 18 років. Оскільки два окремі if використовуються твердження, а не else, обидві умови оцінюються щоразу, коли сторінка завантажується.
Сучасний еквівалент: Наведений вище код зберігається точно так, як опубліковано. У поточній JavaСкрипт, за допомогою якого зазвичай пишеться та сама логіка let or const замість var, С console.log() or textContent замість document.write(), і без type="text/javascript" атрибут, який HTML5 робить необов'язковим.
Оператор If…Else
Синтаксис:
if(condition) { lines of code to be executed if the condition is true } else { lines of code to be executed if the condition is false }
Ви можете використовувати if...else оператор, якщо вам потрібно перевірити одну умову та виконати окремий блок коду для кожного результату. Завжди виконується лише один із двох блоків, тому окрема друга перевірка не потрібна.
Спробуйте самі:
<html>
<head>
<title>If...Else Statments!!!</title>
<script type="text/javascript">
// Get the current hours
var hours = new Date().getHours();
if(hours<12)
document.write("Good Morning!!!<br />");
else
document.write("Good Afternoon!!!<br />");
</script>
</head>
<body>
</body>
</html>
тут new Date().getHours() повертає поточну годину годинника браузера як число від 0 до 23. Будь-яке значення менше 12 створює ранкове привітання, а всі інші значення переходять до else філія
Оператор If…Else If…Else
Синтаксис:
if(condition1) { lines of code to be executed if condition1 is true } else if(condition2) { lines of code to be executed if condition2 is true } else { lines of code to be executed if condition1 is false and condition2 is false }
Ви можете використовувати if...else if...else оператор, якщо потрібно перевірити більше двох умов. Умови обчислюються зверху вниз, виконання зупиняється на першій, яка є істинною, а на останній else діє як загальний варіант, коли жоден з них не збігається.
Спробуйте самі:
<html>
<head>
<script type="text/javascript">
var one = prompt("Enter the first number");
var two = prompt("Enter the second number");
one = parseInt(one);
two = parseInt(two);
if (one == two)
document.write(one + " is equal to " + two + ".");
else if (one<two)
document.write(one + " is less than " + two + ".");
else
document.write(one + " is greater than " + two + ".");
</script>
</head>
<body>
</body>
</html>
Зверніть увагу на два виклики до parseInt()Значення, що повертаються prompt() є рядками, тому їх порівняння без перетворення призведе до порівняння тексту, а не чисел, і поверне значення «9» як більше за «10».
Трінарний Operator: Скорочення від if…else
Коли if...else блок вибирає лише між двома значеннями, умовний (тернарний) оператор виражає те саме рішення як один вираз. Це той самий JavaОператор скрипта, який приймає три операнди: умову, знак питання, значення, яке використовується, коли умова істинна, двокрапку та значення, яке використовується, коли вона хибна.
// if...else form let message; if (age >= 18) { message = "adult"; } else { message = "minor"; } // same decision as a ternary expression let label = age >= 18 ? "adult" : "minor";
Використовуйте тернарний оператор, коли це покращує читабельність, а не лише для економії рядків:
- Добре підходить: вибір одного з двох значень для присвоєння, повернення або вставки в шаблонний рядок.
- Погана посадка: гілки, які виконують кілька операторів, викликають функції для своїх побічних ефектів або потребують власних локальних змінних.
- Уникайте вкладення: потрійний член всередині потрійного члена набагато важче прочитати, ніж
else ifланцюжок.
Оператор switch проти if…else if…else
Довгий else if Ланцюг, який постійно порівнює одну й ту саму змінну з різними фіксованими значеннями, зазвичай зрозуміліший як switch оператор. Функція switch обчислює свій вираз один раз, а потім переходить до відповідного case; break зупиняє перенесення виконання в наступний випадок, та default грає роль фіналу else.
switch (day) { case "Sat": case "Sun": document.write("Weekend"); break; default: document.write("Weekday"); }
Ці дві структури не є взаємозамінними в кожній ситуації:
| Точка порівняння | якщо…інакше якщо…інакше | перемикання |
|---|---|---|
| Вид тесту | Будь-який логічний вираз, включаючи діапазони, такі як hours<12 |
Рівність лише проти фіксованих цінностей |
| Використане порівняння | Який би оператор ви не написали | Суворе порівняння, отже "5" не відповідає 5 |
| читабельність | Найкраще підходить для кількох непов'язаних умов | Найкраще для багатьох значень однієї змінної |
| Поширена помилка | Забувши про трейлінг else |
забувши break, що дозволяє виконанню провалитися |
Правдиві та хибні цінності в JavaУмови скрипта
Умова не обов'язково має бути порівнянням. JavaСкрипт спочатку перетворює все, що знаходить у дужках, на логічне значення, тому if (name) є дійсним кодом. Лише шість значень перетворюються на хибні: false, 0, порожній рядок, null, undefined та NaNВсе інше правдиве, включаючи рядок. "0", порожній масив та порожній об'єкт.
Більшість умовних помилок у початкових скриптах виникають через короткий список помилок:
- Присвоєння замість порівняння:
if (x = 5)призначає і завжди правдивий;if (x === 5)порівнює. - Несподіванки щодо вільної рівності:
==перетворює типи перед порівнянням, тому"" == 0це правда. Віддаю перевагу===. - Відсутні брекети: без
{}лише наступний окремий оператор належить до гілки, точно як у наведених вище прикладах. - Неконвертований вхідний сигнал: значення від
prompt()а поля форми є рядками доparseInt()orNumber()перетворює їх. - Недосяжні гілки: в
else ifланцюжок, розмістіть найвужчу умову першою, інакше ширший попередній тест завжди переможе.
