JavaScript с нуля - [10]
break;
case value3:
statement;
break;
default:
statement;
break;
}
Всегда нужно помнить, что инструкция switch — это условная инструкция, проверяющая, является что-либоtrue или false, и не более того. Это что-либо, в свою очередь, является вариацией того, является ли результат вычисления выражения равным значению case. Чтобы прояснить этот момент, рассмотрим более подходящий пример:
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 known color specified");
break;
}
Здесь у нас есть переменная color, которой задано значение green:
let color = "green";
Мы также определяем переменную color в качестве выражения в инструкции switch:
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 known color specified");
break;
}
Инструкция switch содержит коллекцию блоков case (случаев). При выполнении кода лишь один из этих блоков станет избранным. Выбор конкретного блока происходит путем сопоставления значения блока case с результатом вычисления выражения. В нашем случае, так как выражение вычисляется со значением green, будет выполнен код внутри блока case с тем же значением 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 known color specified");
break;
}
Обратите внимание, что выполняется код, содержащийся только внутри блока case green. Так происходит благодаря ключевому слову break в конце этого блока. Когда выполнение кода достигает break, происходит выход из всего блока switch и код продолжает свое выполнение с участка, расположенного ниже. Если вы не указали ключевое слово break, то код продолжит выполняться внутри блока case green. Разница в том, что затем произойдет переход к следующему блоку case (в нашем примере black) и выполнению его кода. Таким же образом будут выполнены все последующие блоки case, если на пути не попадется другое ключевое слово break.
Таким образом, если вы запустите приведенный выше код, то увидите окно уведомления, как на рис. 4.6.
Рис. 4.6. Окно уведомления
Вы можете менять значение переменной color на другие допустимые значения, чтобы посмотреть, как выполняются другие блоки case. В некоторых случаях ни одно их значений блоков case не будет совпадать с результатом вычисления выражения. В таких ситуациях инструкция switch просто ничего не будет делать. Если вы захотите определить для нее поведение по умолчанию, добавьте блок default:
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 known color specified");
break;
}
Обратите внимание, что блок default выглядит немного иначе, чем другие инструкции case. Фактически в нем просто отсутствует слово case.
Сходство с инструкцией 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, она станет выглядеть так:
