Loops and iteration

ループは繰り返し何かをするすばやく簡単な方法を提供します。JavaScript Guideのこの章では、JavaScriptで利用可能な異なる反復ステートメントを紹介します。

一方向にXの手順を実行し、別の方向にYの手順を実行するとだれかに話すゲームのコンピュータ化されたバージョンとしてループについて考えます。; 例えば、アイデア "Go five steps to the east"はループとして、下記のように表現することができました:

var step;
for (step = 0; step < 5; step++) {
  // Runs 5 times, with values of step 0 through 4.
  console.log('Walking east one step');
}

多くの異なる種類のループがあります。しかし、それらはすべて基本的に同じことをします: それらは行動を何回か繰り返します (そして、数がゼロであることは実際に可能です)。様々なループ機構は、ループの開始点と終了点を決定するためのさまざまな方法を提供しています。より簡単に他のものより、ループのいずれかのタイプがサービスを提供している様々な状況があります。

JavaScriptで提供されるループに対してのステートメントは下記のようです。:

• for statement
• do...while statement
• while statement
• label statement
• break statement
• continue statement
• for...in statement
• for...of statement

for ステートメント

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

for ([initialExpression]; [condition]; [incrementExpression])
  statement

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

1. もしあれば、初期化式initialExpressionは、実行されます。この式は通常、1つまたはそれ以上のループカウンタを初期化します。しかし、構文は複雑さの任意の程度の式を可能にします。この式はまた、変数を宣言することができます。
2. condition式は評価されます。conditionの値がtrueの場合、ループステートメントは実行されます。 conditionの値がfalseの場合、forループは終了します。condition式が完全に省略される場合、条件が真であると仮定されます。
3. statementは実行します。複数の文を実行するには、それらの文をグループ化するためにブロック文({ ... })を使用します。
4. もしあれば、更新式incrementExpressionは実行し、ステップ２に制御は戻ります。

例

次の関数はスクロールリスト(複数選択できる<select>要素)で選択したオプションの数をカウントするfor文を含みます。for文は変数iを宣言し、ゼロに初期化します。iが<select>要素のオプションの数未満であることを調べます。そして、後続のif文を実行し、ループの各通過後、一つづつiを増加します。

<form name="selectForm">
  <p>
    <label for="musicTypes">Choose some music types, then click the button below:</label>
    <select id="musicTypes" name="musicTypes" multiple="multiple">
      <option selected="selected">R&B</option>
      <option>Jazz</option>
      <option>Blues</option>
      <option>New Age</option>
      <option>Classical</option>
      <option>Opera</option>
    </select>
  </p>
  <p><input id="btn" type="button" value="How many are selected?" /></p>
</form>

<script>
function howMany(selectObject) {
  var numberSelected = 0;
  for (var i = 0; i < selectObject.options.length; i++) {
    if (selectObject.options[i].selected) {
      numberSelected++;
    }
  }
  return numberSelected;
}

var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
  alert('Number of options selected: ' + howMany(document.selectForm.musicTypes))
});
</script>

do...whileステートメント

do...while文は指定された条件がfalseになるまで繰り返します。do...while文は以下のようになります:

do
  statement
while (condition);

statementはconditionが調べられる前に一度実行されます。複数の文を実行するために、それらの文をグループ化するためにブロック文({ ... })を使用します。conditionがtrueの場合、statementは再び実行します。あらゆる実行の終わりに、conditionが調べられます。conditionがfalseのとき、実行は停止し、制御はdo...whileに続くステートメントに渡ります。

例

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

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

while ステートメント

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

while (condition)
  statement

conditionがfalseになる場合、ループ内のstatementは実行を停止し、ループに続くステートメントに制御が渡されます。

ループ内のstatementが実行される前に条件テストが発生します。conditionがtrueを返す場合、statementは実行され、conditionは再びテストされます。conditionがfalseを返す場合、実行は停止し、whileに続くステートメントに制御が渡されます。

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

例 1

次の whileループは、nが3未満の場合、反復します。:

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

各反復で、ループはnを増やし、その値をxに追加します。それゆえ、xとnは以下の値をとります:

• 最初の通過後: n = 1 と x = 1
• 二番目の通過後: n = 2 と x = 3
• 三番目の通過後: n = 3 と x = 6

三番目の通過完了後、条件n < 3はもはやtrueではありません。だから、ループは終了します。

例 2

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

while (true) {
  console.log("Hello, world");
}

label ステートメント

labelはプログラム内の他の場所でそれを参照することができる識別子を使用して文を提供します。例えば、ループを識別するためにラベルを使用でき、プログラムがループを中断したり、実行を継続すべきかどうかを示すために、break文やcontinue文を使用します。

ラベルステートメントの構文は以下のようになります。:

label :
   statement

labelの値は予約語ではない任意のJavaScript識別子であってもよいです。ラベルを使用して識別するstatementは任意のステートメントであってもよいです。

例

この例では、ラベルmarkLoopはwhileループを識別します。

markLoop:
while (theMark == true) {
   doSomething();
}

breakステートメント

ループ、switch、ラベル文との接続内で終了するためにbreak文を使用してください。

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

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

1. break;
2. break label;

構文の最初の形式は最も内側のループまたはswitchを終了します。構文の二番目の形式は指定されたラベル文を終了します。

例 1

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

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

例 2: ラベルにbreakする

var x = 0;
var z = 0
labelCancelLoops: while (true) {
  console.log("Outer loops: " + x);
  x += 1;
  z = 1;
  while (true) {
    console.log("Inner loops: " + z);
    z += 1;
    if (z === 10 && x === 10) {
      break labelCancelLoops;
    } else if (z === 10) {
      break;
    }
  }
}

continue ステートメント

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

• ラベルなしでcontinueを使用するとき、最も内側の囲んでいるwhile、do-while、for文の現在の反復を終了し、次の反復のループの実行を継続します。break文とは対照的に、continueは完全にループの実行を終了しません。whileループでは、条件に戻ります。forループでは、increment-expressionにジャンプします。
• ラベルとともにcontinueを使用するとき、そのラベルで識別されたループ文に適用されます。

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

1. continue;
2. continue label;

例 1

次の例では、iの値が3のとき実行するcontinue文を使用するwhileループを示します。このようにして、 nは1,3,7,12の値を得ます。

i = 0;
n = 0;
while (i < 5) {
  i++;
  if (i == 3) {
    continue;
  }
  n += i;
}

例 2

checkiandjとラベル付けされたステートメントはcheckjとラベル付けされたステートメントを続けます。continueが検出された場合、プログラムはcheckjの現在の反復を終了し次の反復を初めます。continueが検出されるたびに、checkjはその条件がfalseを返すまで繰り返します。falseが返されるとき、checkiandjの残りの部分が完了され、checkiandjは、その条件がfalseを返すまで繰り返します。falseが返されると、プログラムはcheckiandjに続くステートメントを継続します。

continueがcheckiandjのラベルを持っている場合、プログラムはcheckiandjステートメントの先頭に続きます。

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 ステートメント

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

for (variable in object) {
  statements
}

例

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

function dump_props(obj, obj_name) {
  var result = "";
  for (var i in obj) {
    result += obj_name + "." + i + " = " + obj[i] + "<br>";
  }
  result += "<hr>";
  return result;
}

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

car.make = Ford
car.model = Mustang

配列

Array要素を反復する方法としてこれを使用しようとしてもよいですが、for...in ステートメントは数値のインデックスに加えてユーザ定義プロパティの名称を返します。このようにして、配列を反復するとき、数値のインデックスで従来のforループを使用するほうが良いです。というのも、カスタムプロパティやカスタムメソッドを追加するようなArrayオブジェクトを更新する場合、for...inステートメントは配列要素に加えてユーザ定義プロパティを反復するからです。

for...of ステートメント

for...of ステートメントは、iterable objects(Array、Map、Set、argumentsオブジェクトなどを含む)を反復するループを生成し、ステートメントを使用してカスタム反復フックを呼び出し、異なるそれぞれのプロパティの値を実行します。

for (variable of object) {
  statement
}

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

let arr = [3, 5, 7];
arr.foo = "hello";

for (let i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i); // logs "3", "5", "7"
}