for 文によるループは指定された条件がfalse と評価されるまで繰り返されます。JavaScript のfor ループは Java や C 言語のfor ループと同じです。

for 文は以下のような形です。

for (初期化式; 条件式; 加算式)  文

for ループが実行されるとき、次の処理が行われます。

1. もしあれば、初期化式が実行されます。この式は通常、1 個またはそれ以上のループカウンターを初期化しますが、この構文ではいかなるレベルの複雑な式を入れることが可能です。初期化式で変数を宣言することもできます。
2. 条件式が評価されます。条件式の値が真の場合、ループ文が実行されます。条件式の値が偽の場合、for ループは終了します。（条件式がすべて省略されている場合、条件式は真であるとみなされます。）
3. 文が実行されます。複数の文を実行するには、それらの文をグループ化するためにブロック文 ({ }) を使用します。
4. もしあれば、加算式が実行されます。
5. ステップ 2 に制御が戻ります。

例えば下記の例にはfor 文があり、スクロールリスト（複数選択が可能な<select> 要素）で選択されたオプションの数値をカウントしています。

HTML

<form name="selectForm">  <label for="musicTypes"    >好きな音楽のジャンルをいくつか選び、下のボタンをクリックしてください。</label  >  <select name="musicTypes" multiple>    <option selected>R&B</option>    <option>Jazz</option>    <option>Blues</option>    <option>New Age</option>    <option>Classical</option>    <option>Opera</option>  </select>  <button type="button">How many are selected?</button></form>

JavaScript

ここでは、for 文が変数i を宣言し、0 に初期化します。i が<select> 要素のオプション数未満であることを確認し、後続のif 文を実行し、ループ内を一通り実行した後にi を 1 ずつ加算します。

function countSelected(selectObject) {  let numberSelected = 0;  for (let i = 0; i < selectObject.options.length; i++) {    if (selectObject.options[i].selected) {      numberSelected++;    }  }  return numberSelected;}const btn = document.getElementById("btn");btn.addEventListener("click", () => {  const musicTypes = document.selectForm.musicTypes;  console.log(`You have selected ${countSelected(musicTypes)} option(s).`);});

do...while 文は指定された条件が偽になるまで繰り返します。

do...while 文は以下のような形です。

do  文while (条件式);

文は、条件式がチェックされる前に一度ずつ実行されます。（複数の文を実行するには、ブロック文 ({ }) を使って文をグループ化します。）

条件式がtrue の場合、文が再び実行されます。文の実行終了時に毎回条件がチェックされます。条件がfalse の場合、実行は停止し、制御はdo...while の次の文に渡ります。

次の例では、do ループは少なくとも一度繰り返されます。そしてi が 5 未満でなくなるまで繰り返されます。

let i = 0;do {  i += 1;  console.log(i);} while (i < 5);

while 文は指定された条件がtrue と評価される限り文を実行します。while 文は以下のようになります。

while (条件式)  文

条件式がfalse となる場合、ループ内の文は実行を停止し、ループに続く文に制御が渡されます。

ループ内の文が実行される前に条件が検査されます。条件がtrue を返した場合、文が実行され、条件が再び検査されます。条件がfalse を返した場合、実行は停止し、while の次の文に制御が渡されます。

複数の文を実行するには、それらの文をグループ化するブロック文 ({ }) を使用します。

次の例では、while ループは、n が3 未満の場合繰り返されます。

let n = 0;let x = 0;while (n < 3) {  n++;  x += n;}

各反復で、n がインクリメントされ、その値がx に加算されます。そのため、x とn は以下の値をとります。

• 1 回目の反復後 :n =1,x =1
• 2 回目の反復後 :n =2,x =3
• 3 回目の反復後 :n =3,x =6

3 回目の通過完了後、条件式n < 3 はもはやtrue ではなくなるため、ループが終了します。

無限ループは避けてください。ループ内の条件が最終的にfalse になることを確かめるようにしましょう。さもないと、ループは永遠に終了しません。次のwhile ループ文は、条件が決してfalse にならないので永遠に実行されます :

// 無限ループは悪!while (true) {  console.log("Hello, world!");}

ラベルを使って、プログラム内の他の場所から参照できる識別子を組み込んだ文が作成できます。例えば、ループの識別にラベルを使い、そのプログラムでループを中断するか、実行を継続するかどうかを指定する場合に、ラベルをbreak 文やcontinue 文で使用することができます。

ラベル文の構文は以下のようになります。

ラベル:  文

ラベルの値には、予約語でなければあらゆる JavaScript 識別子を使用できます。ラベルによって識別される文はどんな文でもかまいません。ラベル付き文の例については、下記のbreak とcontinue の例を参照してください。

break 文を使用すると、ループ、switch、ラベル文を使った関連付けを終了させることができます。

