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

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

目次

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

for文とは

for (1.値を初期化 ; 2.条件 ; 3.値を更新){
  実行される処理
}
  • 処理を繰り返す時に使用します。最初にforを書くのでfor文と呼ばれます。
  • 初期化は、最初に1回だけ実行されます。
  • 使用する変数をカウンター変数またはループ変数といいます。
    →変数名は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の値は、1ずつ増えていきます。
条件式(i <3)がtrueの間は処理を繰り返し、iが3になるとfalseになるので終了します。

配列の値を取得

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

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

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

ループを抜ける(break)

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

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

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

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

2重ループを抜ける(ラベル)

<script>
  label2: for (let i = 0; i < 9; i++) {
    for (let j = 0; j < 9; j++) {
      if (j == 3) {
        break label2;
      }
      console.log(j); //0,1,2が出力される
    }
    console.log(i); // 出力なし
  }
  console.log("終了"); //出力される
</script>

ループの先頭に戻る(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が出力されます。

2重ループで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文があり2重ループ(入れ子)になっています。
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文で配列の各値を順に繰り返します。

関連の記事

[JavaScript] if文 条件分岐を行うサンプル
JavaScript switch文のサンプル
JavaScript while文とdo...while文のサンプル
JavaScript constとletとvarの違い

△上に戻る