ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

「スイッチ」ステートメント

著者：Eve Cole 更新時間：2025-01-08 13:36:13

switchステートメントは複数のifチェックを置き換えることができます。

これにより、値を複数のバリアントと比較するためのより説明的な方法が得られます。

構文

switch 1 つ以上のcaseブロックとオプションのデフォルトがあります。

次のようになります。

スイッチ(x) {
  case 'value1': // if (x === 'value1')
    ...
    [壊す]

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

  デフォルト：
    ...
    [壊す]
}

  • xの値は、最初のcaseの値 (つまり、 value1 )、次に 2 番目のケース ( value2 ) と厳密に等しいかどうかがチェックされます。

  • 等しいことが見つかった場合、 switch対応するcaseから始まり、最も近いbreakまで (またはswitchの終わりまで) コードの実行を開始します。

  • 大文字と小文字が一致しない場合は、 defaultコードが実行されます (存在する場合)。

例

switchの例 (実行されたコードが強調表示されます):

 a = 2 + 2 とします。

スイッチ (a) {
  ケース 3:
    alert( '小さすぎる' );
    壊す;
  ケース4:
    alert( 'その通り!' );
    壊す;
  ケース5:
    alert( '大きすぎます' );
    壊す;
  デフォルト：
    alert( "そのような値はわかりません" );
}

ここで、 switch 3のcaseバリアントであるaからの比較を開始します。試合は失敗します。

次に4 。これは一致するため、実行はcase 4から最も近いbreakまで開始されます。

breakがない場合、実行はチェックなしで次のcaseに進みます。

breakなしの例:

 a = 2 + 2 とします。

スイッチ (a) {
  ケース 3:
    alert( '小さすぎる' );
  ケース4:
    alert( 'その通り!' );
  ケース5:
    alert( '大きすぎます' );
  デフォルト：
    alert( "そのような値はわかりません" );
}

上の例では、3 つのalertが連続して実行されることがわかります。

 alert( 'その通り!' );
alert( '大きすぎます' );
alert( "そのような値はわかりません" );

任意の式をswitch/case引数にすることができます

switchとcase両方で任意の式を使用できます。

例えば：

 a = "1" とします。
b = 0 とします。

スイッチ (+a) {
  ケース b + 1:
    alert("+a は 1 であり、b+1 と正確に等しいため、これは実行されます");
    壊す;

  デフォルト：
    alert("これは実行されません");
}

ここで+a 1返し、それがcaseのb + 1と比較され、対応するコードが実行されます。

「場合」のグループ化

同じコードを共有するcaseのいくつかのバリエーションをグループ化できます。

たとえば、 case 3とcase 5で同じコードを実行したい場合:

 a = 3 とします。

スイッチ (a) {
  ケース4:
    アラート('そうです!');
    壊す;

  case 3: // (*) 2 つのケースをグループ化
  ケース5:
    アラート('間違っています!');
    alert("数学の授業を受けてみませんか?");
    壊す;

  デフォルト：
    alert('結果は奇妙です。本当に。');
}

3と5両方に同じメッセージが表示されます。

ケースを「グループ化」する機能は、 switch/case breakなしでどのように動作するかの副作用です。ここでは、 breakがないため、 case 3の実行は行(*)から開始され、 case 5を通過します。

タイプが重要

均等性チェックは常に厳密であることを強調しましょう。値を一致させるには、同じ型である必要があります。

たとえば、次のコードを考えてみましょう。

 let arg = プロンプト("値を入力しますか?");
スイッチ (引数) {
  ケース「0」:
  ケース「1」:
    alert( '1 または 0' );
    壊す;

  ケース「2」:
    アラート( '2' );
    壊す;

  ケース 3:
    alert( '決して実行されません!' );
    壊す;
  デフォルト：
    alert( '不明な値' );
}

  1. 0 、 1の場合、最初のalertが実行されます。

  2. 2の場合、2 番目のalertが実行されます。

  3. しかし、 3の場合、 promptの結果は文字列"3"であり、厳密には===数値3と等しくありません。つまり、 case 3にはデッドコードが存在します。 defaultバリアントが実行されます。

タスク

「スイッチ」を「if」に書き換えます。

重要度: 5

if..else使用して、次のswitchに対応するコードを作成します。

スイッチ (ブラウザ) {
  ケース「エッジ」:
    alert( "エッジを持っています!" );
    壊す;

  ケース「クロム」:
  「Firefox」の場合:
  ケース「サファリ」:
  ケース「オペラ」:
    alert( 'これらのブラウザもサポートしています' );
    壊す;

  デフォルト：
    alert( 'このページが正常に表示されることを願っています!' );
}

switchの機能と正確に一致させるには、 if厳密な比較'==='を使用する必要があります。

ただし、特定の文字列の場合は、単純な'=='も機能します。

 if(ブラウザ == 'エッジ') {
  alert("あなたはエッジを持っています!");
} else if (ブラウザ == 'Chrome'
 ||ブラウザ == 'Firefox'
 ||ブラウザ == 'Safari'
 ||ブラウザ == 'Opera') {
  alert( 'これらのブラウザもサポートしています' );
} それ以外 {
  alert( 'このページが正常に表示されることを願っています!' );
}

注意してください: 構築browser == 'Chrome' || browser == 'Firefox' …読みやすくするために複数の行に分割されています。

ただし、 switch構造は依然としてすっきりしていて、より説明的です。

「if」を「switch」に書き換えます

重要度: 4

単一のswitchステートメントを使用して、以下のコードを書き換えます。

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

if (a == 0) {
  アラート( 0 );
}
if (a == 1) {
  アラート(1);
}

if (a == 2 || a == 3) {
  アラート( '2,3' );
}

最初の 2 つのチェックは 2 つのcaseに変わります。 3 番目のチェックは 2 つのケースに分割されます。

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

スイッチ (a) {
  ケース0:
    アラート( 0 );
    壊す;

  ケース1:
    アラート(1);
    壊す;

  ケース 2:
  ケース 3:
    アラート( '2,3' );
    壊す;
}

注意: 下部のbreakは必要ありません。しかし、私たちはコードを将来も保証するためにこれを入れました。

将来的には、 case 4など、もう 1 つcaseを追加する可能性があります。そして、その前、 case 3の最後にブレークを追加するのを忘れた場合、エラーが発生します。つまり、一種の自己保険です。

関連記事