Условные операторы в JavaScript

Условный оператор (оператор ветвления, условная инструкция) — оператор, конструкция языка программирования, обеспечивающая выполнение:

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

Условный оператор if

Условный оператор if(...) вычисляет условие в скобках и, если результат true, то выполняет блок кода. Таким образом, инструкция if (…) вычисляет выражение в скобках и преобразует результат к логическому типу.

Например:

let year = prompt(
  "В каком году была опубликована спецификация ECMAScript-2015?",
  ""
);
if (year == 2015) alert("Вы правы!"); // если введено число 2015 (результат сравнения true), будет выведено сообщение "Вы правы!"

let year = prompt(

"В каком году была опубликована спецификация ECMAScript-2015?",

);

if (year == 2015) alert("Вы правы!"); // если введено число 2015 (результат сравнения true), будет выведено сообщение "Вы правы!"

Не путайте примитивы (логические значения) true и false с правдивостью или ложностью булева объекта. Любое значение, которое не undefined, null, 0, NaN или пустая строка (""), и любой объект, включая объект Boolean, значение которого является ложным, считается правдивым при использовании в качестве условия. Например:

JavaScript

var b = new Boolean(false); if (b) // это условие истинно

1
2

var b = new Boolean(false);
if (b) // это условие истинно

Если мы хотим выполнить более одной инструкции, то нужно заключить блок кода в фигурные скобки {}:

if (year == 2015) {
  alert("Правильно!");
  alert("Действительно, в 2015 году");
}

if (year == 2015) {

alert("Правильно!");

alert("Действительно, в 2015 году");

}

Рекомендуется в конструкции if() всегда использовать фигурные скобки {}, даже если выполняется только одна команда. Это улучшает читабельность кода.

Условный (тернарный) оператор "?"

Условный (тернарный) оператор - единственный оператор в JavaScript, принимающий три операнда. Он часто используется в качестве укороченного варианта условного оператора if.

Условный оператор возвращает одно значение из двух данных в зависимости от логического значения условия:

(условие) ? (выражение1 если True) : (выражение2 если False)

Оператор возвращает значение выражения1, если условие верно, и значение выражения2 в противном случае.

Условие - это выражение, принимающее значение true или false. Выражение1, выражение2 могут принадлежать любому типу.

// Вывод сообщения, текст которого зависит от значения переменной isMember
"The fee is " + (isMember ? "$2.00" : "$10.00")

// Присвоение значения переменной на основе результатов работы тернарного оператора :
let a$ = 0;
let b$ = 1;
b$ = a$ > 0 ? a$ : b$ + 1;
console.log(`b$ = ${b$}`); // b$ = 2

// Ещё пример
var stop = false, age = 16;
age > 18 ? location.assign("continue.html") : stop = true;

// Вывод сообщения, текст которого зависит от значения переменной isMember

"The fee is " + (isMember ? "$2.00" : "$10.00")

// Присвоение значения переменной на основе результатов работы тернарного оператора :

let a$ = 0;

let b$ = 1;

b$ = a$ > 0 ? a$ : b$ + 1;

console.log(`b$ = ${b$}`); // b$ = 2

// Ещё пример

var stop = false, age = 16;

age > 18 ? location.assign("continue.html") : stop = true;

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

Пример

var firstCheck = false,
    secondCheck = false,
access = firstCheck ? "Доступ запрещен" : secondCheck ? "Доступ запрещен" : "Доступ разрешен";
console.log( access ); // выводит в консоль "Доступ разрешен"

var firstCheck = false,

secondCheck = false,

access = firstCheck ? "Доступ запрещен" : secondCheck ? "Доступ запрещен" : "Доступ разрешен";

console.log( access ); // выводит в консоль "Доступ разрешен"

[свернуть]

При присвоении значения также возможно выполнение более одной операции. В этом случае переменной будет присвоено то значение, которое стоит последним в списке значений, разделенных запятой.

Пример

var age = 16;

var url = age > 18 ? (
alert("Хорошо, вы можете продолжить."),
// alert вернет "undefined", но это будет проигнорировано, потому что
// не является последним в списке значений, разделенных запятой
"continue.html" // значение будет присвоено, если age > 18
) : (
alert("Вы слишком молоды!"),
alert("Простите :-("),
// и т.д.
"stop.html" // значение будет присвоено, если !(age > 18)
);

location.assign(url); // "stop.html"

var age = 16;

var url = age > 18 ? (

alert("Хорошо, вы можете продолжить."),

// alert вернет "undefined", но это будет проигнорировано, потому что

// не является последним в списке значений, разделенных запятой

"continue.html" // значение будет присвоено, если age > 18

) : (

alert("Вы слишком молоды!"),

alert("Простите :-("),

// и т.д.

"stop.html" // значение будет присвоено, если !(age > 18)

);

