Javascriptで使える5つの繰返し処理(for / while)の特徴をまとめてみた

5つの構文を一挙紹介!JSの繰り返し構文をまとめてみる

更新日:

繰返し処理の書き方が多すぎて分からない!!

Javascriptを学習して少し経つと、

「え、繰返し処理の種類多くね?」

となるタイミングがきっとあると思います。

しかも、それぞれにどんな特徴があって、どんな場面でどれを使えば良いのか分からなくなりますよね・・・。

そんな今回は5つの繰返し処理の特徴と使用場面をまとめていきます!

  • for
  • while
  • for-in
  • for-of
  • forEach

for文の特徴

コード

// 通常の繰返し処理
const arr = ['APPLE', 'ORANGE', 'BANANA'];
for(let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

出力

APPLE
ORANGE
BANANA

まずは通常の繰返し処理のfor文です!
この処理は基本的にどんな要素でも繰返すことが出来るので、困った時はこれを使えばOKですね!!

次で紹介するwhile文と異なるのはfor文は繰り返す回数が決まっている場合に使用します。
上のコードで言うと「arr」という配列の中身の個数だけループしています。

while文の特徴

// 通常の繰返し処理
const arr = ['APPLE', 'ORANGE', 'BANANA'];
let i = 0;
while(i < arr.length) {
  console.log(arr[i]);
  i++;
}

次はwhile文ですね!
先ほども少し触れましたが、while文は繰り返す回数が決まっていない場合に使用します。

一応、上のコードのように繰り返す回数が決まっていてもループはできます。
しかし、while文の真価が発揮できるのは以下のような場合になります。

// 通常の繰返し処理
while(hoge()) {
  console.log('ループ中!');
}

// 乱数(0 ~ 99)が50未満のときfalseを返す
function hoge(){
  if(50 > Math.random() * 100) {
    return false;
  }
  return true;
}

簡単にコードの説明をすると、

hogeという「乱数(0 ~ 99)が50未満のときfalseを返す」関数を作りました。
whileでこの関数を呼び出して、ループしている間はコンソールに文字を出力しています。

乱数は文字通りランダムな数値なので、何回ループすればループを抜けられるのか分からないと思います。
while文はこのように、ループ回数が決まっていない場合に使うとスッキリ書くことができます。

  • 繰り返す回数が決まっている:for 文
  • 繰り返す回数が決まっていない:while 文

※実際は記述方法の違いだけなので、どちらでも実装は可能です。

for-in文の特徴

// for-inの繰返し処理
const arr = ['APPLE', 'ORANGE', 'BANANA'];
for(let index in arr) {
  console.log(arr[index]);
}

for-inは通常のfor文とは違って、「i = 0」などといったカウンターの宣言が必要ないのです!
オブジェクトの中身を全てループさせたいときは「fot-in」を使うようにすればスッキリとしたコードを書くことが出来ます。

また、for-inは連想配列をループさせることもできます!

// for-inの繰返し処理
const arr = {
  apple: 'りんご',
  orange: 'オレンジ',
  banana: 'バナナ'
};

for(let key in arr) {
  console.log(arr[key]);
}

連想配列をスッキリと記述することができました!

しかし!!
様々な配列をループできるfor-inですが、オススメできない場面もあります。
以下の2点を踏まえて、使用場面を考えましょう!

  • データ量が多い時は、処理速度が遅くなり、エラーが出ることもある
  • ループする順番は保障されない

2つ目の「ループする順番は保障されない」について、一言だけだとイマイチ分からないので、解説していきます。

想定として、「1, 2, 3」の順序で処理を行うとします。
しかし、for-inを使うと「3, 2, 1」といった処理の順序になる場合もあれば、「2, 3, 1」になる場合もあります。

つまり、順番通りに処理を行う必要がある時とデータが多くなる時は使わない方がいいですね!

forEach文の特徴

// forEachの繰返し処理
const arr = ['APPLE', 'ORANGE', 'BANANA'];
arr.forEach(function(value, index, array) {
  consle.log(index + '番目の要素は' + value + 'です!');
});

forEachは配列に対して使える繰り返し文になっています。
逆にいうと、連想配列やその他のオブジェクトでは使用できないので注意が必要です。

これだけ見ると、「for-inの方が優秀じゃね?」となりそうですが、そうじゃないんです!!

先ほどのfor-inで述べた、

  • データ量が多い時は、処理速度が遅くなり、エラーが出ることもある
  • ループする順番は保障されない

このデメリットが発生しない点がforEachを使う最大のメリットです。
なので、配列を扱う場合は、積極的にforEachを使用しましょう!

しかし!!!
forEachにも扱いづらい点があります・・・。

よく見るとforEachはfor文ではなく、関数になっています。
なのでbreakとcontinueが使えないのです・・・。

ちなみにreturnを使えば、continueと同様のことはできます!

for-of文の特徴

// for-ofの繰返し処理
const arr = ['APPLE', 'ORANGE', 'BANANA'];
for(let index of arr) {
  consle.log(arr[index]);
});

お待たせしました!配列を扱う場合のほぼ結論です!!
for-ofもforEachと同様に配列のみ扱えるfor文です。

for文なのでcontinueとbreakが使えます!

もちろん、for-inであった「速度の問題」も「処理順の問題」もありません!

しかし!!!
for-ofは比較的、新しい仕様になっているので対象ブラウザに注意してください!!
モダンブラウザでは基本的に対応していると思って大丈夫!
ですが、IE11には対応していません^^;

IE11は切り捨ててるよ!って方はぜひ使ってくださいね〜

まとめ

最後に、それぞれの繰り返し処理をまとめていきます!!

for

  • 基本的なヤツ
  • ループする回数が決まっている場合はこれを使う
  • ループできないものはない

while

  • こっちも基本的なヤツ
  • ループする回数が決まっていない場合はこれを使う
  • ループできないものはない

for-in

  • 様々なオブジェクトを少ない記述で繰り返すことができる
  • データ量が多いとすごく遅い(多すぎるとエラーが出る危険性もある)
  • 配列の処理が順番通りとは限らない
  • 順番通りじゃなくても問題ない&データ量が極端に多くない場合に使おう!

forEach

  • 配列専門のループ処理
  • for文じゃないのでbreak, continueが使えない
  • for-ofが使えないブラウザが対象の時に使おう!

for-of

  • 配列専門のループ処理
  • for文なのでbreak, continueが使える
  • モダンブラウザで配列の処理するならコイツを使おう!!

Copyright© カノトのアトリエ , 2019 All Rights Reserved Powered by STINGER.