シェアする
for...in: Iterating Over Objects - Japanese Only
みなさまどうも。
前回はオブジェクトについて色々とお疲れ様でした。引き続きオブジェクトに関係する処理『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()』を使ってみたいと思います。ではまたお会いしましょう。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
