Вступление
В программировании будет много случаев, когда вы захотите запустить различные блоки кода в зависимости от пользовательского ввода или других факторов.
В качестве примера вам может потребоваться, чтобы форма была отправлена, если каждое поле заполнено правильно, но вы можете запретить отправку этой формы, если отсутствуют какие-либо обязательные поля. Для достижения таких задач мы имеем условные утверждения , которые являются неотъемлемой частью всех языков программирования.
Условные операторы выполняют конкретное действие, основанное на результатах результата 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 ifоператоров switchутверждение может быть предпочтительным для удобочитаемости.
В качестве примера нескольких else ifоператоров мы можем создать приложение для оценки, которое выведет класс оценки на основе оценки из 100.
Требования к этому приложению следующие:
- Класс 90 и выше — это A
- Класс от 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
В приведенном выше утверждении сначала записывается условие, за которым следует a ?. Первое выражение будет выполнено 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ключевые слова, и покрыли вложенность заявлений, а также использование троичного оператора.