の JavaScriptのswitch文 式を評価し、一致するケースに基づいてコードのブロックを実行します。これは長い if-else チェーンの代替手段を提供し、特に複数の条件付き分岐を処理する場合の可読性と保守性を向上させます。

目次

• Switch ステートメントの構文
• Switch ステートメントの仕組み
• Switch文のフローチャート
• 共通のコードブロック

Switch ステートメントの構文

switch (expression) {  case value1:  // code block 1;  break;  case value2:  // code block 2;  break;  ...  default:  // default code block; } 

• Expression> は比較したい値です。
• Case value1> 、 case value2> 、などは、の可能な値を表します。 expression> 。
• break> ステートメントは終了します switch> 声明。これがないと、実行は次のケースに継続されます。
• Default> どのケースも一致しない場合に実行するコードを指定します。 expression> 。

Switch ステートメントの仕組み

• 評価 : 内の式 switch> ステートメントは 1 回評価されます。
• 比較 : 式の値をそれぞれと比較します。 case> ラベル (厳密な等価性を使用) ===> ）。
• 実行 : 一致が見つかった場合、一致に続く対応するコード ブロック case> ラベルが実行されます。一致するものが見つからない場合、実行は次の場所にジャンプします。 default> case (存在する場合) または、次のステートメントに続きます。 switch> ブロック。
• ブレークステートメント : コード ブロックの実行後、 break> ステートメントは終了します switch> ステートメントを作成し、後続のケースで実行が失敗するのを防ぎます。もし break> が省略された場合、実行は次のケースに続行されます (フォールスルーと呼ばれます)。
• デフォルトのケース : の default> ケースはオプションです。一致するものが見つからない場合は、以下のコード ブロックが default> が実行されます。

Switch文のフローチャート

Switch ステートメントの例:

ここでは3日目の曜日名を印刷します。

let day = 3; let dayName; switch (day) {  case 1:  dayName = 'Monday';  break;  case 2:  dayName = 'Tuesday';  break;  case 3:  dayName = 'Wednesday';  break;  case 4:  dayName = 'Thursday';  break;  case 5:  dayName = 'Friday';  break;  case 6:  dayName = 'Saturday';  break;  case 7:  dayName = 'Sunday';  break;  default:  dayName = 'Invalid day'; } console.log(dayName); // Output: Wednesday 

Wednesday 

説明：

• Day> に設定されています 3> 。
• の switch> ステートメントが評価する day> 。
• 以来 day> は 3> 、 case 3> ブロックが実行され、割り当てが行われます 'Wednesday'> に dayName> 。
• の break> ステートメントは終了します switch> ステートメントを削除し、他のケースへの実行の続行を妨げます。

Switch ステートメントの例:

ここではスイッチケースを使ってグレードを確認してみます。

let grade = 'B'; let result; switch (grade) {  case 'A':  result = 'A (Excellent)';  break;  case 'B':  result = 'B (Average)';  break;  case 'C':  result = 'C (Below than average)';  break;  default:  result = 'No Grade'; } console.log(result); 

B (Average) 

説明：

• Grade> 値が割り当てられます 'B'> 。
• の switch> ステートメントは次の値を評価します grade> 。
• 以来 grade> は 'B'> 、次のコードブロック case 'B':> が実行されます。
• の result> 変数には文字列が割り当てられます 'B (Average)'> 。
• の break> ステートメントは終了します switch> 声明。
• result> コンソールに記録され、次のように出力されます。 'B (Average)'> 。

キーワードを破る

の break> キーワードは、ループまたは switch> 声明。

デフォルトのキーワード

の default> キーワードは内で​​使用されています switch> ステートメントをフォールバック オプションとして使用することはできません。 case> 式は評価される値と一致します。と同様に動作します。 else> での声明 if...else> チェーンを使用して、他の特定のケースが一致しない場合に実行するデフォルトのアクションを提供します。

デフォルトケースの位置は関係ありません。

デフォルトのケースは、その配置に関係なく、他のケース条件がいずれも満たされない場合にのみ実行されます。したがって、これを先頭、中間、または最後に配置しても、コアのロジックは変わりません (フォールスルーと呼ばれるあまり一般的ではない手法を使用している場合を除く)。

デフォルトのケースを出力します。

let day = 8; let dayName; switch (day) {  default:  dayName = 'Invalid day';  break;  case 1:  dayName = 'Monday';  break;  case 2:  dayName = 'Tuesday';  break;  case 3:  dayName = 'Wednesday';  break;  case 4:  dayName = 'Thursday';  break;  case 5:  dayName = 'Friday';  break;  case 6:  dayName = 'Saturday';  break;  case 7:  dayName = 'Sunday';  break;   } console.log(dayName); 

Invalid day 

共通のコードブロック

場合によっては、複数の切り替えケースに同じコードを使用する必要があります。その方法の例を見てみましょう。

共通のコードブロック 例：

ここでは、2 つの異なるスイッチの場合に同じコード ブロックを使用します。

let grade = 'A' let result; switch (grade) {  case 'A':  result = 'Grade is excellent'  break;  case 'B':  result = 'Grade is good'  break;  case 'C':  result = 'Grade is Average '  break;  case 'D':  result = 'Grade is Poor'  break;  default:  text = 'NO grades achieved'; } console.log(result) 

Grade is excellent 

説明：

• Grade> 値が割り当てられます 'A'> 。
• の switch> ステートメントは次の値を評価します grade> 。
• 以来 grade> マッチ 'A'> 、次のコードブロック case 'A':> 実行、設定 result> に 'Grade is excellent'> 。
• の break> ステートメントは終了します switch> 声明。
• Result> コンソールに記録され、次のように出力されます。 'Grade is excellent'> 。

注記： 複数のスイッチ ケースが値と一致する場合、最初のスイッチ ケースが実行されます。