JavaScript for文とbreakとcontinueのサンプル

nas

JavaScriptのfor文のサンプルとfor文でbreakとcontinueを使用するサンプルです。

確認環境
・Windows10
・Google Chrome

目次

for文

for(初期化式  ; 条件式  ;  増減式){
  繰り返される箇所
}
  • 初期化式は、最初に１回だけ実行されます。
  • 初期化式にあるループで使用する変数をカウンター変数またはループ変数といいます。
  • 条件式がtrueの間、処理を繰り返します。
  • 増減式でカウンター変数/ループ変数の値が変わります。
  • 以下は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が出力されます。

 

varでなくletを使用する

for文の初期化式の変数の宣言は、varではなくletを使用しましょう。
letはスコープをブロックのみにしてくれます。
ブロックとは波括弧 { }で囲まれた範囲です。

コード

スコープを確認するサンプルです。

<script>
for (var i = 0; i < 3; i++) {
	console.log(i); // 0 1 2
}
console.log(i); //3 アクセスできてしまう


for (let j = 0; j < 3; j++) {
	console.log(j); // 0 1 2
}
//console.log(j); //Uncaught ReferenceError: j is not defined

</script>

2行目は、変数の宣言をvarにしています。
5行目は、ブロック外からアクセスできてしまいます。
8行目は、変数の宣言をletにしています。
11行目は、ブロック外なのでエラーになります。

 

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文のみ抜けます。

 

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の違い

△上に戻る