Как использовать условные объявления в JavaScript

Введение

В программировании будет много случаев, когда вы захотите выполнить разные блоки кода в зависимости от ввода пользователя или других факторов.

Например, вы можете захотеть отправить форму, если все поля заполнены правильно, но вы можете захотеть предотвратить отправку этой формы, если некоторые обязательные поля отсутствуют. Для выполнения подобных задач у нас есть условные операторы, которые являются неотъемлемой частью всех языков программирования.

Условные операторы выполняют определенное действие, основанное на результатах true или false результата.

Некоторые примеры условных операторов JavaScript, которые вы можете увидеть, включают:

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

Условные операторы являются частью логики, принятия решений или управления потоком компьютерной программы.

В этом руководстве мы рассмотрим условные операторы, в том числе ключевые слова if, else и else if. Мы также будем иметь дело с тернарным оператором.

Если заявление

Самым простым из условных операторов является оператор if. Оператор if будет оценивать, является ли оператор истинным или ложным, и будет выполняться только в том случае, если оператор возвращает true. Блок кода будет проигнорирован в случае false результата и программа перейдет к следующему разделу.

Оператор if записывается с ключевым словом if, за которым следует условие в круглых скобках, а код, который должен быть выполнен, заключен в фигурные скобки. Короче говоря, это можно записать так, как if () {}.

Вот более подробное рассмотрение основного if.

if (condition) {
 //code that will execute if condition is true
 }

Содержимое оператора if заключено в фигурные скобки, которые содержат блок кода для выполнения и не заканчиваются точкой с запятой, как функциональный блок.

Например, давайте рассмотрим приложение для покупок. Предположим, для функциональности этого приложения пользователь, который внес определенную сумму средств на свой счет, желает приобрести товар в магазине.

//Set balance and price of item
 const balance = 500;
 const jeans = 40;

 //Check if there are enough funds to purchase item
 if (jeans <= balance) {
 console.log("You have enough money to purchase the item!");
 }

You have enough money to purchase the item!

У нас есть баланс счета 500 и мы хотим купить пару джинсов за 40. Используя оператор «меньше или равно», мы можем проверить, меньше или равна ли цена джинсов сумме средств, которые у нас есть. Поскольку jeans <= balance оцениваются как true, условие будет выполнено, и блок кода будет выполнен.

В новом примере мы создадим новый товар в магазине, стоимость которого превышает доступный баланс.

//Set balance and price of item
 const balance = 500;
 const phone = 600;

 //Check if there is enough funds to purchase item
 if (phone <= balance) {
 console.log("You have enough money to purchase the item!");
 }

В этом примере не будет вывода, так как phone <= balance оценивается как false. Блок кода будет просто проигнорирован и программа перейдет к следующей строке.

Еще заявление

С if мы выполняем код только тогда, когда оценивается true оператор, но мы часто хотим, чтобы произошло что-то еще, если условие не выполняется.

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

Оператор else пишется после оператора if и не содержит условий в круглых скобках. Вот синтаксис основного if...else.

if (condition) {
 //code that will execute if condition is true
 } else {
 //code that will execute if condition is false
 }

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

//Set balance and price of item
 const balance = 500;
 const phone = 600;

 //Check if there is enough funds to purchase item
 if (phone <= balance) {
 console.log("You have enough money to purchase the item!");
 } else {
 console.log("You do not have enough money in your account to purchase this item.");
 }

You do not have enough money in your account to purchase this item.

Поскольку условие if не выполнено, будет выполнен только код внутри else.

Это может быть очень полезно для отображения предупреждений или информирования пользователя о том, какие действия следует предпринять для продвижения вперед. Действие обычно требуется как для успеха, так и для неудачи, поэтому if...else встречается чаще, чем просто один изолированный оператор if.

Иначе если заявление

С помощью if и else мы можем выполнять блоки кода в зависимости от того, является ли условие true или false. Однако иногда у нас может быть несколько возможных условий и результатов, и нам может понадобиться более двух простых вариантов. Один из способов сделать это — использовать else if, который может оценивать более двух возможных результатов.

Вот базовый пример блока кода, который содержит оператор if, несколько операторов else if и оператор else на случай, если ни одно из условий не оценивается как true.

if (condition a) {
 //code that will execute if condition a is true
 } else if (condition b) {
 //code that will execute if condition b is true
 } else if (condition c) {
 //code that will execute if condition c is true
 } else {
 //code that will execute if all above conditions are false
 }

JavaScript попытается выполнить все операторы по порядку, и если ни один из них не будет успешным, он автоматически установит блок else.

Вы можете иметь все необходимые else if. В случае многих else ifswitch может быть предпочтительнее для удобочитаемости.

В качестве примера нескольких else if мы можем создать рейтинговое приложение, которое будет выставлять буквенную оценку на основе оценки из 100.

Требования к этому приложению следующие:

• 90 баллов и выше – это А
• С 80 по 89 класс — B.
• С 70 по 79 класс - C
• От 60 до 69 классов — D.
• Оценка 59 или ниже — F

Ниже мы создадим простой набор операторов if, else и else if и проверим степени с заданным значением.

//Set the current grade of the student
 let grade = 87;

 //Check if grade is an A, B, C, D, or F
 if (grade >= 90) {
 console.log("A");
 } else if (grade >= 80) {
 console.log("B");
 } else if (grade >= 70) {
 console.log("C");
 } else if (grade >= 60) {
 console.log("D");
 } else {
 console.log("F");
 }

B

В нашем примере мы сначала проверяем наивысший балл, который будет больше или равен 90. После этого else if выполняется более 80, 70 и 60 раз, пока не достигнет значения else по умолчанию.

Хотя наша grade 87 технически верна и для C, D и F, ставки останавливаются на первой успешной. Таким образом, мы получаем результат B, который является первым совпадением.

Тернарный оператор

Тернарный оператор, также известный как условный оператор, используется как сокращение для оператора if...else.

Тернарный оператор записывается с синтаксисом вопросительного знака ( ? ), за которым следует двоеточие ( :, как показано ниже.

(condition) ? expression on true: expression on false

В предыдущем операторе сначала пишется условие, за которым следует ?. Первое выражение будет иметь значение true, а второе выражение — значение false. Он очень похож на оператор if...else, но с более компактным синтаксисом.

В этом примере мы создадим программу, которая проверяет, не старше ли пользователя 21 года. В этом случае на консоли будет напечатано "You may enter". В противном случае "You may not enter." на консоли.

//Set age of user
 let age = 20;

 //Place result of ternary operation in a variable
 const oldEnough = (age >= 21) ? "You may enter.": "You may not enter.";

 //Print output
 oldEnough;

'You may not enter.'

Поскольку age пользователя был меньше 21 года, на консоль отправляется сообщение об ошибке. Эквивалентом if...else было бы: "You may enter." в операторе if и "You may not enter." в операторе else.

Вывод

Условные операторы предоставляют нам управление потоком для определения вывода наших программ. Они являются одним из основных строительных блоков программирования и могут быть найдены практически во всех языках программирования.

В этой статье мы узнали, как использовать ключевые слова if, else и else if, вложенные операторы и использование тернарного оператора.