location.assign(url); // "stop.html"

[свернуть]

Условный оператор if ... else

Условие if выполняет инструкцию, если указанное условие истинно. Если условие не выполняется (ложно), то выполняется другая инструкция, следующая за оператором else:

// Использование оператора "if ... else"

value = 9;
if (value === 10) { // проверяемое условие (выражение, которое является либо истинным, либо ложным)
  var str = "value: 10"; // выполняемый код при value === true
} else {
  var str = "value: != 10"; // выполняемый код при value === false
}
console.log(str); // value: != 10

// Использование оператора "if ... else"

value = 9;

if (value === 10) { // проверяемое условие (выражение, которое является либо истинным, либо ложным)

var str = "value: 10"; // выполняемый код при value === true

} else {

var str = "value: != 10"; // выполняемый код при value === false

}

console.log(str); // value: != 10

Инструкция, выполняемая в случае если условиe истинно (true) или ложно (false), может быть любой, в том числе и вложенным if.

Для группировки нескольких инструкций используется блок else {...}. Если никакого действия не требуется, то используется пустая инструкция.

Примеры

Проверка наличия значения выражения:

value = 0; // 0 или null, или undefined, или NaN, или '' (пустая строка)
if (value) {
  var str = "значение есть " + value; // выполняемый код при value === true
} else {
  var str = "else, т.к. 'пусто' " + value; // выполняемый код при value === false
}
console.log(str);

value = 0; // 0 или null, или undefined, или NaN, или '' (пустая строка)

if (value) {

var str = "значение есть " + value; // выполняемый код при value === true

} else {

var str = "else, т.к. 'пусто' " + value; // выполняемый код при value === false

}

console.log(str);

Проверка массива на наличие значений:

value = [1, 42, 7]; // ВАЖНО! массив или объект в булевом представлении всегда true
if (value.length) {
  var str = "массив не пустой " + value.toString(); // массив не пустой 1,42,7
} else {
  var str = "массив пустой " + value.toString();
}
console.log(str);

value = [1, 42, 7]; // ВАЖНО! массив или объект в булевом представлении всегда true

if (value.length) {

var str = "массив не пустой " + value.toString(); // массив не пустой 1,42,7

} else {

var str = "массив пустой " + value.toString();

}

console.log(str);

Использование логических операторов или ( || ), и ( && ), не ( ! ):

value = 10;
if (!value) {
  var str = "значения нет, " + value;
} else {
  var str = "else, значение есть, " + value;
}
console.log(str);

value = 10;

if (!value) {

var str = "значения нет, " + value;

} else {

var str = "else, значение есть, " + value;

}

console.log(str);

Проверка объекта на тип "массив":

value = [10, 25]; // ВАЖНО! массив или объект в булевом представлении всегда true
if (Array.isArray(value)) {
  var str = "массив " + value.toString();
} else {
  var str = "не массив " + value.toString();
}
console.log(str);

value = [10, 25]; // ВАЖНО! массив или объект в булевом представлении всегда true

if (Array.isArray(value)) {

var str = "массив " + value.toString();

} else {

var str = "не массив " + value.toString();

}

console.log(str);

[свернуть]

Если необходимо проверить несколько вариантов условия, то для этого используется блок else if. Обратите внимание, что в JavaScript нет ключевого слова elseif (в одно слово).

Использование else if ()

if (x > 5) {
  ...
} else if (x > 50) {
  ...
} else {
  ...
}

// Работать не будет
// т.к. (browser === "Chrome" || "Firefox" || "Safari" || "Opera") в любом случае вернет true:
// или (browser === "Chrome") или "Firefox" - а это true (не пустое значение)

let browser = prompt("What is your browser?", "");
if (browser === "Edge") {
  console.log("You've got the Edge!");
} else if (browser === "Chrome" || "Firefox" || "Safari" || "Opera") {
  console.log(`Okay we support these browsers (${browser}) too`);
} else {
  console.log("We hope that this page looks ok!");
}

// Работать будет!

let browser = prompt("What is your browser?", "");
if (browser === "Edge") {
  console.log("You've got the Edge!");
} else if (
  browser === "Chrome" ||
  browser === "Firefox" ||
  browser === "Safari" ||
  browser === "Opera"
) {
  console.log(`Okay we support these browsers (${browser}) too`);
} else {
  console.log("We hope that this page looks ok!");
}

if (x > 5) {

...

} else if (x > 50) {

...

} else {

...

}

// Работать не будет

// т.к. (browser === "Chrome" || "Firefox" || "Safari" || "Opera") в любом случае вернет true:

// или (browser === "Chrome") или "Firefox" - а это true (не пустое значение)

let browser = prompt("What is your browser?", "");

