JavaScript for文処理を繰り返す(break/continue)

説明	for文とは
サンプル	for文のサンプル
	for文で配列の値を取得
break	breakでループを抜ける
	breakを2重ループで使った場合
	breakとラベルで2重ループを抜ける
continue	continueでループの先頭に戻る
	continueを2重ループで使った場合
その他のfor文	for...of文
	for...in文
	forEach文

for文とは

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

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

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 <3)がtrueの間は処理を繰り返し、iが3になるとfalseになるので終了します。

for文で配列の値を取得

<script>
    const color = ["a", "b", "c"]; // 配列

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

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

breakでループを抜ける

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

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

breakを2重ループで使った場合

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

breakとラベルで2重ループを抜ける

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

forがある２重ループです。label2はラベルです。
5行目のbreakとラベルで外側のfor文を抜けます。

continueでループの先頭に戻る

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

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

continueを2重ループで使った場合

<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オブジェクトです。

<script>
    const color = ["a", "b", "c"];

    for (const c of color) {
        console.log(c); //a b cが出力される
    }
</script>

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

for...in文

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

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

<script>
    const color = { c1: "red", c2: "yellow", c3: "blue" };

    for (const c in color) {
        console.log(c); //c1 c2 c3
        console.log(color[c]); //red yellow blue
    }
</script>

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

forEach文

forEach文のサンプルです。

<script>
    const color = ["red", "yellow", "blue"];

    color.forEach(function (a) {
        console.log(a); //red yellow blue
    });
</script>

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