JavaScript for文のサンプル(for…of文/break/continue)

nas

JavaScriptのfor文のサンプルです。

確認環境
・Windows10
・Google Chrome

目次

for文

for(初期化式  ; 条件式  ;  増減式){
  繰り返される箇所
}
  • 処理を繰り返す時に使用します。最初にforを書くのでfor文と呼ばれます。
  • 初期化式は、最初に１回だけ実行されます。
  • 条件式がtrueの間、処理を繰り返します。
  • 条件式がfalseの場合、ループ処理を終了します。
  • 増減式でカウンター変数の値が変わります。
  • 初期化式にあるループで使用する変数をカウンター変数またはループ変数といいます。
  • 以下はMDNのfor文のリンクです。
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for

コード

for文のサンプルです。

<script>
for (let i = 0; i < 3; i++) {
	console.log(i); // 0 1 2
}
</script>

2行目のカウンター変数のiは0から始まり、増減式(i++)により１ずつ増えていきます。
i <3がtrueの間、処理を繰り返します。0,1,2が出力されます。

2行目のletのスコープは、ブロックのみです。
ブロックとは波括弧 { }で囲まれた範囲(2～4行目)です。

for...of文

for (変数 of オブジェクト){
  繰り返される箇所
}

コード

for...of文のサンプルです。

<script>

const color1 = ["赤","黄","青"];

for(const c of color1){
	console.log(c); //赤 黄 青
}

</script>

2行目は、配列です。
5～7行目は、for...of文で値を取得しています。

for文でbreakを使用する

コード

for文でbreakを使用するサンプルです。

<script>
for (let i = 0; i < 3; i++) {

	if (i == 1) {
		break;
	}
	console.log("i=" + i); // 出力結果 i=0
}
</script>

5行目のbreakでfor文を抜けます。i=0のみ出力されます。

 

for文が入れ子のときにbreakを使用する

for文が入れ子のときにbreakを使用するサンプルです。

<script>
for (let i = 0; i < 2; i++) { 
	for (let j = 0; j < 2; j++) {

		if (j == 0) {
			break; 
		}
		console.log("j=" + j); //出力なし
	}
	console.log("i=" + i); // i=0 i=1
}
</script>

2,3行目にfor文があり入れ子になっています。
6行目のbreakは、内側のfor文のみ抜けます。

 

for文でcontinueを使用する

コード

for文でcontinueを使用するサンプルです。

<script>
for (let i = 0; i < 3; i++) {

	if (i == 1) {
		continue; //ループ処理の先頭に戻る
	}
	console.log("i=" + i); // 出力結果 i=0 i=2
}
</script>

5行目のcontinueでループ処理の先頭に戻ります。i=0とi=2が出力されます。

 

for文が入れ子のときのcontinueを使用する

for文が入れ子のときのcontinueを使用するサンプルです。

<script>
for (let i = 0; i < 2; i++) { 
	for (let j = 0; j < 2; j++) {

		if (j == 0) {
			continue; 
		}
		console.log("j=" + j); //j=1 j=1
	}
	console.log("i=" + i); // i=0 i=1
}
</script>

2,3行目にfor文があり入れ子になっています。
6行目のcontinueは、内側のfor文の先頭の3行目に戻ります

関連の記事

JavaScript if文のサンプル
JavaScript switch文のサンプル
JavaScript while文とdo...while文のサンプル
JavaScript 変数の宣言のvar/let/constの違い

△上に戻る