Условные операторы if, if…else и if…else…if в JavaScript

В этом руководстве вы узнаете, как использовать условные операторы if, if...else и if...else...if в JavaScript.

Введение в оператор if JavaScript

Оператор if выполняет блок, если условие true. Ниже показан синтаксис оператора if :

if( condition ) 
statement;

condition может быть значением или выражением. Как правило, условие оценивается как логическое значение, которое может быть true или false.

Если condition оценивается как true, оператор if выполняет statement. В противном случае оператор if передает управление следующему за ним оператору.

Следующая блок-схема иллюстрирует, как работает оператор if :

Если condition оценивается как нелогическое значение, JavaScript неявно преобразует результат в логическое значение, вызывая функцию Boolean().

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

if(condition) { 
// statements to execute 
}

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

Примеры использования оператора if

В следующем примере оператор if используется для проверки того, равен ли возраст 18 или больше:

let age = 18; 
if(age >= 18) { 
console.log('You can sign up'); 
}

Выход:

You can sign up

Как это работает.

• Во-первых, объявите и инициализируйте переменную age значением 18 :

let age = 18;

• Во-вторых, проверьте, является ли возраст больше или равным 18, используя оператор if. Поскольку выражение age >= 18 true, выполняется код внутри оператора if, который выводит сообщение на консоль:

if(age >= 18) { 
console.log('You can sign up'); 
}

В следующем примере также используется оператор if. Однако age равен 16, что приводит к тому, что условие оценивается как false. Поэтому вы не увидите никакого сообщения в выводе:

let age = 16; 
if(age >= 18) { 
console.log('You can sign up'); 
}

Вложенный оператор if

Оператор if можно использовать внутри другого оператора if. Например:

let age = 16; 
let state = 'CA'; 

if(state == 'CA') { 
if(age >= 16) { 
console.log('You can drive.'); 
} 
}

Выход:

You can drive.

Как это работает.

• Во-первых, объявите и инициализируйте переменные age и state :

let age = 16; 
let state = 'CA';

• Во-вторых, проверьте, является ли state 'CA' используя оператор if. Если да, проверьте, больше ли age 16 лет, используя вложенный оператор if, и выведите сообщение на консоль:

if(state == 'CA') { 
if(age == 16) { 
console.log('You can drive.'); 
} 
}

На практике следует по возможности избегать использования вложенных операторов if. Например, вы можете использовать оператор && для объединения условий и использовать операторы if следующим образом:

let age = 16; 
let state = 'CA'; 
if(state == 'CA' && age == 16) { 
console.log('You can drive.'); 
}

Введение в оператор JavaScript if…else

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

Оператор if выполняет блок, если условие true. Когда условие false, оно ничего не делает. Но если вы хотите выполнить оператор if условие false, вы можете использовать оператор if...else.

Ниже показан синтаксис оператора if...else :

if( condition ) { // ... } else { // ... }

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

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

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

На следующей блок-схеме показано, как работает оператор if...else :

Примеры использования оператора JavaScript if…else

В следующем примере оператор if...else используется для проверки того, является ли возраст больше или равным 18:

let age = 18; 
if(age >= 18) { 
console.log('You can sign up.'); 
} else { 
console.log('You must be at least 18 to sign up.'); 
}

В данном примере age равен 18 годам. Следовательно, выражение age >= 18 true. Следовательно, вы увидите следующее сообщение в консоли:

You can sign up.

Следующий пример аналогичен приведенному выше, за исключением того, что age равен 18 вместо 16 :

let age = 16; 
if(age >= 18) { 
console.log('You can sign up.'); 
} else { 
console.log('You must be at least 18 to sign up.'); 
}

Выход:

You must be at least 18 to sign up.

В данном примере age равен 16 годам. Следовательно, выражение age >= 18 оценивается как false. Следовательно, выполняется инструкция в ветке else, которая выводит сообщение на консоль.

Введение в оператор JavaScript if else if

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

Чтобы проверить несколько условий и выполнить соответствующий блок, если условие true, вы используете оператор if...else...if следующим образом:

if(condition1) { 
// ... 
} else if(condition2) { 
// ... 
} else if(condition3) { 
//... } else { //... 
}

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

Оператор if...else...if проверяет условия сверху вниз и выполняет соответствующий блок, если условие true.

Оператор if...else...if прекращает оценку оставшихся условий, как только условие становится true. Например, если condition2 true, оператор if...else...if не будет оценивать condition3.

Если все условия false, оператор if...else...if выполняет блок в ветке else.

Следующая блок-схема иллюстрирует, как работает оператор if...else...if :

Примеры оператора if…else…if в JavaScript

Давайте рассмотрим несколько примеров использования оператора if...else...if.

1) Простой пример оператора if…else…if

