switch

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

Попробуйте

const expr = "Papayas";
switch (expr) {
  case "Oranges":
    console.log("Oranges are $0.59 a pound.");
    break;
  case "Mangoes":
  case "Papayas":
    console.log("Mangoes and papayas are $2.79 a pound.");
    // Expected output: "Mangoes and papayas are $2.79 a pound."
    break;
  default:
    console.log(`Sorry, we are out of ${expr}.`);
}

Синтаксис

switch (expression) {
  case caseExpression1:
    statements
  case caseExpression2:
    statements
  // …
  case caseExpressionN:
    statements
  default:
    statements
}

expression

Выражение, результат которого сравнивается с каждым case.

caseExpressionN Необязательный

case для сопоставления с expression. Если значение expression совпадает со значением любого caseExpressionN, выполнение начинается с первого оператора после этого case до конца оператора switch или до первого встреченного break.

default Необязательный

default; если предоставлен, этот блок выполняется, если значение expression не совпадает ни с одним из case. Оператор switch может иметь только один default.

Описание

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

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

switch (undefined) {
  case console.log(1):
  case console.log(2):
}
// Only logs 1

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

Прерывание и проброс

Вы можете использовать оператор break внутри тела оператора switch, чтобы досрочно выйти, часто когда все операторы между двумя case выполнены. Выполнение продолжится с первого оператора после switch.

Если break опущен, выполнение перейдет к следующему case, даже к default, независимо от того, совпадает ли значение выражения этого блока. Такое поведение называется "пробросом".

const foo = 0;
switch (foo) {
  case -1:
    console.log("negative 1");
    break;
  case 0: // Value of foo matches this criteria; execution starts from here
    console.log(0);
  // Forgotten break! Execution falls through
  case 1: // no break statement in 'case 0:' so this case will run as well
    console.log(1);
    break; // Break encountered; will not continue into 'case 2:'
  case 2:
    console.log(2);
    break;
  default:
    console.log("default");
}
// Logs 0 and 1

В соответствующем контексте другие операторы управления потоком также имеют эффект выхода из оператора switch. Например, если оператор switch содержится в функции, то оператор return прекращает выполнение тела функции и, следовательно, оператора switch. Если оператор switch содержится в цикле, то оператор continue останавливает оператор switch и переходит к следующей итерации цикла.

Лексическая область видимости

case и default подобны меткам: они указывают возможные места, куда может перейти управление потоком. Однако они сами по себе не создают лексических областей видимости (и не выходят из них автоматически — как показано выше). Например:

const action = "say_hello";
switch (action) {
  case "say_hello":
    const message = "hello";
    console.log(message);
    break;
  case "say_hi":
    const message = "hi";
    console.log(message);
    break;
  default:
    console.log("Empty action received.");
}

Этот пример выведет ошибку "Uncaught SyntaxError: Identifier 'message' has already been declared" (Незаявленная ошибка синтаксиса: идентификатор 'message' уже объявлен), потому что первое const message = 'hello'; конфликтует со вторым объявлением const message = 'hi';, даже когда они находятся в своих собственных отдельных блоках case. В конечном счете, это связано с тем, что оба объявления const находятся в одной блочной области видимости, созданной телом switch.

Чтобы исправить это, всякий раз, когда вам нужно использовать объявления let или const в блоке case, заключите их в блок.

const action = "say_hello";
switch (action) {
  case "say_hello": {
    const message = "hello";
    console.log(message);
    break;
  }
  case "say_hi": {
    const message = "hi";
    console.log(message);
    break;
  }
  default: {
    console.log("Empty action received.");
  }
}

Этот код теперь выведет hello в консоль, как и ожидалось, без ошибок.

Примеры

Использование switch

В следующем примере, если expr вычисляется до Bananas, программа сопоставляет значение с case case 'Bananas' и выполняет связанный оператор. Когда встречается break, программа выходит из switch и выполняет оператор после switch. Если бы break был опущен, был бы также выполнен оператор для case 'Cherries'.

switch (expr) {
  case "Oranges":
    console.log("Oranges are $0.59 a pound.");
    break;
  case "Apples":
    console.log("Apples are $0.32 a pound.");
    break;
  case "Bananas":
    console.log("Bananas are $0.48 a pound.");
    break;
  case "Cherries":
    console.log("Cherries are $3.00 a pound.");
    break;
  case "Mangoes":
  case "Papayas":
    console.log("Mangoes and papayas are $2.79 a pound.");
    break;
  default:
    console.log(`Sorry, we are out of ${expr}.`);
}

console.log("Is there anything else you'd like?");

Размещение блока default между двумя блоками case

Если совпадение не найдено, выполнение начнется с блока default, и все операторы после него будут выполнены.

const foo = 5;
switch (foo) {
  case 2:
    console.log(2);
    break; // it encounters this break so will not continue into 'default:'
  default:
    console.log("default");
  // fall-through
  case 1:
    console.log("1");
}

Это также работает, когда вы помещаете default перед всеми другими case.

Использование проброса

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

Ниже приведен пример оператора case с последовательным выполнением одной операции, где четыре разных значения выполняют одно и то же.

const Animal = "Giraffe";
switch (Animal) {
  case "Cow":
  case "Giraffe":
  case "Dog":
  case "Pig":
    console.log("This animal is not extinct.");
    break;
  case "Dinosaur":
  default:
    console.log("This animal is extinct.");
}

Ниже приведен пример оператора case с последовательным выполнением нескольких операций, где в зависимости от предоставленного целого числа можно получить разный вывод. Это показывает, что он будет проходить в том порядке, в котором вы размещаете блоки case, и они не обязательно должны быть численно последовательными. В JavaScript вы можете даже смешивать определения строк в этих операторах case.

const foo = 1;
let output = "Output: ";
switch (foo) {
  case 0:
    output += "So ";
  case 1:
    output += "What ";
    output += "Is ";
  case 2:
    output += "Your ";
  case 3:
    output += "Name";
  case 4:
    output += "?";
    console.log(output);
    break;
  case 5:
    output += "!";
    console.log(output);
    break;
  default:
    console.log("Please pick a number from 0 to 5!");
}

Вывод из этого примера:

Альтернатива цепочкам if...else

Вы часто можете найти себя делающими серию if...else.

if ("fetch" in globalThis) {
  // Fetch a resource with fetch
} else if ("XMLHttpRequest" in globalThis) {
  // Fetch a resource with XMLHttpRequest
} else {
  // Fetch a resource with some custom AJAX logic
}

Этот шаблон не делает последовательность сравнений ===, но вы все равно можете преобразовать его в конструкцию switch.

switch (true) {
  case "fetch" in globalThis:
    // Fetch a resource with fetch
    break;
  case "XMLHttpRequest" in globalThis:
    // Fetch a resource with XMLHttpRequest
    break;
  default:
    // Fetch a resource with some custom AJAX logic
    break;
}

Шаблон switch (true) как альтернатива if...else особенно полезен, если вы хотите использовать поведение проброса.

switch (true) {
  case isSquare(shape):
    console.log("This shape is a square.");
  // Fall-through, since a square is a rectangle as well!
  case isRectangle(shape):
    console.log("This shape is a rectangle.");
  case isQuadrilateral(shape):
    console.log("This shape is a quadrilateral.");
    break;
  case isCircle(shape):
    console.log("This shape is a circle.");
    break;
}

Спецификации

Совместимость с браузерами

См. также

• if...else