Условия if, else и switch в JavaScript

В этой статье будет разобран механизм условий if в JavaScript. В программировании условие if - это одни из основных инструментов. Давайте посмотрим, как это работает:
if( /* условие */ ){
  /* код в этих скобках будет выполняться, 
  если "условие" является правдой */
}else{
  /* код в этих скобках будет выполняться, 
  если "условие" является ложью */
}
Обратите внимание, что можно записать if( ... ){ ... } без блока else{ ... }. Также можно записать оба блока без фигурных скобок, но тогда выполнится только следующая строчка после if или else. Приведём пример и попробуем написать код с возможными условиями:
var  a = 4;

if( a < 5 ) console.log('Это правда'); // значение a меньше 5

if( a <= 5 ) console.log('Это правда'); // значение a меньше или равно 5

if( a > 3  ) console.log('Это правда'); // значение a больше 3

if( a >= 3  ) console.log('Это правда'); // значение a больше или равно 3

if( a == 4 ) console.log('Это правда'); // значение a равно 4

if( a == 2 * 2 ) console.log('Это правда'); // значение a равно 4 (потому что 2*2=4)

if( a != 7 ) console.log('Это правда'); // значение a НЕ равно 7
Во всех перечисленных примерах будет выведена строка "Это правда", потому что условие выполняется.
Не забывайте, что одиночное равно "=" делает операцию присваивания. А двойное "==" сравнивает значения. Условие с одним равно if(a = 1) выдаст ошибку "ReferenceError: invalid assignment left-hand side".
Помимо сравнения по значению есть ещё и сравнение по типу. К примеру:
var a = true; // тип данных boolean (имеет два значения true и false)

if( 1 == true ) console.log('Это правда'); // цифра 1 равно true

if( a === true ) console.log('Это правда'); // значение a имеет тип и равно true

if( a !== false ) console.log('Это правда'); // значение a не имеет тип или не равно false
Условие может быть как в одну строку, так и в несколько.

Помимо if и else есть ещё else if. Последнее используется для создания множественных условий. Приведём наглядный пример:
var a = 2;

if( a == 1 ){
   console.log(a + ' == 1');
}else if(a < 3){ 
   console.log(a + ' < 3');
}else if(a <= 2){ 
   console.log(a + ' <= 2');
}else{ 
   console.log('Ничего не подходит');
}
В таком коде условия будут проверять по порядку. Сначала проверится a == 1 и оно окажется ложью. Будет проверено следующее условие по списку a < 3 - это условие является истиной, поэтому в результате выполнения этого JavaScript кода на экран браузера будет выведен текст "2 < 3". Но если бы и это условие не подошло, то было бы проверено следующее a <= 2. Но если и оно бы не подошло, то была бы выполнено то, что стоит в else{ ... } - на экран бы было выведен текст "Ничего не подходит".

Возможно сделать несколько проверок внутри скобок if( ... ). Для этого используются логические операторы "&&" (и), "||" (или). Также возможно ставить скобки внутри условий. Эти скобки работают как скобки в математике. Разберём всё на примере:
var a = 2;
b = 3;
c = 4;

if( a == 2 && b < c ){
  // код здесь будет выполняться, потому что условие - истина
}

if( a == 2 && (b < c && c < a ) ){
  // код здесь НЕ будет выполняться, потому что условие - ложь (c больше a)
}

if( a == 2 || (b < c && c < a ) ){
  // код здесь будет выполняться, потому что условие - истина. Несмотря на то, что часть выражения после "||" является ложью
}

Конструкция switch

Если необходимо выполнить разный код при определённых значениях аргумента, то для большого количества проверок подойдёт switch( ... ). Продемонстрируем работу этой функции наглядно:
var a = 2;

switch (a) {
   case 1:
      console.log('Переменная a равна одному');
   break;
   case 2: 
      console.log('Переменная a равна двум');
   break;
   case 'три': 
      console.log('Переменная a равна трём');
   break;
   default:
      console.log('Значение не найдено');
   break;
}
В результате выполнения этого кода на экране браузера появится надпись "Переменная a равна двум". Это происходит потому, что функция switch берёт значение переменной a и начинает сравнивать со значениями, которые стоят после слова "case". Эти значения могут быть как строки, так и числа. В примере a = 2, поэтому функция выполнила код, стоящий в пункте "case 2:".

Конструкции switch в реальных проектах сайтов встречаются довольно редко. Обычно хватает if-else, или на крайний случай несколько раз вложенных if-else.
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: