JavaScriptの繰り返し処理

こんにちは、ぺんしるです。

特定の処理をある条件下で繰り返しおこないたい場合に使用するのが、繰り返し処理（ループ処理）です。主に、for文とwhile文があります。

今日はJavaScriptの繰り返し処理（ループ処理）について解説していきますね！！

for文

特定の条件と合致するまで指定した回数だけ処理を繰り返す時に使うのがfor文です。

たとえば、変数iが10になるまで処理を繰り返す場合には、以下のように記載します。

for (var i = 1; i < 10 ; i++ ){
  console.log(i);
}

foreach文

配列の各要素に対して処理を行うときに使用するのがforeach文です。

たとえば、配列変数amimalsがあるとします。その変数amimalsの各要素の値を出力する場合には、以下のように記載します。

var animals = ['dog', 'cat', 'pig'];
animals.forEach((animals) => {
  console.log(animal);
});

上の文は、for文を使用すると以下になります。いずれも同じ結果になります。

var animals = ['dog', 'cat', 'pig'];
for (var i = 0; i < animals.length; i++) {
    console.log(animals[i]);
}

と書くと、forとforeachの違いが分からなくなるかも知れません。大きな違いは以下になります。この違いを理解して、使い分ける必要があります。

for in文

配列の各要素に対して処理を行うときにはfor in文も利用できます。

var animals = ['dog', 'cat', 'pig'];
for (animal in animals) {
  console.log(animal);
}

上の文は、foreach文を使用すると以下になります。いずれも同じ結果になります。

var animals = ['dog', 'cat', 'pig'];
animals.forEach((animals) => {
  console.log(animal);
});

for inに似た書き方としてfor of文などがありますが、これも業務ではあまり見かけないですね。。

while文

特定の条件と合致するまで指定した回数だけ処理を繰り返す時に使う方法として、while文もあります。

たとえば、変数iが10になるまで処理を繰り返す場合には、以下のように記載します。

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

ある条件になるまで無限に繰り返す場合には、以下のように記載します。無限に繰り返すことから無限ループと言われます。

var i = 0;
while (true) {
  if (i < 10){
    break;
  }
  console.log(i);
  i++;
}

do while文

while文は、条件式に合致しない場合１回も実行されません。必ず１回は実行したい場合はdo while文を使用します。

var i = 0;
do {
  console.log(i);
  i++;
} while (i < 10);

for文とwhile文の使い訳・違い

明確な規則はありませんが、ぺんしるの場合は、繰り返し回数が明確な場合やループ条件がシンプルであればfor文、それ以外はwhile文を使用しています。

ループの抜け方/飛ばし方

for分やwhile文で、ループ処理から抜ける方法/飛ばす方法を解説します。

continue

繰り返し処理中に、ある条件の場合は処理を飛ばしたい場合があります。その場合に使用するのが continue文です。continue文が実行されると、continue以降の処理は実行されずに次の繰り返し処理へ進みます。

以下の例の場合だと、変数iが5の場合にはその下の処理（console.log）は実行されません。結果、0,1,2,3,4,6,7,8,9が出力されます。

for (i = 0; i < 10; i++) {
  if (i == 5) {
    continue;
  }
  console.log(i);
}

break

繰り返し処理中に、ある条件の場合は処理を抜けたい場合があります。その場合に使用するのが break文です。 break 文が実行されると、その時点で繰り返し処理が終わりになります。

以下の例の場合、変数iが5の場合には繰り返し処理を抜けます。結果、0,1,2,3,4が出力されます。

for (i = 0; i < 10; i++) {
  if (i == 5) {
    break;
  }
  console.log(i);
}

label

ループが多重ループになっている場合には、breakを使用すると直近のループ処理から抜けることになります。以下の例を見てみましょう。

var total = 0;
for (var i = 0; i < 10; i++) {　　　//このループは抜けない
   for (var j = 0; j < 10; j++) {　//このループを抜ける
      total = i + j;
      if (total > 5) {
        break;
      }
      console.log(total);
   }
}

上記の場合、break句文で抜けると、for (var j = 0..のfor文を抜けることになります。

for (var i = 0..のfor文を抜けるには、抜けたいfor文に対してlabelを設定して、break文にそのラベル名を使用する必要があります。

var total = 0;
label_i:                          //for文に対してラベルを定義
for (var i = 0; i < 10; i++) {
   for (var j = 0; j < 10; j++) {
      total = i + j;
      if (total > 5) {
        break label_i;            //break文にラベル名を指定
      }
      console.log(total);
   }
}

最後に

いかがでしたか？

不明点があれば、遠慮なくこちらから質問くださいね。

プログラム初心者の方は、以下の本が分かりやすくて参考になりますよ。

ではまた！！