JavaScript с нуля

Сходство с инструкцией if…else

Мы видели, что инструкция switch используется для вычисления условий — так же, как и инструкция if…else, на которую мы потратили уйму времени. Учитывая такой финт, давайте изучим этот момент подробнее и рассмотрим, как будет выглядеть инструкция if, если мы буквально переведем ее в инструкцию switch.

Допустим, есть такая инструкция if:

let number = 20;

if (number > 10) {

alert("yes");

} else {

alert("nope");

}

Так как переменная number имеет значение 20, инструкция if будет вычисляться как true. Выглядит достаточно просто. А теперь преобразуем ее в инструкцию switch:

switch (number > 10) {

case true:

alert("yes");

break;

case false:

alert("nope");

break;

}

Обратите внимание, что наше выражение — это number > 10. Значение case для блоков case установлено как true или false. Поскольку number>10 вычисляется как true, выполняется код внутри блока true. Несмотря на то что выражение в этом случае не было таким же простым, как считывание значения цвета из переменной в предыдущем разделе, на наш взгляд, принцип работы инструкции switch не изменился. Выражения могут быть настолько сложными, насколько вы пожелаете. Если они вычисляются во что-то, что может быть сопоставлено со значением блока case, тогда все в шоколаде.

Далее предлагаю рассмотреть чуть более сложный пример. Преобразуем уже рассмотренную инструкцию switch с переменной color в эквивалентные ей инструкции if…else. Первоначальная версия этой инструкции выглядит так:

let color = "green";

switch (color) {

case "yellow":

alert("yellow color");

break;

case "red":

alert("red color");

break;

case "blue":

alert("blue color");

break;

case "green":

alert("green color");

break;

case "black":

alert("black color");

break;

default:

alert("no color specified");

break;

}

Если преобразовать ее в череду инструкций if…else, она станет выглядеть так:

let color = "green";

if (color == "yellow") {

alert("yellow color");

} else if (color == "red") {

alert("red color");

} else if (color == "blue") {

alert("blue color");

} else if (color == "green") {

alert("green color");

} else if (color == "black") {

alert("black color");

} else {

alert("no color specified";

}

Как мы видим, инструкции if…else очень схожи с инструкциями switch, и наоборот. Блок default в этом случае становится блоком else, а связь между выражением и значением case инструкции switch объединена в условии if…else инструкции if…else.