• ラベルなしでbreak を使用すると、最も内側のwhile、do-while、for、switch をただちに終了し、次の文に制御を移します。
• ラベルつきでbreak を使用すると、指定したラベルつき文を終了します。

break 文の構文は下記のようになります。

break;break ラベル;

1. 最初の形では最も内側のループやswitch を終了します
2. 2 つ目の形では指定した外側のラベルつき文を終了します。

次の例では、値がtheValue である要素のインデックスを探すまで配列の要素を反復します。

for (let i = 0; i < a.length; i++) {  if (a[i] === theValue) {    break;  }}

continue 文はwhile、do-while、for、label 文を再起動する際に使用されます。

• ラベルなしでcontinue を使用すると、その文を囲んでいる最も内側のwhile、do-while、for 文による現在の反復を終了し、次の反復のループの実行を継続します。break 文とは対照的に、continue は完全にループの実行を終了しません。while ループの場合、条件にジャンプします。for ループでは、加算式 にジャンプします。
• ラベルとともにcontinue を使用すると、この動作がそのラベルによって識別されるループ文に対して適用されます。

continue文の構文は下記のようになります。

continue;continue ラベル;

次の例では、i の値が 3 のときに実行されるcontinue 文が使用されたwhile ループを示しています。この場合、n の値は1、3、7、12 となります。

let i = 0;let n = 0;while (i < 5) {  i++;  if (i === 3) {    continue;  }  n += i;  console.log(n);}// ログ出力:// 1 3 7 12

continue; をコメントアウトすると、ループは末尾まで実行され、1,3,6,10,15 という結果になります。

次の例では、checkIandJ とラベル付けされた文にはcheckJ とラベル付けされた文が含まれています。continue 文に出会うと、プログラムはcheckJ の現在の反復を終了し次の反復を開始します。continue に出会うたびに、checkJ はその条件がfalse を返すまで繰り返されます。false が返されると、checkIandJ の残りの部分が完了し、その条件がfalse を返すまでcheckIandJ が繰り返されます。false が返されると、プログラムはcheckIandJ に続く文を継続します。

もしcontinue がcheckIandJ のラベルを持っていると、プログラムはcheckIandJ のラベル文の先頭から継続されます。

let i = 0;let j = 10;checkIandJ: while (i < 4) {  console.log(i);  i += 1;  checkJ: while (j > 4) {    console.log(j);    j -= 1;    if (j % 2 === 0) {      continue checkJ;    }    console.log(j, "is odd.");  }  console.log("i =", i);  console.log("j =", j);}

for...in 文はオブジェクトにあるすべての列挙可能なプロパティに対し指定された変数を通して反復処理を行います。それぞれの異なるプロパティに、JavaScript は指定された文を実行します。for...in 文は下記のようになります。

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

次の関数は引数としてオブジェクトと、そのオブジェクトの名前を表す文字列を取ります。それからすべてのオブジェクトのプロパティに対して反復処理し、プロパティ名とその値を表示する文字列を返します。

function dumpProps(obj, objName) {  let result = "";  for (const i in obj) {    result += `${objName}.${i} = ${obj[i]}<br>`;  }  result += "<hr>";  return result;}

make プロパティとmodel プロパティを持つcar オブジェクトに対し、result は下記のようになります。

car.make = Fordcar.model = Mustang

Array の要素に対して反復処理を行う方法としてこれを使用したくなるかもしれませんが、これは数値のインデックスに加えてユーザー定義プロパティの名前も返します。

したがって、配列を繰り返し処理する場合は、数値インデックスを使用する従来のfor ループを使用した方が良いでしょう。なぜなら、Array オブジェクトを変更した場合（カスタムプロパティやメソッドを追加した場合など）、for...in 文は配列要素に加えて、ユーザー定義プロパティに対しても反復処理するからです。

for...of 文は、反復可能オブジェクト（Array、Map、Set、arguments オブジェクトなどを含む）を反復処理するループを生成し、それぞれのプロパティの値に対して実行したい文をともなって作られた反復処理フックを呼び出します。

for (変数 of オブジェクト)  文

次の例では、for...of ループとfor...in ループとの違いを示しています。for...in はプロパティ名に対し反復処理する一方、for...of はプロパティの値に対して反復処理します。

const arr = [3, 5, 7];arr.foo = "hello";for (const i in arr) {  console.log(i);}// "0" "1" "2" "foo"for (const i of arr) {  console.log(i);}// Logs: 3 5 7

for...of およびfor...in 文は、構造分解でも使用することができます。例えば、Object.entries() を使用して、オブジェクトのキーと値を同時に反復処理することができます。

const obj = { foo: 1, bar: 2 };for (const [key, val] of Object.entries(obj)) {  console.log(key, val);}// "foo" 1// "bar" 2

• 前のページ
• 次のページ