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の終わりまで)。 - マッチするケースが無い場合は、
defaultコードが実行されます(存在する場合)
例
switch の例です(実行されるコードはハイライトされています)
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 である 3 から 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 = 2 + 2;
switch (a) {
case 4:
alert('Right!');
break;
case 3: // (*) 2つのケースをグループ化
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…)。