JavaScriptの繰り返し:for in

for文やwhile文などの条件式では、条件を使って繰り返し処理を行うかどうかを判断していましたが、for ... in文ではオブジェクトの中にあるプロパティの数だけ処理を繰り返します。そのため、条件式はいりません。

for ... in文の書き方

for (var  変数名  in オブジェクト)
処理;
for (var 変数名 in オブジェクト){
    処理;
    処理2;
    処理3;
}

for文の()の中で変数の宣言を行い、その変数の中にオブジェクトの中にあるどれか1つのプロパティを取り出して格納します。このプロパティのうち1つを格納した変数を使って処理を行います。

サンプルコード

花子さんの情報が表示される処理を見てみましょう。

var hanako = { 名前: '花子', 年齢:'10歳', メールアドレス: 'hanako@example.com' };

for(var element in hanako){
    console.log("花子の"+ element +"は"+ hanako[element] +"です。")
}

処理の流れ

オブジェクトを生成し、その中に「名前」「年齢」「メールアドレス」というプロパティが格納されています。そしてfor ... in文の中で宣言したelementという変数の中にこのプロパティのうち1つが格納され、その中に入っているプロパティを出力します。出力されてないプロパティがある場合はまた同じ処理を繰り返します。
また、「オブジェクト名[変数名]」でプロパティの値を参照をすることができます。

実行結果

花子の名前は花子です。
花子の年齢は10歳です。
花子のメールアドレスはhanako@example.comです。

3つあるプロパティとプロパティの値がすべて表示されました。


イベント

2017/12/05(火)
Design Thinking Square