Wie greife ich auf Eigenschaften eines Javascript-Objekts zu, wenn ich die Namen nicht kenne?

124

Angenommen, Sie haben ein Javascript-Objekt wie dieses:

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

Sie können auf die Eigenschaften über den Eigenschaftsnamen zugreifen:

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

Aber ist es möglich, diese Werte zu erhalten, wenn Sie den Namen der Eigenschaften nicht kennen? Macht es die ungeordnete Natur dieser Eigenschaften unmöglich, sie auseinander zu halten?

In meinem Fall denke ich speziell an eine Situation, in der eine Funktion eine Reihe von Name-Wert-Paaren akzeptieren muss, die Namen der Eigenschaften sich jedoch ändern können.

Meine Gedanken dazu sind, die Namen der Eigenschaften zusammen mit den Daten an die Funktion zu übergeben, aber das fühlt sich wie ein Hack an. Ich würde es vorziehen, wenn möglich mit Selbstbeobachtung zu tun.

Adam Lassek
quelle

Antworten:

144

Sie können Schlüssel wie folgt durchlaufen:

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

Dies protokolliert "Name" und "Wert".

Wenn Sie einen komplexeren Objekttyp haben (nicht nur ein einfaches Hash-ähnliches Objekt, wie in der ursprünglichen Frage), möchten Sie nur Schlüssel durchlaufen, die zum Objekt selbst gehören, im Gegensatz zu Schlüsseln im Prototyp des Objekts :

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

Wie Sie bereits bemerkt haben, ist nicht garantiert, dass die Schlüssel in einer bestimmten Reihenfolge vorliegen. Beachten Sie, wie sich dies von folgenden unterscheidet:

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

In diesem Beispiel wird eine Schleife durch Werte, so würde es log Property Nameund 0. NB: Die for eachSyntax wird meist nur in Firefox unterstützt, nicht jedoch in anderen Browsern.

Wenn Ihre Zielbrowser ES5 unterstützen oder Ihre Site enthält es5-shim.js(empfohlen), können Sie auch Folgendes verwenden Object.keys:

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

und Schleife mit Array.prototype.forEach:

Object.keys(data).forEach(function (key) {
  console.log(data[key]);
});
// => Logs "Property Name", 0
Ron DeVera
quelle
Hast du dir gerade das letzte ausgedacht und bist damit tatsächlich durchgekommen? Gut gemacht ... =)
Nickl
Dies existiert in Firefox ( docs ), aber fairerweise ist es nicht universell. Ich werde die Antwort aktualisieren, um dies zu erwähnen.
Ron DeVera
28
btw Alarm ist eine schlechte Art und Weise zu debuggen Dingen, versucht console.log
StackOverflowed
Dies war die beste Antwort, als die Frage gestellt wurde, aber ich entferne das Häkchen, da spätere JS-Versionen bessere Tools bereitgestellt haben.
Adam Lassek
65

Alte Versionen von JavaScript (<ES5) erfordern die Verwendung einer for..inSchleife:

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

ES5 führt Object.keys und Array # forEach ein , was dies etwas einfacher macht:

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 führt ein Object.valuesund Object.entries.

Object.values(data) // ['bar', 'quux']
Object.entries(data) // [['foo', 'bar'], ['baz', 'quux']]
Adam Lassek
quelle
1
Nun beantwortet dies tatsächlich die Frage, gut gemacht @Adam Lassek, sehr schön gemacht.
Nickl
Es ist irreführend, sowohl 'Name' als auch 'Wert' als Objektschlüssel zu verwenden. Diese Funktion gibt nur die Schlüssel in einer Liste zurück, nicht die Werte. {name1: 'value1', name2: 'value2'} vermeidet Verwirrung für Anfänger. Object.keys (Daten); // ['name1', 'name2']
James Nicholson
2
@ JamesNicholson Ich stimme zu, bearbeitet, um weniger verwirrend zu sein.
Adam Lassek
10
for(var property in data) {
    alert(property);
}
karim79
quelle
4

Oft möchten Sie die besonderen Eigenschaften einer Instanz eines Objekts untersuchen, ohne alle gemeinsamen Prototypmethoden und -eigenschaften:

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

    return A.join(', ');
}
kennebec
quelle
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;
}

Dadurch werden alle Eigenschaften und ihre Werte (geerbt oder besessen, aufzählbar oder nicht) in einem neuen Objekt abgerufen. Originalobjekt ist unberührt. Jetzt kann ein neues Objekt mit durchlaufen werden

var obj = { 'b': '4' }; //example object
var detailedObject = getDetailedObject(obj);
for(var o in detailedObject) {
    console.log('key: ' + o + '   value: ' + detailedObject[o]);
}
Shishir Arora
quelle
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
}
Mayank_VK
quelle
Wo diese Antwort liefert, was vom OP verlangt wird, aber eine kleine Beschreibung dessen, was Sie tun und warum das OP es verwenden sollte, wäre schön. Vergessen Sie auch nicht, .hasOwnProperty()wenn Sie for in verwenden, um ein Objekt zu iterieren.
Muhammad Omer Aslam
Vielen Dank, ich bin damit einverstanden, dass .hasOwnProperty () das Objekt iteriert, es jedoch iteriert, um eine Bedingung zu überprüfen. Mit dieser Option können jedoch nicht alle Eigenschaften eines Objekts gedruckt werden. Korrigieren Sie mich, wenn ich falsch liege.
Mayank_VK
Die hasOwnProperty()Methode gibt eine booleanAngabe zurück, ob das Objekt die angegebene Eigenschaft als eigene Eigenschaft hat (im Gegensatz zur Vererbung) . siehe dieses Beispiel
Muhammad Omer Aslam
1

Sie können Object.keys () verwenden , "das ein Array der eigenen aufzählbaren Eigenschaftsnamen eines bestimmten Objekts in derselben Reihenfolge zurückgibt, wie wir es mit einer normalen Schleife erhalten."

Sie können jedes Objekt anstelle von 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]);
}

Cloid J. Green
quelle
Könnten Sie weitere Erklärungen hinzufügen?
Keith Pinson
Object.keys( stats )[key]macht keinen Sinn, wird es immer sein undefined.
Adam Lassek
-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
isaax2
quelle
Dies fügt der akzeptierten Antwort nichts hinzu und präsentiert die Informationen auf die am wenigsten nützliche Weise. Vererbte Eigenschaften werden nicht berücksichtigt.
Adam Lassek