JavaScriptでSwitchステートメントを使用する方法

前書き

条件付きステートメントは、すべてのプログラミング言語で最も有用で一般的な機能です。 “https://www.digitalocean.com/community/tutorials/how-to-write-conditional-statements-in-javascript[How To Write Conditional Statements in JavaScript]” describes how to use the if, else, and else if keywords to control the flow of a program based on different conditions, which in JavaScript are often the result of user input.

JavaScriptには、if...elseに加えて、switchステートメントと呼ばれる機能があります。 switchは、複数の可能なケースに対して式を評価し、一致するケースに基づいて1つ以上のコードブロックを実行する条件ステートメントの一種です。 switchステートメントは、多くのelse ifブロックを含む条件ステートメントと密接に関連しており、多くの場合、同じ意味で使用できます。

このチュートリアルでは、switchステートメントの使用方法と、関連するキーワードcase、break、およびdefaultの使用方法を学習します。最後に、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
}

上記のコードブロックのロジックに従って、これは発生するイベントのシーケンスです。

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

上記の構文に従って、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に対応するため、コンソール出力はJust one more day 'til the weekend!でした。コードをテストする曜日によって、出力は異なります。エラーが発生した場合に実行するために、最後にdefaultブロックを含めました。この場合、曜日は7日しかないため、発生しないはずです。たとえば、月曜日から金曜日の結果のみを印刷し、defaultブロックに週末の同じメッセージを表示することもできます。

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

スイッチ範囲

上記の例のような単一の値ではなく、switchブロック内の値の範囲を評価する必要がある場合があります。これを行うには、式をtrueに設定し、各caseステートメント内で操作を実行します。

これを理解しやすくするために、使い慣れた例を使用します。 conditional statementsチュートリアルでは、次の要件を使用して、数値スコアを取得して文字グレードに変換する簡単な評価アプリを作成しました。

90以上のグレードはAです
80から89のグレードはBです
70から79のグレードはCです
60から69のグレードはDです
59以下のグレードはFです

これで、これをswitchステートメントとして記述できます。範囲をチェックしているので、各caseで操作を実行して、各式がtrueに評価されているかどうかをチェックし、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と評価されるすべてのcaseが一致することを意味します。

else ifの場合と同様に、switchは上から下に評価され、最初の真の一致が受け入れられます。したがって、grade変数は87であり、CとDについてもtrueと評価されますが、最初の一致はBであり、これが出力になります。

複数のケース

コードのブロックごとに複数のcase+`s should have the same output. In order to accomplish this, you can use more than one `+caseが含まれるコードが発生する場合があります。

これをテストするために、今月を適切な季節に一致させる小さなアプリケーションを作成します。まず、new Date()メソッドを使用して、現在の月に対応する数値を見つけ、それをmonth変数に適用します。

const month = new Date().getMonth();

new Date().getMonth()メソッドは、0から11までの数値を出力します。0は1月、11は12月です。この発行の時点では、月は9月であり、これは8に対応します。

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

Winter：1月、2月、3月
Spring：4月、5月、6月
Summer：7月、8月、9月
Autumn：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.");
}

コードを実行すると、上記の仕様に基づいて現在のシーズンを特定する出力を受け取ります。

OutputSummer

公開時の当月は8でした。これは、"Summer"シーズン出力のcaseステートメントの1つに対応していました。

結論

この記事では、式を評価し、一致した結果に基づいてさまざまな値を出力するconditonal statementのタイプであるswitchステートメントを確認しました。範囲と複数のcaseステートメントを使用してswitchステートメントを確認しました。

switchの詳細については、Mozilla Developer Networkで確認できます。

TOC

JavaScriptでSwitchステートメントを使用する方法

前書き

スイッチ

スイッチ範囲

複数のケース

結論

Related