JS для начинающих. Урок 1.10: Операторы ветвления кода

operatory-vetvleniya-kodaРанее в этом курсе мы рассматривали только скрипты, которые выполнялись последовательно строчка за строчкой, но очень часто возникает потребность выполнить (не выполнять) какой-то блок кода только при выполнении (не выполнении) определённых условий. Для этого и существуют операторы ветвления кода. Они называются так, поскольку разделяют код на ветви и при выполнении такого оператора решается, какая ветвь будет выполняться, а какая нет, подобно тому, как мы решаем, куда повернуть на развилке дорог.

Оператор if

Этот оператор реализует выполнение (не выполнение) блока кода, при условии, что некоторое выражение равно true (false). Выражение, в зависимости от значения которого код выполняется (не выполняется) пишется в круглых скобках после ключевого слова if. Блок кода, который выполняется (не выполняется) пишется после условия в фигурных скобках.

if (условие) {
  // код
}

Например, напишем скрипт, который выводит сообщение только тогда, когда переменная a содержит значение true.

var a = true;
if (a) {
  console.log('Переменная а содержит значение true');
}

Но, если в переменной a будет записано значение false, то сообщение не выведется на консоль.

var a = false;
if (a) {
  console.log('Переменная а содержит значение true'); // этот код не сработает
}

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

var a = 6;
 
if (a > 0 && a < 10 && a % 2 == 0) {
  console.log('Значение а чётное, больше нуля и меньше десяти'); // сработает
}
var a = 5;
 
if (a > 0 && a < 10 && a % 2 == 0) {
console.log('Значение а чётное, больше нуля и меньше десяти'); // не сработает
}
var a = 0;
 
if (a > 0 && a < 10 && a % 2 == 0) {
  console.log('Значение а чётное, больше нуля и меньше десяти'); // не сработает
}

Операторы if можно вкладывать друг в друга.

if (условие1) {
  // code1
  if (условие2) {
    // code2
  }
}

Но нужно заметить, что конструкцию вида

if (условие1) {
  if(условие2) {
	// code
  }
}

стоит избегать и заменять её на

if (условие1 && условие2) {
  // code
}

Оператор if-else

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

if (условие) {
  // code1
} else {
  //code2
}

Например

var a = 10;
 
if (a % 2 == 0) {
  console.log('Значение а чётное'); // выведется это сообщение
} else {
  console.log('Значение a нечётное'); // но не это
}
var a = 5;
 
if (a % 2 == 0) {
  console.log('Значение а чётное'); // это сообщение не выведется
} else {
  console.log('Значение a нечётное'); // а это выведется
}

Операторы if-else можно объединять в длинные цепочки. Например:

if (a < 0) {
  console.log('Значение а отрицательное');
} else if (a == 0){
  console.log('Значение a равно нулю');
} else {
  console.log('Значение а положительное');
}

Первый блок кода сработает, если a меньше нуля, второй – если a равно нулю, ну а третий – если не сработали два предыдущих, то есть если а положительно.

Хочется сказать ещё пару слов об оформлении кода. Если блок кода, состоит из одной строки, то его не обязательно заключать в фигурные скобки, то есть такой код:

if (a < 0)
  console.log('Значениe а отрицательное');
else if (a == 0)
  console.log('Значение a равно нулю');
else
  console.log('Значение а положительное');

будет работать. Но я не рекомендую так делать, так как вдруг вам понадобится добавить ещё одну строку в блок кода после if и, если вы не заключите его в фигурные скобки, будет ошибка в случае оператора if-else и код будет работать, возможно, не так как вы думали, если вы используете оператор if.

if (a <= 0)
  console.log('Значение а меньше нуля'); // выведется, если а меньше либо равно нулю
  console.log('или равно нулю'); // будет выводится всегда

А такой код и вовсе вызовет ошибку.

1
2
3
4
5
if (a <= 0)
  console.log('Значение а меньше нуля');
  console.log('или равно нулю');
else
  console.log('Значение a отрицательно');

Классическим примером, демонстрирующим работу операторов if-else, является скрипт, приветствующий пользователя по-разному, в зависимости от времени суток.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<title>Hello!</title>
</head>
 
<body>
<script type="text/javascript">
var date = new Date(),
  hours = date.getHours();
 