if (browser === "Edge") {

console.log("You've got the Edge!");

} else if (browser === "Chrome" || "Firefox" || "Safari" || "Opera") {

console.log(`Okay we support these browsers (${browser}) too`);

} else {

console.log("We hope that this page looks ok!");

}

// Работать будет!

let browser = prompt("What is your browser?", "");

if (browser === "Edge") {

console.log("You've got the Edge!");

} else if (

browser === "Chrome" ||

browser === "Firefox" ||

browser === "Safari" ||

browser === "Opera"

) {

console.log(`Okay we support these browsers (${browser}) too`);

} else {

console.log("We hope that this page looks ok!");

}

Особенности присваивания в условном выражении

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

if (x = y) {
/* сделать что-то */
}

if (x = y) {

/* сделать что-то */

}

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

if ((x = y)) {
/* сделать что-то */
}

if ((x = y)) {

/* сделать что-то */

}

Инструкция (условный оператор) switch...case

Инструкция switch сравнивает значение выражения expression с значениями, перечисленными внутри неё в блоках case, а затем выполняет соответствующие инструкции.

switch (expression) {
  case value1:
    //Здесь выполняются инструкции, если результат выражения expression равен value1
    [break;]
  case value2:
    //Инструкции, соответствующие value2
    [break;]
  ...
  case valueN:
    //Инструкции, соответствующие значению valueN
    //statementsN
    [break;]
  default:
    //Здесь находятся инструкции, которые выполняются при отсутствии соответствующего значения
    //statements_default
    [break;]
}

switch (expression) {

case value1:

//Здесь выполняются инструкции, если результат выражения expression равен value1

[break;]

case value2:

//Инструкции, соответствующие value2

[break;]

...

case valueN:

//Инструкции, соответствующие значению valueN

//statementsN

[break;]

default:

//Здесь находятся инструкции, которые выполняются при отсутствии соответствующего значения

//statements_default

[break;]

}

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

Опциональная инструкция break выполняет выход из блока switch. Она может располагаться в каждом из случаев, но не является обязательной. Если в конструкции case не будет break, то будут также выполнены инструкции следующих case, при этом проверка на соответствие выражению выполняться не будет .

Пример:

let color = "black";
switch (color) {
  case "yellow": // в case указывается конкретное значение (не может быть выражением)
    console.log(`Color is ${color}`);
    break; // если не будет break, то будут выполняться следующие case
  case "red":
    console.log(`Color is ${color}`);
    break;
  default:
    // по умолчанию (если ни один case не сработал), не является обязательным
    console.log("Цвет не выбран");
}

let color = "black";

switch (color) {

case "yellow": // в case указывается конкретное значение (не может быть выражением)

console.log(`Color is ${color}`);

break; // если не будет break, то будут выполняться следующие case

case "red":

console.log(`Color is ${color}`);

break;

default:

// по умолчанию (если ни один case не сработал), не является обязательным

console.log("Цвет не выбран");

}

"Склеенные" case

switch (color) {
  case "yellow": // или yellow 
  case "red": // или red 
    console.log(`Color is yellow or red`);
    break;
  default:
    console.log(`Color не  yellow, и не red, а ${color}`);
}

switch (color) {

case "yellow": // или yellow

case "red": // или red

console.log(`Color is yellow or red`);

break;

default:

console.log(`Color не yellow, и не red, а ${color}`);

}

Основные отличия switch...case от if...else:

switch...case обычно более компактен, чем множество вложенных if...else , и поэтому более удобочитаем;
switch...case может быть оптимизирован компилятором с помощью таблицы переходов, что повышает быстродействие (switch отправляет сразу же в соответствующий case , вместо того чтобы оценивать все условия, которые потребовались бы в цепочке if...else ).

Оператор условного присваивания ??=

Оператор условного присваивания a ??= b передает в переменную a значение переменной b, только если значение a равно undefined или null:

let num1 = null;
let num2 = 10;

num1 ??= num2;

console.log(num1); // 10
// Строку 4 можно заменить равнозначным кодом:
// a ?? (a = b)

let num1 = null;

let num2 = 10;

num1 ??= num2;

console.log(num1); // 10

// Строку 4 можно заменить равнозначным кодом:

// a ?? (a = b)

Условные операторы в JavaScript (if...else, switch...case)

Условный оператор if

Условный (тернарный) оператор "?"

Условный оператор if ... else

Проверка наличия значения выражения:

Проверка массива на наличие значений:

Использование логических операторов или ( || ), и ( && ), не ( ! ):

Проверка объекта на тип "массив":

Использование else if ()

Особенности присваивания в условном выражении

Инструкция (условный оператор) switch...case

"Склеенные" case

Основные отличия switch...case от if...else:

Оператор условного присваивания ??=

Добавить комментарий Отменить ответ