JavaScriptのSwitch文の使い方を詳しく解説

if...else に加えて、JavaScript には switch ステートメントと呼ばれる機能もあります。 switch は、考えられるさまざまな状況に対して式を評価し、一致する状況に応じて 1 つ以上のコード ブロックを実行する条件付きステートメントです。 switch ステートメントは、他の多くの if ブロックを含む条件ステートメントと密接に関連しており、多くの場合、同じ意味で使用されます。

このチュートリアルでは、switch ステートメントの使用方法と、関連キーワード case、break、default の使用方法を学習します。最後に、switch ステートメントで複数のケースを使用する方法について説明します。

[関連コースの推奨事項: JavaScript ビデオ チュートリアル ]

Switch

switch ステートメントの計算式式を入力し、大文字と小文字が一致した結果としてコードを実行します。最初は少し怖く思えるかもしれませんが、基本的な構文は if ステートメントに似ています。これは常に switch(){} を使用して記述されます。括弧にはテスト対象の式が含まれ、中括弧には実行される基礎となるコードが含まれます。

次は、2 つの case ステートメントと、default と呼ばれるフォールバックを含む switch ステートメントの例です。

switch (expression) {
    case x:        
    // execute case x code block
        break;    
     case y:
     // execute case y code block
        break;   
      default:        
      // execute default code block
      }

上記のコード ブロックのロジックに従うと、発生する一連のイベントは次のとおりです。

式が評価されます

最初のケースでは、x がテストされますという表現に反して。一致するものがあれば、コードが実行され、break キーワードによって switch ブロックが終了します。

一致しない場合、x はスキップされ、y が式のケースに対してテストされます。 y が式と一致する場合、コードが実行され、switch ブロックを終了します。

すべての条件が一致しない場合は、デフォルトのコード ブロックが実行されます。

上記の構文に従って switch ステートメントの実例を作成してみましょう。このコード ブロックでは、new Date() メソッドを使用して現在の曜日を検索し、getDay() を使用して現在の日に対応する数値を出力します。 1 は月曜日を表し、7 は日曜日を表します。まずは変数の設定から始めます。

const day = new Date().getDay();

switch を使用して、曜日ごとにコンソールにメッセージを送信します。プログラムは上から下の順に実行され、一致するものが見つかると、break コマンドによって switch ブロックが停止され、ステートメントの評価が続行されます。

week.js

// Set the current day of the week to a variable, with 1 being Monday and 7 being Sunday
const day = new Date().getDay();
switch (day) {
    case 1:
        console.log("Happy Monday!");        
        break;    
    case 2:
        console.log("It's Tuesday. You got this!");        
        break;    
    case 3:
        console.log("Hump day already!");        
        break;    
    case 4:
        console.log("Just one more day 'til the weekend!");        
        break;    
     case 5:
        console.log("Happy Friday!");        
        break;    
      case 6:
        console.log("Have a wonderful Saturday!");        
        break;    
      case 7:
        console.log("It's Sunday, time to relax!");        
        break;    
      default:
        console.log("Something went horribly wrong...");
}

Output
'Just one more day 'til the weekend!'

このコードは木曜日にテストされており、これは 4 に対応するため、コンソールの出力は「週末まであと 1 日!」となります。コードをテストする曜日に応じて、出力は異なります。エラーが発生した場合に実行されるブロックをデフォルトで最後に組み込みますが、1 週間は 7 日しかないため、この場合はエラーが発生するはずはありません。たとえば、月曜日から金曜日までの印刷結果のみがあり、デフォルトのブロックには週末についても同じ情報が含まれる可能性があります。

各ステートメントで Break キーワードを省略した場合、他の case ステートメントはいずれも true と評価されませんが、プログラムは最後に到達するまでチェックを続けます。プログラムをより高速かつ効率的にするために、break を組み込みます。

スイッチ範囲

スイッチ ブロック内の値の範囲の代わりに、値の範囲を評価する必要がある状況があります。上記の単一値の例。これを行うには、式を true に設定し、各 case ステートメントでアクションを実行します。

これを理解しやすくするために、数値スコアを取得してそれを文字評定に変換する、次の要件を持つ単純な評定アプリを作成しました。

##● レベル 90 以上は A

#● レベル 80 ～ 89 は B

#● レベル 70 ～ 79 は C

#● レベル 60 ～ 69 は D

# レベル 59 以下は F

これで switch ステートメントとして記述できるようになります。範囲をチェックしているので、それぞれの場合に何らかの処理を行って、各式が true と評価されているかどうかを確認し、真の要件が満たされた場合にステートメントを分割します。

grades.js

// Set the student's grade
const grade = 87;
switch (true) {
    // If score is 90 or greater
    case grade >= 90:
        console.log("A");       
        break;    
     // If score is 80 or greater
    case grade >= 80:
        console.log("B");        
        break;    
     // If score is 70 or greater
    case grade >= 70:
        console.log("C");       
        break;    
      // If score is 60 or greater
    case grade >= 60:
        console.log("D");        
        break;    
      // Anything 59 or below is failing
    default:
        console.log("F");
}

Output
'B'

この例では、括弧内の式は true と評価されます。これは、true と評価されるものはすべて一致することを意味します。

else を使用するのと同じように、switch は上から下に評価し、最初に真に一致したものを受け入れます。したがって、ランク変数が 87 であるため、C と D については true と評価されますが、最初の一致は B であり、それが出力となります。

複数のケース

複数のケースで同じ出力が必要なコードに遭遇する場合があります。これを実現するには、コード ブロックごとに複数のケースを使用できます。 これをテストするために、現在の月と適切な季節を一致させる小さなアプリケーションを作成します。まず、 new Date() メソッドを使用して現在の月に対応する数値を見つけ、それを month 変数に適用します。

簡単にするために、アプリケーションは次の仕様で四季を出力します:

#● 冬: 1 月、2 月、3 月

● 春: 4 月、5 月、6 月

●夏：7月、8月、9月

##●秋：10月、11月、12月

以下是我们的代码。

seasons.js

// Get number corresponding to the current month, with 0 being January and 11 being December
const month = new Date().getMonth();
switch (month) {
    // January, February, March
    case 0:    
    case 1:    
    case 2:
        console.log("Winter");        
        break;    
    // April, May, June
    case 3:    
    case 4:    
    case 5:
        console.log("Spring");        
        break;    
    // July, August, September
    case 6:    
    case 7:    
    case 8:
        console.log("Summer");        
        break;    
    // October, November, December
    case 9:    
    case 10:    
    case 11:
        console.log("Autumn");        
        break;    
    default:
        console.log("Something went wrong.");
   }

当我们运行代码时，我们将根据上面的规范接收识别当前季节的输出。

Output
Summer

出版时的当月是8，这与“夏季”季节产出的一个case陈述相对应。

结论：

在本文中，我们回顾了switch语句，这是一种条件语句，用于评估表达式并根据匹配结果输出不同的值。 我们使用范围和多个case语句检查了switch语句。

本文来自 js教程 栏目，欢迎学习！

以上がJavaScriptのSwitch文の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。