if (hours < 12 && hours > 5) {
  document.write('C добрым утром!');
} else if (hours >= 12 && hours < 17) {
  document.write('Добрый день!');
} else if (hours >= 17 && hours < 22) {
  document.write('Добрый вечер!');
} else {
  document.write('Доброй ночи!');
}
 
</script>
</body>
 
</html>

Демо

Возможно, вам непонятно как нам удалось получить количество часов, но не заостряйте пока на этом внимание и просто примите как данность, что в переменной hours содержится количество часов.

Условная тернарная операция

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

var variable = booleanValue ? value1 : value2;

если значение booleanValue равно true, то переменной variable присвоится значение value1, иначе значение value2. Этот оператор удобно использовать для сокращение кода вида:

var variable;
if (booleanValue) {
  variable = value1;
} else {
  variable = value2;
};

Оператор switch-case

Этот оператор удобно использовать когда у нас много вариантов выбора. Синтаксис оператора вот такой:

switch (какое-то значение) {
  case значение1 :
    // code1
    break;
  case значение2 :
    // code2
    break;
  // ...
  case значениеN :
    // codeN
    break;
  default :
    // codeM
}

Если какое-то значение равно значению 1, то выполнится первый блока кода, если значению 2, то второй и так далее. Если какое-то значение не равно ни одному из предложенных вариантов, стоящему после ключевого слова case, то выполнится блок кода, после ключевого слова default. Оператор switch-case часто применяется, чтобы избежать вот таких длинных цепочек if-else:

var a = какое-то значение;
 
if (a == значение1) {
  // code1
} else if (a == значение2) {
  // code2
}
// ..
} else if (a == значениеN ) {
  // codeN
} else {
   // codeM
}

Пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
<head>
<title>Colors</title>
</head>
 
<body>
<script type="text/javascript">
var color = 'red';
 
switch (color) {
  case 'green' :
    document.write('<font color="green">Зелёный</font>');
    break;
  case 'red' :
    document.write('<font color="red">Красный</font>');
    break;
  case 'blue' :
    document.write('<font color="blue">Cиний</font>');
    break;
  case 'yellow' :
    document.write('<font color="yellow">Жёлтый</font>');
    break;
  default :
    document.write('Неизвестный цвет');
}
 
</script>
</body>
 
</html>

Сейчас этот скрипт просто выведет красную надпись: «Красный», но вы можете скачать архив с исходными кодами, поменять значение переменной color и проследить за результатом.

Ещё один пример. Для его понимания важно знать, что у америкосов первый (у программистов нулевой) день недели – воскресенье, второй (у программистов первый) — понедельник и т.д. Не заостряйте внимание на том, как был получен текущий день недели. Просто примите как данность, что он получен и записан в переменную dayOfWeek. Здесь опущен html-код. Он аналогичен тому, что был в предыдущем примере.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var date = new Date(),
  dayOfWeek = date.getDay();
 
switch (dayOfWeek) {
  case 0 :
    document.write('Сегодня воскресенье');
    break;
  case 1 :
    document.write('Сегодня понедельник');
    break;
  case 2 :
    document.write('Сегодня вторник');
    break;
  case 3 :
    document.write('Сегодня среда');
    break;
  case 4 :
    document.write('Сегодня четверг');
    break;
  case 5 :
    document.write('Сегодня пятница');
    break;
  case 6 :
    document.write('Сегодня суббота');  
 
}

Демо

Стоит ещё сказать пару слов о операторе break. Если он опущен в каком-то блоке кода, после case, то выполнения кода продолжится и блок кода, после следующего ключевого слова case так же выполнится и так далее, пока не будет встречено ключевое слово break.

Пример:

var a = 1;
 
switch (a) {
  case 1 :
    console.log(1); // выведется
  case 2 :
    console.log(2); // тоже выведется
}

Ещё я хотел бы сказать пару слов о форматировании кода. Не стоит писать оператор switch-case вот так:

switch (какое-то значение) {
  case значение1 :   /* code1 */    break;
  case значение2 : /* code2 */    break;    
  // ...
  case значениеN :   /* codeN */   break;
  default :  /* codeM */
}

Может код от этого и не будет таким раздутым в высоту, но читабельнее от этого не станет. Одна строка, должна восприниматься как одно отдельное действие, поэтому не нужно писать длинные строки с несколькими выражениями.

На этом всё. И по традиции желаю вам успехов!

  • Ana Grig

    Не у «америкосов», а у «американцев».

    • Vostok Sisters

      У пендосов.