Оператор переключения JavaScript

Оглавление

    Показать оглавление

Оператор switch используется для выполнения различных действий в зависимости от разных условий.

Оператор switch JavaScript

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

Синтаксис

switch(expression) {
  case x:
     // code block
        break;
  case y:
     // code block
     break;
  default:
      // code block
 }

Вот как это работает:

  • Выражение переключения оценивается один раз.

  • Значение выражения сравнивается со значениями каждого случая.

  • Если совпадение есть, соответствующий блок кода выполняется.

  • Если совпадений нет, выполняется блок кода по умолчанию.

Пример

Метод getDay() возвращает день недели в виде числа между 0 и 6.

(Воскресенье=0, Понедельник=1, Вторник=2 ..)

В этом примере номер дня недели используется для вычисления названия дня недели:

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
      day = "Monday";
     break;
  case 2:
       day = "Tuesday";
      break;
  case 3:
    day = "Wednesday";
      break;
  case 4:
      day = "Thursday";
     break;
  case 5:
      day = "Friday";
      break;
  case 6:
    day = "Saturday";
}

Итогом дня будет:

<script> let d=new Date().getDay(); switch (d) { case 0: x="Sunday"; break; case 1: x="Monday"; break; case 2: x="Tuesday"; break; case 3: x="Wednesday"; break; case 4: x="Thursday"; break; case 5: x="Friday"; break; case 6: x="Saturday"; break; } document.write(x);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let day;
switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
    day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case  6:
    day = "Saturday";
}
document.getElementById("demo").innerHTML = "Today is " + day;
</script>

</body>
</html>

Ключевое слово break

Когда JavaScript достигает разрыва ключевое слово, он вырывается из блока переключателей.

Это остановит выполнение внутри блока переключателей.

Последний корпус в блоке переключателей ломать не нужно. Блок все равно там ломается (заканчивается).

Примечание. Если вы опустите оператор Break, следующий случай будет выполнен, даже если оценка не соответствует делу.

Ключевое слово default

Ключевое слово default указывает код, который будет выполняться, если нет совпадение с регистром:

Пример

Метод getDay() возвращает день недели в виде числа между 0 и 6.

Если сегодня не суббота (6) и не воскресенье (0), напишите сообщение по умолчанию:

switch (new Date().getDay()) {
   
case 6:
      text = "Today is Saturday";
    break; 
  case 0:
      text = "Today is Sunday";
      break; 
   
default: 
      text = "Looking forward to the Weekend";
}

Результатом текста будет:

<script> switch (new Date().getDay()) { case 6: x= "Today is Saturday"; break; case 0: x = "Today is Sunday"; break; default: x = "Looking forward to the Weekend"; } document.write(x);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let text;
switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
    break;
  default:
    text = "Looking forward to the Weekend";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Регистр default не обязательно должен быть последним в переключателе. блокировать:

Пример

switch (new Date().getDay()) {
  default: 
        text = "Looking forward to the Weekend";
    
  break;
  case 6:
        text = "Today is Saturday";
        break; 
  case 0:
        text = "Today is Sunday";
  }

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let text;
switch (new Date().getDay()) {
  default:
    text = "Looking forward to the Weekend";
    break;
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

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

Общие блоки кода

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

В этом примере 4 и 5 используют один и тот же блок кода, а 0 и 6 — общий. еще один блок кода:

Пример

switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
      break; 
  case 0:
  case 6:
      text = "It is Weekend";
    break;
  default: 
    text = "Looking forward to the Weekend";
  }

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let text;
switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
    break;
  case 0:
  case 6:
    text = "It is Weekend";
    break;
  default:
    text = "Looking forward to the Weekend";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Детали переключения

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

Если соответствующие случаи не найдены, программа переходит к метке default.

Если метка по умолчанию не найдена, программа переходит к инструкциям после переключения.

Строгое сравнение

В случаях переключения используется строгое сравнение (===).

Для соответствия значения должны быть одного типа.

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

В этом примере не будет совпадения для x:

Пример

 let x = "0";
switch (x) {
  case 0:
    text = "Off";
      break;
  case 1:
    text = "On";
    break;
    default:
    
  text = "No value found";
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript switch</h2>

<p id="demo"></p>

<script>
let x = "0";

switch (x) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>