switch文は、複数のifチェックを置き換えることができます。
値を複数のバリアントと比較する、より記述的な方法を提供します。
構文
switchには、1つ以上のcaseブロックと、オプションのdefaultがあります。
次のように見えます。
switch(x) {
case 'value1': // if (x === 'value1')
...
[break]
case 'value2': // if (x === 'value2')
...
[break]
default:
...
[break]
}xの値は、最初のcase（つまり、value1）からの値、次に2番目（value2）などに対して、厳密な等価性がチェックされます。- 等価が見つかった場合、
switchは対応するcaseから始まり、最も近いbreakまで（またはswitchの最後まで）、コードの実行を開始します。 - どのcaseにも一致しない場合は、
defaultコードが実行されます（存在する場合）。
例
switchの例（実行されるコードは強調表示されています）
let a = 2 + 2;
switch (a) {
case 3:
alert( 'Too small' );
break;
case 4:
alert( 'Exactly!' );
break;
case 5:
alert( 'Too big' );
break;
default:
alert( "I don't know such values" );
}ここでは、switchは、3である最初のcaseバリアントからaの比較を開始します。一致しません。
次に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" );
}上記の例では、3つの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バリアントをグループ化できます。
例えば、case 3とcase 5で同じコードを実行したい場合
let a = 3;
switch (a) {
case 4:
alert('Right!');
break;
case 3: // (*) grouped two cases
case 5:
alert('Wrong!');
alert("Why don't you take a math class?");
break;
default:
alert('The result is strange. Really.');
}これで、3と5の両方で同じメッセージが表示されます。
ケースを「グループ化」できるのは、breakがない場合のswitch/caseの動作方法による副作用です。ここでは、case 3の実行は(*)行から始まり、breakがないため、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' );
}0、1の場合、最初のalertが実行されます。2の場合、2番目のalertが実行されます。- しかし、
3の場合、promptの結果は文字列"3"であり、数値3と厳密に等しくありません（===）。そのため、case 3にはデッドコードがあります！defaultバリアントが実行されます。
コメント
<code>タグを使用し、複数行の場合は<pre>タグで囲み、10行以上の場合にはサンドボックス（plnkr、jsbin、codepen…）を使用してください。