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

01. for文とは

・for文とは

02. break

03. continue

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

04. その他

・for...of文

・for...in文

・forEach文

for文とは

処理を繰り返す時に使用します。最初にforを書くのでfor文と呼ばれます。
繰り返しはループとも呼ばれます。

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

コード

<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になるので終了します。

point

・初期化式は、最初に１回だけ実行されます。
・条件式がtrueの間、処理を繰り返します。
・増減式(3.値を更新)でカウンター変数/ループ変数の値が変わります。
・使用する変数をカウンター変数またはループ変数といいます。変数名はiやjがよく使用されます。
・条件式が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>

2,3行目にfor文があり２重ループ(入れ子)になっています。labelはラベルです。
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文

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

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

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

point

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

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

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行目は、キーに対する値を表示しています。

point

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

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

forEach文

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

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

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