В следующем примере оператор if...else...if используется для получения названия месяца из порядкового номера месяца:

let month = 6; 
let monthName; 
if(month == 1) { 
monthName = 'Jan'; 
} else if(month == 2) { 
monthName = 'Feb'; 
} else if(month == 3) { 
monthName = 'Mar'; 
} else if(month == 4) { 
monthName = 'Apr'; 
} else if(month == 5) { 
monthName = 'May'; 
} else if(month == 6) { 
monthName = 'Jun'; 
} else if(month == 7) { 
monthName = 'Jul'; 
} else if(month == 8) { 
monthName = 'Aug'; 
} else if(month == 9) { 
monthName = 'Sep'; 
} else if(month == 10) { 
monthName = 'Oct'; 
} else if(month == 11) { 
monthName = 'Nov'; 
} else if(month == 12) { 
monthName = 'Dec'; 
} else { monthName = 'Invalid month'; 
} 
console.log(monthName);

Выход:

Jun

В этом примере мы сравниваем месяц с 12 числами от 1 до 12 и присваиваем соответствующее название месяца переменной monthName.

Поскольку месяц равен 6, выражение month==6 оценивается как true. Таким образом, оператор if...else...if присваивает литеральную строку 'Jun' переменной monthName. Поэтому вы видите Jun в консоли.

Если вы измените месяц на число, которое не находится в диапазоне от 1 до 12, вы увидите в консоли Invalid Month, поскольку будет выполнено предложение else.

2) Использование оператора JavaScript if…else…if для расчета индекса массы тела

В следующем примере вычисляется индекс массы тела (ИМТ) человека. Используем оператор if...else...if для определения статуса веса на основе ИМТ:

let weight = 70; // kg 
let height = 1.72; // meter 
// calculate the body mass index(BMI) 
let bmi = weight /(height * height); 
let weightStatus; 
if (bmi < 18.5) {
  weightStatus = 'Underweight';
} else if (bmi >= 18.5 && bmi <= 24.9) {
  weightStatus = 'Healthy Weight';
} else if (bmi >= 25 && bmi <= 29.9) {
weightStatus = 'Overweight'; 
} else { 
weightStatus = 'Obesity'; 
}
 
console.log(weightStatus);

Выход:

Healthy Weight

Как это работает:

• Во-первых, объявите две переменные, которые содержат вес в килограммах и рост в метрах. В реальном приложении вы получите эти значения из веб-формы.
• Во-вторых, рассчитайте индекс массы тела, разделив вес на квадрат роста.
• В-третьих, определите статус веса на основе ИМТ, используя оператор if...else..if.
• Наконец, выведите статус веса на консоль.

Заключение

• Используйте операторifв JavaScript для выполнения оператора, если условие true.
• По возможности избегайте использования вложенных операторов if.

• Используйте оператор JavaScript if...else для выполнения блока, если условие true, и другого блока в противном случае.

• Используйте оператор JavaScript if...else...if для проверки нескольких условий и выполнения соответствующего блока, если условие true.