JavaScript 初歩のまとめ ⑪ 制御文 for

少し間が開いてしまいましたが、初歩のまとめの 11回目です。前回に 配列の初歩をまとめたので、これと合わせて使うと色々な活用ができそうな 制御文の for についてです。

for 文

for は プログラムの中のある処理を 繰り返して行うときに使う命令です。
良く似ている 繰り返しの命令に while がありますが、while が何回繰り返すか判らないけど、ある条件を満たすまで繰り返し続けるのに対して、for は繰り返す回数が、あらかじめ決まっている場合に使うことが多いです。但し if 文などと組み合わせることで、繰り返し回数を変更することも もちろんできます。
for 文は次のように書きます。


for ( カウンタ変数の初期値; 繰り返し条件; カウンタ変数の値の変更 ) {
    実行する処理;
}


大まかには、( )の中が 繰り返しを行う条件（この条件を満たす場合に繰り返しを行う。）で、{ } の中が 繰り返して行う 実際の処理です。
( ) の中は、普通 3つに分かれています。左から順に見ていきます。


カウンタ変数の初期値　カウンタ変数というのは、繰り返した回数を入れておく変数です。この初期値を 代入文で書きます。

繰り返し条件　個々に書いた条件が true の場合に繰り返し処理が行われます。カウンタ変数と比較演算子を使った条件がよく使われるようです。

カウンタ変数の値の変更　処理が 1回行われる毎に カウンタ変数の値を増減させる場合がほとんどですが、その増減させる式を 代入文を使って書きます。


簡単な例から 実際に書いてみます。

ex.1

for(var i = 1; i < 10; ++ i) {
    document.write('繰り返し ' + i + '回目');
}

ex.1 の実行結果

この例では カウンタ変数は i で、初期値は 1 です。繰り返しが1回行われる毎に ++ i ですので、i の値が 1 増えます。そして i の値が 10 より小さい間は繰り返しが続きます。

繰り返しで 実行している処理は、カウンタ変数 を使って 何回繰り返したかを 判りやすく表示させているだけです。 

i が 10 になると、i < 10 の条件では false が返りますので、9回目で繰り返しが終了しています。

同じ条件で こんな事もできました。

ex.2

ex.2 の実行結果

document.write('かけ算 7 の段','<br>');
for(var i = 1; i < 10; ++i) {
    document.write('7 × ' + i + ' = ' + 7 * i, '<br>');
}

ex.1と繰り返しの条件は 全く同じで、表示させる文字列に少し手を加えてあるだけですが、カウンタ変数を繰り返し処理の中で使うのはかなり応用が利きそうな使い方だと思います。同じような例をもうひとつ 考えてみました。

ex.3

var flg = new Array(0, 1, 0, 0, 1, 1, 0, 0, 1, 1);

for(var i = 0; i < 10; i++) {    
    if(flg[i] == 1) {
        document.write('flg[' + i + ']', '<br>');    
    }
}

ex.3 の実行結果

最初に 10個の要素を持つ配列 flg を作って、1 か 0 を代入しています。
次に for 文を使っています。( ) 内の条件は、カウンタ変数 i の初期値が 0、i を 1づつ増やして 9になるまでです。
{ } 内の処理の内容は、if 文を使って配列要素に代入された値が、1 かどうかを調べて、1 の場合は、その配列要素を 表示させるものです。

細かく見てみます。カウンタ変数 i の初期値は 0です。1回目の処理の間は i の値はずっと 0ですので、配列の添字に i を使うと flg[0] と同じ事になります。 ex.3 の if 文の条件の所は、下に書いたのと同じことになっています。

if(flg[0] == 1) {

flg[0] に代入されているのは 0 ですので false となり、何も実行する事が無いので 1回目の 繰り返しは終わりになります。

++ i は i の値を 1 増やす意味でしたから 2回目の繰り返しの間 i の値はずっと 1 です。

if(flg[1] == 1) {

flg[1] の値は 1 ですので if 文の判定では true が返って、document.write(' ~ '); が実行されます。表示させる文字列の中にも i が登場しますが、ここでも、i の値は 1 のままですので 表示されるのは flg[1] となります。この流れが、 i が 9 になるまで繰り返されています。

for … in 文

ex.3 では、配列の要素全てに対して処理を行うために 要素数 を自分で数えて繰り返し回数を指定しました。この方法だと 配列の要素数が変わったときに、繰り返し回数も数え直して書き換えないといけません。それでは不便なので、for 文 の別の書き方もやってみます。

ex.4

var flg = new Array(0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1);

for(var i in flg) {    

    if(flg[i] == 1) {

        document.write('flg[' + i + ']', '<br>');    

    }

}

ex.4 の実行結果

ex.3 から赤字の所を変更しました。要素数は 2つ増えています。繰り返し条件は細かく指定していませんが、ちゃんと 11番目の要素まで繰り返し処理されています。

for( 変数 in オブジェクト名 ) {

     実行する処理;

}

このように書きます。オブジェクト名ついては、まだ勉強が進んでいませんので、しっかり理解してから改めてまとめを書きますが、配列もオブジェクトの一種という事ですので in の後に配列名を書くと配列要素の数と同じだけ繰り返して { } 内の処理をしてくれます。配列と for 文 と if 文 を組み合わせて使うのは、とても応用ができそうなので、しっかりと覚えておこうと思います。

for 文は これ以外にも 試してみたい事がいくつかありますので、次回も for 文の続きです。

---

1月31日 追記：for … in 文を 配列に対しては使わない方が良いようです。まだしっかり勉強していないのですが、エラーになる場合があるようです。