Подробное введение в оператор JavaScript «switch»

внешний интерфейс JavaScript

заявление о «переключении»

switchЗаявления могут заменить несколькоifсудить.

switchЗаявления обеспечивают более описательный способ для случая многоветвевого выбора.

грамматика

switchутверждение имеет хотя бы одинcaseблок кода и необязательныйdefaultкодовый блок.

так:

switch(x) {
  case 'value1':  // if (x === 'value1')
    ...
    [break]

  case 'value2':  // if (x === 'value2')
    ...
    [break]

  default:
    ...
    [break]
}
  • Сравниватьxзначение с первымcase(то есть,value1) строго равны, то сравните вторыеcase(value2) и так далее.
  • Если равны,switchоператор выполняется соответственноcaseблоки кода ниже до ближайшегоbreakзаявление (или доswitchконец заявления).
  • Если нет подходящего случая, выполнитеdefaultкодовый блок (еслиdefaultсуществует).

Например

switchпример (выполнитьcase 4часть):

let a = 2 + 2;

switch (a) {
  case 3:
    alert( 'Too small' );
    break;
  case 4:
    alert( 'Exactly!' );
    break;
  case 5:
    alert( 'Too large' );
    break;
  default:
    alert( "I don't know such values" );
}

здесьswitchот первойcaseфилиал начнетсяaзначение сcaseПосле сравнения значений первыйcaseЗначение после3Матч не удался.

затем сравните4. совпадает, поэтому изcase 4Начать выполнение до ближайшегоbreak.

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

безbreakпример:

let a = 2 + 2;

switch (a) {
  case 3:
    alert( 'Too small' );
  case 4:
    alert( 'Exactly!' );
  case 5:
    alert( 'Too big' );
  default:
    alert( "I don't know such values" );
}

В приведенном выше примере мы увидим три последовательных выполненияalert:

alert( 'Exactly!' );
alert( 'Too big' );
alert( "I don't know such values" );

Любое выражение может статьswitch/caseпараметры

switchа такжеcaseОба допускают произвольные выражения.

Например:

let a = "1";
let b = 0;

switch (+a) {
  case b + 1:
    alert("this runs, because +a is 1, exactly equals b+1");
    break;

  default:
    alert("this doesn't run");
}

здесь+aвернуть1, это значение совпадает сcaseсерединаb + 1Сравните и выполните соответствующий код.

группировка "кейс"

Несколько, которые используют один и тот же фрагмент кодаcaseВетви можно сгруппировать в группы:

Например, если мы хотимcase 3а такжеcase 5Выполните тот же код:

let a = 2 + 2;

switch (a) {
  case 4:
    alert('Right!');
    break;

  case 3: // (*) 下面这两个 case 被分在一组
  case 5:
    alert('Wrong!');
    alert("Why don't you take a math class?");
    break;

  default:
    alert('The result is strange. Really.');
}

Сейчас3а также5Все отображают ту же информацию.

switch/caseЕсть возможность "группировать" по регистру, на самом деле оператор switch этого не делает.breakпобочные эффекты. потому что безbreak,case 3будет от(*)строка выполняется доcase 5.

тип имеет значение

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

Например, давайте посмотрим на следующий код:

let arg = prompt("Enter a value?")
switch (arg) {
  case '0':
  case '1':
    alert( 'One or zero' );
    break;

  case '2':
    alert( 'Two' );
    break;

  case 3:
    alert( 'Never executes!' );
    break;
  default:
    alert( 'An unknown value' )
}
  1. существуетpromptдиалоговый ввод0,1,Первыйalertвыскакивать.
  2. войти2,второйalertвыскакивать.
  3. но введите3,потому чтоpromptРезультат имеет тип string"3", не строго равно===для числовых типов3,такcase 3не будет выполняться! следовательноcase 3часть является частью недопустимого кода. так будет выполнятьdefaultветвь.

домашние вопросы

Сначала задайте вопрос, а потом смотрите ответ.

1. Переманите структуру «переключатель» как «если» структура

Важность: ⭐️⭐️⭐️⭐️⭐️

Напишите код для следующей конструкции «переключатель» какif..elseструктура:

switch (browser) {
  case 'Edge':
    alert( "You've got the Edge!" );
    break;

  case 'Chrome':
  case 'Firefox':
  case 'Safari':
  case 'Opera':
    alert( 'Okay we support these browsers too' );
    break;

  default:
    alert( 'We hope that this page looks ok!' );
}

2. Перепишите конструкцию «если» в конструкцию «переключатель».

Важность: ⭐️⭐️⭐️⭐

использоватьswitchПерепишите следующий код:

let a = +prompt('a?', '');

if (a == 0) {
  alert( 0 );
}
if (a == 1) {
  alert( 1 );
}

if (a == 2 || a == 3) {
  alert( '2,3' );
}

Отвечать:

Ответ на фоне публичного аккаунта WeChat «Технический разговор»1-2-13Получите ответ на этот вопрос.

Учебники по современному JavaScript: учебные пособия по современному JavaScript с открытым исходным кодом, от начального до продвинутого.Рекомендовано официальной документацией React, учебным пособием по JavaScript вместе с MDN..

Читайте онлайн бесплатно:zh.javascript.info

Отсканируйте приведенный ниже QR-код, подпишитесь на общедоступную учетную запись WeChat «Technology Talk» и подпишитесь на более интересный контент.

Категории