Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

  1. トップページ
  2. JavaScript中級編 - for...in文 オブジェクトの繰り返し処理

for...in文 オブジェクトの繰り返し処理

みなさまどうも。

前回はオブジェクトについて色々とお疲れ様でした。引き続きオブジェクトに関係する処理『for...in文』(ふぉーいんぶん)をやっていきたいと思います。

『for...in文』は『for文』と同じような感じで繰り返し処理を実行できる構文です。『for』文は配列の各要素に対しての繰り返し処理が主な使い方でしたね。それに対して『for...in文』はオブジェクトの各プロパティに対しての繰り返し処理となります。

ではやっていきましょう。

まず記述方法ですが以下のような感じになります。

var x = {
	"hoge": 0,
	"hoge1": 1,
	"hoge2": 2
};

for(var elem in x){
	console.log(elem);
}

上記はまずオブジェクト『x』を定義し、適当にプロパティを作成しています。

そのあとに『for(var elem in x){}』という感じで続けていますね。ここが『for...in文』になります。

では『for...in文』の記述方法を確認していきましょう。ちょっと日本語で書いてみますね。

for(var 変数 in オブジェクト){
	// ここに処理
}

こんな感じになります。オブジェクトのプロパティの数だけ処理が繰り返し実行されます。

先ほどのサンプルの場合だとオブジェクトは『x』で変数が『elem』になりますので以下のようになりますね。

for(var elem in x){
	// ここに処理
}

そして繰り返し処理が行われる度に変数にはオブジェクトのプロパティ名(キー)が代入されます。値ではないので注意です。なので先程のサンプルを実行させるとコンソールには『hoge』、『hoge1』、『hoge2』と出力されます。

var x = {
	"hoge": 0,
	"hoge1": 1,
	"hoge2": 2
};

for(var elem in x){
	console.log(elem); // 『hoge』、『hoge1』、『hoge2』と出力されます。
}

値を出力させたい場合は以下のように記述します。

var x = {
	"hoge": 0,
	"hoge1": 1,
	"hoge2": 2
};

for(var elem in x){
	console.log(x[elem]); // 『0』、『1』、『2』と出力されます。
}

この『x[elem]』という部分は覚えておくと良いです。日本語で書くと『オブジェクト[変数]』って感じですね。値を取り出したい場合はこのパターンがよく使われます。

さて、基本的な記述方法を学んだところでとても大きな問題点を紹介したいと思います。

JavaScriptの標準が定められている『ECMAScript』というものがあるのですが、その中に『for...in文でのプロパティが代入されていく順番』に対しての規定がありません。

つまりJavaScriptでの『for...in文』は処理の順番が担保されないということになります。

処理の順番が担保されない、ということはこういうことになります。以下は『for文』での実装例です。

var x = [0, 1, 2];
for(var i = 0; i <= x.length -1; ++i){
    console.log(i); // 『0』、『1』、『2』と出力されます。
}

これを実行させると必ず『0』、『1』、『2』の順番で出力されます。仮に『for文』の処理の順番が担保されないとすると、これが『0』、『2』、『1』といった順番で出力がされる可能性があるということです。

なので『for...in文』で順序が関係する繰り返し処理を構築する場合はちょっと危険ですね。その場合は『for文』を使用するようにしましょう。

『for...in文』の実際のブラウザでの動作状況をみてみると昨今のほぼ全てのブラウザで、ちゃんと最初に定義されたプロパティから順番に処理を行うようになっています。

しかし、本家の『ECMAScript』に処理の順番に対する規定がないことを考えるとちょっと怖い感じがあるので処理の順序が関係する処理を構築したい場合はオブジェクトではなく配列で定義し、『for文』を使うようにした方が良いかもしれません。

『for文』と同じく『for...in文』も一行で記述することができます。

var x = {
    "hoge": 0,
    "hoge1": 1
};
for(var elem in x) console.log(x[elem]);

前回の記事でJavaScriptでの配列の実態はオブジェクトである、というお話がありました。

なら配列も『for...in文』で動くんじゃね?って考えた方、大正解です。JavaScriptでは配列からでも『for...in文』を実行させることができます。以下のサンプルをみてみましょう。

var x = [0, 1, 2];

for(var elem in x){
	console.log(elem + ":" + x[elem]);
}

このサンプルを実行すると『0:0』、『1:1』、『2:2』と3回出力されます。ただし、『for...in文』の処理の順番が担保されないことを考えるとやはり配列に対する繰り返し処理は『for文』で処理を行った方が良いでしょう。

と『for...in文』に関してはこのような感じになりますね。

JavaScriptでの『for...in文』は先ほど解説したとおり処理の順番が担保されませんので使い勝手が非常に悪く、使用頻度はかなり少なめです。

ほとんどのJavaScriptでの繰り返し処理は配列をかませた『for文』で代用できます。なので『for...in文』に関しては忘れてしまったら検索する、くらいのノリで十分です。

続いての記事では『getElementsByTagName()』を使ってみたいと思います。ではまたお会いしましょう。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。