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文』を使用するようにしましょう。

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

var x = [0, 1, 2];

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

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

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

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

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

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

著者が愛する小型哺乳類

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

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

トップページへ

前の記事へ

次の記事へ

Tweet

シェア