名前がわからない場合、JavaScriptオブジェクトのプロパティにどのようにアクセスしますか?


124

次のようなJavaScriptオブジェクトがあるとします。

var data = { foo: 'bar', baz: 'quux' };

プロパティ名でプロパティにアクセスできます。

var foo = data.foo;
var baz = data["baz"];

しかし、プロパティの名前がわからない場合、これらの値を取得することは可能ですか?これらのプロパティの無秩序な性質は、それらを区別することを不可能にしますか?

私の場合、関数が一連の名前と値のペアを受け入れる必要があるが、プロパティの名前が変更される可能性がある状況について具体的に考えています。

これまでのところ、これを行う方法についての私の考えは、データと共にプロパティの名前を関数に渡すことですが、これはハックのように感じます。可能であれば、これを内省して行いたいと思います。

回答:


144

次のようにキーをループできます。

for (var key in data) {
  console.log(key);
}

これは「名前」と「値」を記録します。

より複雑なオブジェクトタイプ(元の質問のような単純なハッシュのようなオブジェクトだけではない)がある場合は、オブジェクトのプロトタイプのキーではなく、オブジェクト自体に属するキーのみをループする必要があります。

for (var key in data) {
  if (data.hasOwnProperty(key)) {
    console.log(key);
  }
}

お気づきのように、キーは特定の順序であるとは限りません。これが以下とどのように異なるかに注意してください。

for each (var value in data) {
  console.log(value);
}

この例では、値をループ処理するため、とを記録Property Name0ます。注意:for each構文はほとんどFirefoxでのみサポートされており、他のブラウザではサポートされていません。

ターゲットブラウザがES5をサポートしている場合、またはサイトにes5-shim.js(推奨)が含まれている場合は、次のものも使用できますObject.keys

var data = { Name: 'Property Name', Value: '0' };
console.log(Object.keys(data)); // => ["Name", "Value"]

とループしArray.prototype.forEachます:

Object.keys(data).forEach(function (key) {
  console.log(data[key]);
});
// => Logs "Property Name", 0

あなたはそれを最後のものにし、実際にそれを手放したのですか?よくできました... =)
nickl- 2012

これはFirefox(docs)に存在しますが、これは普遍的ではないという公平な点です。これについて言及するために回答を更新します。
Ron DeVera 2012

28
btwアラートはデバッグに適さない方法です。console.logを試してください
StackOverflowed

これは、質問されたときの最良の回答でしたが、新しいJSバージョンがより優れたツールを提供するようになったため、チェックマークを削除します。
Adam Lassek

65

古いバージョンのJavaScript(<ES5)では、for..inループを使用する必要があります。

for (var key in data) {
  if (data.hasOwnProperty(key)) {
    // do something with key
  }
}

ES5はObject.keysArray#forEachを導入し、これを少し簡単にします:

var data = { foo: 'bar', baz: 'quux' };

Object.keys(data); // ['foo', 'baz']
Object.keys(data).map(function(key){ return data[key] }) // ['bar', 'quux']
Object.keys(data).forEach(function (key) {
  // do something with data[key]
});

ES2017が紹介Object.valuesObject.entriesます。

Object.values(data) // ['bar', 'quux']
Object.entries(data) // [['foo', 'bar'], ['baz', 'quux']]

1
これが実際に質問に答えます。よくできました@Adam Lassek、とてもよくできました。
nickl- 2012

オブジェクトのキーとして「名前」と「値」の両方を使用することは誤解を招きます。この関数は、値ではなく、リスト内のキーのみを返します。{name1: 'value1'、name2: 'value2'}は初心者の混乱を避けます。Object.keys(data); // ['name1'、 'name2']
James Nicholson

2
@JamesNicholson私は同意し、混乱を少なくするために編集しました。
アダムLassek


4

オブジェクトのすべての共有プロトタイプメソッドとプロパティを使用せずに、オブジェクトのインスタンスの特定のプロパティを調べたい場合があります。

 Obj.prototype.toString= function(){
        var A= [];
        for(var p in this){
            if(this.hasOwnProperty(p)){
                A[A.length]= p+'='+this[p];
            }
        }

    return A.join(', ');
}

3
function getDetailedObject(inputObject) {
    var detailedObject = {}, properties;

    do {
        properties = Object.getOwnPropertyNames( inputObject );
        for (var o in properties) {
            detailedObject[properties[o]] = inputObject[properties[o]];
        }
    } while ( inputObject = Object.getPrototypeOf( inputObject ) );

    return detailedObject;
}

これは、新しいオブジェクトのすべてのプロパティとその値(継承または所有、列挙可能かどうか)を取得します。元のオブジェクトはそのままです。これで、新しいオブジェクトを使用してトラバースできます

var obj = { 'b': '4' }; //example object
var detailedObject = getDetailedObject(obj);
for(var o in detailedObject) {
    console.log('key: ' + o + '   value: ' + detailedObject[o]);
}

1
var obj = {
 a: [1, 3, 4],
 b: 2,
 c: ['hi', 'there']
 }
for(let r in obj){  //for in loop iterates all properties in an object
 console.log(r) ;  //print all properties in sequence
 console.log(obj[r]);//print all properties values
}

この答えはOPに必要なものを提供しますが、あなたが何をしているか、そしてOPがそれを使用する理由の簡単な説明がいいでしょう、.hasOwnProperty()for inを使用してオブジェクトを反復するときも忘れないでください。
ムハンマドオメルアスラム

おかげで、.hasOwnProperty()はオブジェクトを反復処理しますが、条件をチェックするために反復処理しますが、それを使用してオブジェクトのすべてのプロパティを出力することはできません。間違っていれば訂正してください。
Mayank_VK

このhasOwnProperty()メソッドはboolean、オブジェクトが指定されたプロパティを(それを継承するのではなく)独自のプロパティとして持っているかどうかを示すを返します。この例を
Muhammad Omer Aslam

1

Object.keys()を使用できます。「これは、特定のオブジェクトの列挙可能なプロパティ名の配列を、通常のループと同じ順序で返します。」

の代わりに任意のオブジェクトを使用できますstats

var stats = {
  a: 3,
  b: 6,
  d: 7,
  erijgolekngo: 35
}
/*  this is the answer here  */
for (var key in Object.keys(stats)) {
  var t = Object.keys(stats)[key];
  console.log(t + " value =: " + stats[t]);
}


説明を追加していただけますか?
キース・ピンソン2013年

Object.keys( stats )[key]意味がありません、常にになりますundefined
Adam Lassek、2015年

-2
var attr, object_information='';

for(attr in object){

      //Get names and values of propertys with style (name : value)
      object_information += attr + ' : ' + object[attr] + '\n'; 

   }


alert(object_information); //Show all Object

これは、受け入れられた回答に何も追加せず、可能な限り最も有用でない方法で情報を提示します。また、継承されたプロパティは考慮されません。
Adam Lassek 2013
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.