astris.design

［JS］ループ処理一覧 for, for-in, for-of, while, do-while

JavaScriptには、for文、for-in文、for-of文、while文、do-while文の、5つの反復処理構文があります。それぞれの構文の違いと使い分けについて、解説します（サンプルあり）。

【目次・JavaScriptのループ文】

for文：ループ回数指定

for文は、指定された回数だけ、繰り返し処理を実行します。
最初のループで初期化式を実行し、カウンター変数（サンプルではi）を初期化します。
カウンター変数の値が条件式を満たしている場合、繰り返し処理を実行し、カウンター変数を加算します。
初期化式、条件式、インクリメントを省略して、for(;;){処理}とすると、無限ループになります。

構文
for ( 初期化式; 条件式; 加算式 ) {
  繰り返し処理
}

サンプル

for.js
for (let i = 0; i < 3; i++) {
  console.log(i);
  //「0」「1」「2」
}

for-in文：オブジェクト

for-in文は、オブジェクトの各プロパティに対して、繰り返し処理を実行します。
プロパティの先頭から順に、仮変数にプロパティ名が代入され、繰り返し処理で利用することができます。
プロパティの値は、ブラケット構文（[]）でアクセスします。
配列でfor-in文を使用すると、処理の順序が保証されないなどの問題があります。
そのため、配列で同様のループ処理を実装する場合は、次に紹介するfor-of文を使用します。

構文
for ( 仮変数 in オブジェクト ) {
  繰り返し処理
}

サンプル

for-in.js
const object = { bread: 100, egg: 120, cheese: 200 };
for (const name in object) {
  console.log(`${name}: ${object[name]}`);
  //「bread: 100」「egg: 120」「cheese: 200」
}

for-of文：配列

for-of文は、配列の各要素に対して、繰り返し処理を実行します。
配列の先頭から順に、仮変数に要素の値が代入され、繰り返し処理で利用することができます。
また、for-of文は、配列だけでなく、イテラブルなオブジェクトでも使用できます。
イテラブルなオブジェクトには、NodeListやargumentsなどのArrayライクなオブジェクトや、イテレータ、ジェネレータなどがあります。
for-of文は、ES2015で既定されました。

構文
for ( 仮変数 of 配列 ) {
  繰り返し処理
}

サンプル

for-of.js
const array = ['bread', 'egg', 'cheese'];
for (const value of array) {
  console.log(value);
  //「bread」「egg」「cheese」
}

要素の値だけでなく、インデックスも処理に必要な場合は、配列のentriesメソッドを使用します。

for-of2.js
const array = ['bread', 'egg', 'cheese'];
for (const [i, v] of array.entries()) {
  console.log(`${i}: ${v}`);
  //「0: bread」「1: egg」「2: cheese」
}

また、for-of文では、分割代入を使用することができます。

for-of3.js
const array = [
  {bread:100, egg:120, cheese:200},
  {bread:101, egg:121, cheese:201},
  {bread:102, egg:122, cheese:202},
];
for (const {egg} of array) {
  console.log(`egg: ${egg}`);
  //「egg: 120」「egg: 121」「egg: 122」
}

while文：汎用

while文は、条件式が満たされている間、繰り返し処理を実行します。
条件式を判定するタイミングは、ループの初めです（前置判定）。
最初のループの時点で、条件式が満たされていない場合は、ループ処理は一度も実行されません。
また、while(true){処理}とすると、無限ループになります。

構文
while ( 条件式 ) {
  繰り返し処理
}

サンプル

while.js
let x = 0;
while (x < 3) {
  console.log(x++);
  //「0」「1」「2」
}

do-while文：汎用（後置判定）

do-while文も、while文と同様、条件式が満たされている間、繰り返し処理を実行します。
条件式を判定するタイミングは、ループの終わりです（後置判定）。
最初のループの時点で、条件式が満たされていない場合でも、ループ処理が一度だけ実行されます。

構文
do {
  繰り返し処理
} while( 条件式 );

サンプル

do-while.js
let x = 0;
do {
  console.log(x++);
  //「0」「1」「2」
} while(x < 3);

まとめ

JavaScriptのループ文について、解説しました。
JavaScriptには、for文、for-in文、for-of文、while文、do-while文の、5つのループ文があります。
それぞれの用途は、以下のようになります。

  • for文：繰り返し回数を指定するループ処理で使用する。
  • for-in文：オブジェクトで使用する。
  • for-of文：配列やイテラブルオブジェクトで使用する。
  • while文：上記以外で使用する（汎用）。
  • while-do文：繰り返し処理後に、条件判定をしたい場合に使用する。

また、オブジェクトのプロパティに対するループ処理は、forEachメソッドなどのコールバック系メソッドを使用する方法もあります。