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

JavaScriptのfor文のサンプルです。処理を繰り返す時に使用します。

確認環境
・Google Chrome

サンプル	for文
	for文で配列の値を取得する
break	ループを抜ける(break) / ２重ループでbreakを使用
continue	ループの先頭に戻る(continue) / ２重ループでcontinueを使用
その他	for...of文 / for...in文 / forEach文

for文

for (1.値を初期化 ; 2.条件 ; 3.値を更新){
実行される処理
}

処理を繰り返す時に使用します。最初にforを書くのでfor文と呼ばれます。
初期化は、最初に１回だけ実行されます。
使用する変数をカウンター変数またはループ変数といいます。
→変数名はiやjがよく使用されます。
条件がtrueの間、処理を繰り返します。
条件がfalseの場合、ループ処理を終了します。
「3.値を更新」でカウンター変数/ループ変数の値が変わります。

for文のサンプル

<script>
  for (let i = 0; i < 3; i++) {
    console.log(i); // 0 1 2が出力される
  }
</script>

2行目は、初期化式(let i = 0)によりiは0から始まります。iはカウンター変数と呼ばれます。
増減式(i++)によりiの値は、１ずつ増えていきます。
条件式(i <3)がtrueの間は処理を繰り返し、iが3になるとfalseになるので終了します。

for文で配列の値を取得する

<script>
  const color = ["赤", "黄", "青"]; // 配列

  for (let i = 0; i < color.length; i++) {
    console.log(color[i]); // 赤 黄 青が出力される
  }
</script>

2行目は、配列です。
4行目のlengthは、配列の長さを返します。
5行目は、変数と添字で配列の値を表示しています。配列の添字は0から始まります。

以下はMDNのfor文のリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for

ループを抜ける(break)

breakでループを抜けるサンプルです。

<script>
  for (let i = 0; i < 3; i++) {
    if (i == 1) {
      break;
    }
    console.log(i); // 0が出力される
  }
</script>

4行目のbreakでfor文を抜けます。

以下はMDNのbreakのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/break

２重ループで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文があり２重ループ(入れ子)になっています。
5行目のbreakは、内側のfor文のみ抜けます。

ループの先頭に戻る(continue)

continueでループの先頭に戻るサンプルです。

<script>
  for (let i = 0; i < 3; i++) {
    if (i == 1) {
      continue; //ループ処理の先頭に戻る
    }
    console.log(i); // 0 2が出力される
  }
</script>

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

以下はMDNのcontinueのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/continue

２重ループで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文があり２重ループ(入れ子)になっています。
5行目のcontinueは、内側のfor文の先頭の3行目に戻ります

for...of文

for (変数 of オブジェクト){
実行される処理
}

上記for文との違いは、変数の値を加算する処理がありません。
配列などの要素を順番にアクセスします。
オブジェクトとは、ArrayやStringなどのiterableオブジェクトです。
IE11は対応していません。

<script>
  const color1 = ["赤", "黄", "青"];

  for (const c of color1) {
    console.log(c); //赤 黄 青が出力される
  }
</script>

3行目は、配列です。
4行目は、for...of文で配列の全ての要素にアクセスします。カウンター変数を使用していません。

for...in文

for (変数 in オブジェクト){
実行される処理 (変数を使用する)
}

オブジェクトに含まれる全てのプロパティの分ループします。
想定していないプロパティも取得しまう場合があるので注意が必要です。
(対象オブジェクト自身とそのオブジェクトがプロトタイプから継承しているすべての列挙可能なプロパティ)
順序の保証がないため、インデックスの順序が重要である配列の繰り返しには使うべきではありません。
主に連想配列に使用します。

<script>
  const color1 = { c1: "赤", c2: "黄", c3: "青" };

  for (const c in color1) {
    console.log(c); //c1 c2 c3
    console.log(color1[c]); //赤 黄 青
  }
</script>

2行目は、連想配列です。
4行目は、for...in文です。連想配列の個数分処理を繰り返します。
5行目は、キーを表示しています。
6行目は、キーに対する値を表示しています。

forEach文

forEach文のサンプルです。

<script>
  const color1 = ["赤", "黄", "青"];

  color1.forEach(function (a) {
    console.log(a); //赤 黄 青
  });
</script>

2行目は、配列です。
4行目は、forEach文で配列の各値を順に繰り返します。