for文の中にfor文を記述

広告

for文で実行される文には任意の文を記述できますので、別のfor文を記述するといったことも可能です。次の例を見て下さい。 

for (var i = 0; i < 2; i++){
  for (var j = 0; j < 2; j++){
    alert("i = " + i + ",j = " + j);
  }
}

この例では外側のfor文のブロック内に別のfor文を記述しています。ではこのサンプルがどのように実行されるのか確認してみます。 

 1)変数「i」を宣言し、0で初期化する

 2)外側の条件式を評価し繰り返しを実行する
 3)変数「j」を宣言し、0で初期化する
 4)内側の条件式を評価し繰り返しを実行する
 5)「i = 0,j = 0」を出力
 6)変化式によって変数「j」の値を1にする
 7)内側の条件式を評価し繰り返しを実行する
 8)「i = 0,j = 1」を出力
 9)変化式によって変数「j」の値を2にする
10)内側の条件式を評価し内側のfor文を終了する
11)変化式によって変数「i」の値を1にする

12)外側の条件式を評価し繰り返しを実行する
13)変数「j」を宣言し、0で初期化する
14)内側の条件式を評価し繰り返しを実行する
15)「i = 1,j = 0」を出力
16)変化式によって変数「j」の値を1にする
17)内側の条件式を評価し繰り返しを実行する
18)「i = 1,j = 1」を出力
19)変化式によって変数「j」の値を2にする
20)内側の条件式を評価し内側のfor文を終了する
21)変化式によって変数「i」の値を2にする

22)外側の条件式を評価し外側のfor文を終了する

2)から11)までが外側のfor文の1回目の繰り返し処理、12)から21)までが外側のfor文の2回目の繰り返し処理となります。そして外側のfor文が1回繰り替えされるたびに内側のfor文の繰り返しが一通り行われることになります。

このようにfor文の中に別のfor文を記述するのは2つの変数の値をそれぞれ範囲内で変化させ、総当りの組み合わせで処理を行いたい場合に使われます。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script5_1.js">
</script>

</body>
</html>

document.write("<p>");

for (var i = 1; i <= 9; i++){
  for (var j = 1; j <= 9; j++){
    document.write(i + " × " + j + " = " + (i * j) + "<br />");
  }
}

document.write("</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p5-1

九九を総当りで表示しています。

p5-2

( Written by Tatsuo Ikura )