for...in文を使った繰り返し処理

広告

JavaScript で繰り返し処理を行う方法のひとつである for...in 文の使い方について解説します。 for...in 文ではオブジェクトに含まれるプロパティ名を順に取得します。

for...in文の基本書式

for...in 文ではオブジェクトに含まれるプロパティ名を順に取得ことができます。書式は次の通りです。

for (変数名 in オブジェクト){
  実行する文1;
  実行する文2;
  ...
}

繰り返し実行する文が 1 つだけだった場合にはブロックを表す {} を省略することができます。

for (変数名 in オブジェクト)
  実行する文;

例えば次のようにオブジェクトリテラルを例に試してみます。

const fruit = {orange:170, apple:90, lemon:110};

このオブジェクトには 3 つのプロパティが含まれており、 for...in 文を使うことでそれぞれのプロパティ名である orange, apple, lemon を順に取得します。次のサンプルをみてください。

const fruit = {orange:170, apple:90, lemon:110};

for (let i in fruit){
  console.log("fruit." + i + ' = ' + fruit[i]);
}

console.log('end');

for...in 文ではまずオブジェクトを評価します。

for (let i in fruit){
  console.log("fruit." + i + ' = ' + fruit[i]);
}

オブジェクトが null または undefined だった場合には for...in 文の次の処理へ移ります。それ以外だった場合にはオブジェクトからプロパティ名が変数に格納され、そのあとでブロック内の処理が実行されます。

for (let i in fruit){
  console.log("fruit." + i + ' = ' + fruit[i]);
}

この時、プロパティ名は文字列の値として変数に格納されます。そのため、プロパティ名を使ってプロパティの値を参照する場合は、 オブジェクト名.プロパティ名 の形式ではなく オブジェクト名[プロパティ名] の形式を使用する必要があります。

※ プロパティへのアクセス方法に関する詳細は「プロパティの値の取得と新しい値の代入」を参照されてください。

ブロック内の処理をすべて実行したら、再び最初に戻りオブジェクトの評価を行います。オブジェクトが null を返すまで繰り返します。

実際に先ほどのサンプルを実行してみると、次のようにコンソールに出力されます。

const fruit = {orange:170, apple:90, lemon:110};

for (let i in fruit){
  console.log("fruit." + i + ' = ' + fruit[i]);
}

console.log('end');

--> fruit.orange = 170
    fruit.apple = 90
    fruit.lemon = 110
    end

for...in文の基本書式(1)

for...in文を配列に対して使用する

for...in文はオブジェクトのひとつである配列に対しても使用することができます。配列の場合はプロパティ名ではなくインデックスを順に取得します。

次のサンプルをみてください。

const fruit = ['orange', 'apple', 'lemon'];

for (let i in fruit){
  console.log("fruit." + i + ' = ' + fruit[i]);
}

console.log('end');
--> fruit.0 = orange
    fruit.1 = apple
    fruit.2 = lemon
    end

for...in文を配列に対して使用する(1)

配列のインデックスを順に取得し繰り返し処理が行われています。

-- --

JavaScript で繰り返し処理を行う方法のひとつである for...in 文の使い方について解説しました。

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。