序章

条件文は、すべてのプログラミング言語の最も有用で一般的な機能の1つです。 JavaScriptで条件文を書く方法では、 if, else、 と else if さまざまな条件に基づいてプログラムのフローを制御するためのキーワード。JavaScriptでは、多くの場合、ユーザー入力の結果です。

に加えて if...else、JavaScriptには、 switch 声明。 switch は、複数の可能なケースに対して式を評価し、一致するケースに基づいて1つ以上のコードブロックを実行する条件ステートメントの一種です。 The switch ステートメントは、多くを含む条件ステートメントと密接に関連しています else if ブロック、およびそれらはしばしば交換可能に使用することができます。

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

スイッチ

The switch ステートメントは式を評価し、大文字と小文字が一致した結果としてコードを実行します。 基本的な構文は、 if 声明。 それは常にで書かれます switch () {}、テストする式を含む括弧と、実行する可能性のあるコードを含む中括弧。

以下はの例です switch 2つのステートメント case ステートメント、およびとして知られているフォールバック default.

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() 当日に対応する番号を印刷します。 0 ずっと日曜日の略です 6 これは土曜日の略です。 まず、変数を設定します。

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

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

week.js
// Set the current day of the week to a variable, with 0 being Sunday and 6 being Saturday
const day = new Date().getDay();

switch (day) {
	case 0:
		console.log("It's Sunday, time to relax!");
		break;
	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;
	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 声明。

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

  • 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 この例では。 これは、 case に評価されます true 試合になります。

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

複数のケース

複数のケースで同じ出力が必要なコードが発生する場合があります。 これを実現するために、複数を使用できます case コードのブロックごとに。

これをテストするために、今月を適切な季節に一致させる小さなアプリケーションを作成します。 まず、 new Date() 当月に対応する番号を見つけて、それをに適用する方法 month 変数。

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

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

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

  • 冬：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、の1つに対応しました case とのステートメント "Summer" シーズン出力。

結論

この記事では、 switch ステートメント、条件付きステートメントの一種で、式を評価し、一致する結果に基づいてさまざまな値を出力します。 レビューしました switch 範囲と複数を使用するステートメント case ステートメント。

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