wake-up-neo.com

Wie kann man ein einfaches JavaScript-Objekt mit den Objekten als Mitglieder durchlaufen?

Wie kann ich alle Elemente in einem JavaScript-Objekt durchlaufen, einschließlich der Werte, die Objekte sind.

Wie könnte ich zum Beispiel durchlaufen (für jeweils "your_name" und "your_message")?

var validation_messages = {
    "key_1": {
        "your_name": "jimmy",
        "your_msg": "hello world"
    },
    "key_2": {
        "your_name": "billy",
        "your_msg": "foo equals bar"
    }
}
javascript
1361
edt
for (var key in validation_messages) {
    // skip loop if the property is from prototype
    if (!validation_messages.hasOwnProperty(key)) continue;

    var obj = validation_messages[key];
    for (var prop in obj) {
        // skip loop if the property is from prototype
        if(!obj.hasOwnProperty(prop)) continue;

        // your code
        alert(prop + " = " + obj[prop]);
    }
}
1925
AgileJon

Unter ECMAScript 5 können Sie Object.keys() und Array.prototype.forEach() kombinieren:

var obj = {
  first: "John",
  last: "Doe"
};

//
//	Visit non-inherited enumerable keys
//
Object.keys(obj).forEach(function(key) {

  console.log(key, obj[key]);

});

663
Axel Rauschmayer

Das Problem damit

for (var key in validation_messages) {
   var obj = validation_messages[key];
   for (var prop in obj) {
      alert(prop + " = " + obj[prop]);
   }
}

ist, dass Sie auch den Prototyp des primitiven Objekts durchlaufen.

Mit diesem werden Sie es vermeiden:

for (var key in validation_messages) {
   if (validation_messages.hasOwnProperty(key)) {
      var obj = validation_messages[key];
      for (var prop in obj) {
         if (obj.hasOwnProperty(prop)) {
            alert(prop + " = " + obj[prop]);
         }
      }
   }
}
374
Chango

In ES6 können Sie ein Objekt wie folgt durchlaufen: (mit Pfeilfunktion )

Object.keys(myObj).forEach(key => {
    console.log(key);          // the name of the current key.
    console.log(myObj[key]);   // the value of the current key.
});

jsbin

In ES7 können Sie Object.entries anstelle von Object.keys verwenden und ein Objekt wie folgt durchlaufen:

Object.entries(myObj).forEach(([key, val]) => {
    console.log(key);          // the name of the current key.
    console.log(val);          // the value of the current key.
});

Das obige würde auch als one-liner funktionieren:

Object.keys(myObj).forEach(key => console.log(key, myObj[key]));

jsbin

Wenn Sie auch verschachtelte Objekte durchlaufen möchten, können Sie die Funktion recursive (ES6) verwenden:

const loopNestedObj = (obj) => {
  Object.keys(obj).forEach(key => {
    if (obj[key] && typeof obj[key] === 'object') loopNestedObj(obj[key]);  // recurse.
    else console.log(key, obj[key]);  // or do something with key and val.
  });
};

jsbin

Gleiche Funktion wie oben, jedoch mit ES7 Object.entries anstelle von Object.keys:

const loopNestedObj = (obj) => {
  Object.entries(obj).forEach(([key, val]) => {
    if (val && typeof val === 'object') loopNestedObj(val);  // recurse.
    else console.log(key, val);  // or do something with key and val.
  });
};

Wenn Sie sich mit Funktionsprogrammierung beschäftigen, können Sie Object.keys/Object.entries verwenden, um das Objekt aufzulisten, die Werte dann verarbeiten und dann reduce() verwenden, um wieder in ein neues Objekt zu konvertieren.

const loopNestedObj = (obj) => 
  Object.keys(obj)
    // Use .filter(), .map(), etc. if you need.
    .reduce((newObj, key) => 
      (obj[key] && typeof obj[key] === 'object') ?
        {...newObj, [key]: loopNestedObj(obj[key])} :  // recurse.
        {...newObj, [key]: obj[key]},                  // Define value.
      {});
203
Rotareti

Verwenden von Underscore.js _.each :

_.each(validation_messages, function(value, key){
    _.each(value, function(value, key){
        console.log(value);
    });
});
93
Tim Santeford

Wenn Sie Rekursion verwenden, können Sie Objekteigenschaften mit beliebiger Tiefe zurückgeben.

function lookdeep(object){
    var collection= [], index= 0, next, item;
    for(item in object){
        if(object.hasOwnProperty(item)){
            next= object[item];
            if(typeof next== 'object' && next!= null){
                collection[index++]= item +
                ':{ '+ lookdeep(next).join(', ')+'}';
            }
            else collection[index++]= [item+':'+String(next)];
        }
    }
    return collection;
}

//example

var O={
    a:1, b:2, c:{
        c1:3, c2:4, c3:{
            t:true, f:false
        }
    },
    d:11
};
var lookdeepSample= 'O={'+ lookdeep(O).join(',\n')+'}';


/*  returned value: (String)
O={
    a:1, 
    b:2, 
    c:{
        c1:3, c2:4, c3:{
            t:true, f:false
        }
    },
    d:11
}

*/
54
kennebec

Diese Antwort ist eine Zusammenfassung der Lösungen, die in diesem .__ zur Verfügung gestellt wurden. post mit etwas performance Rückmeldungen . Ich denke es gibt 2 Anwendungsfälle und das OP haben nicht erwähnt, ob er auf die Schlüssel zugreifen muss, um sie verwenden zu können während des Schleifenprozesses.

I. auf die Schlüssel muss zugegriffen werden,

✔ die of- und Object.keys-Annäherung

let k;
for (k of Object.keys(obj)) {

    /*        k : key
     *   obj[k] : value
     */
}

✔ der in-Ansatz

let k;
for (k in obj) {

    /*        k : key
     *   obj[k] : value
     */
}

Verwenden Sie diese Option mit Vorsicht, da Prototyp-Eigenschaften von obj gedruckt werden könnten.

✔ der ES7-Ansatz

for (const [key, value] of Object.entries(obj)) {

}

Zum Zeitpunkt der Bearbeitung würde ich jedoch die ES7-Methode nicht empfehlen, da JavaScript viele Variablen intern initialisiert, um diese Prozedur zu erstellen (siehe die Rückmeldungen für Beweise). Es sei denn, Sie entwickeln keine große Anwendung, die es verdient Optimierung, dann ist es ok, aber wenn Optimierung Ihre Priorität ist, sollten Sie darüber nachdenken.

II. Wir müssen nur auf alle Werte zugreifen,

✔ die of- und Object.values-Annäherung

let v;
for (v of Object.values(obj)) {

}

Weitere Rückmeldungen zu den Tests:

  • Das Cachen von Object.keys oder Object.values Leistung ist vernachlässigbar

Zum Beispiel, 

const keys = Object.keys(obj);
let i;
for (i of keys) {
  //
}
// same as
for (i of Object.keys(obj)) {
  //
}

  • Im Fall Object.values scheint die Verwendung einer nativen for-Schleife mit zwischengespeicherten Variablen in Firefox etwas schneller zu sein als die Verwendung einer for...of-Schleife. Der Unterschied ist jedoch nicht so wichtig und Chrome läuft for...of schneller als die native for-Schleife. Daher würde ich empfehlen, for...of in jedem Fall (Object.values) zu verwenden (4. und 6. Test).

  • In Firefox ist die for...in-Schleife wirklich langsam. Wenn Sie also den Schlüssel während der Iteration zwischenspeichern möchten, sollten Sie Object.keys verwenden. Plus Chrome führt beide Strukturen mit gleicher Geschwindigkeit aus (erster und letzter Test). 

Sie können die Tests hier überprüfen: https://jsperf.com/es7-and-misc-loops

32
vdegenne

Ich weiß, es ist spät, aber ich habe 2 Minuten gebraucht, um diese optimierte und verbesserte Version von AgileJons Antwort zu schreiben:

var key, obj, prop, owns = Object.prototype.hasOwnProperty;

for (key in validation_messages ) {

    if (owns.call(validation_messages, key)) {

        obj = validation_messages[key];

        for (prop in obj ) {

            // using obj.hasOwnProperty might cause you headache if there is
            // obj.hasOwnProperty = function(){return false;}
            // but owns will always work 
            if (owns.call(obj, prop)) {
                console.log(prop, "=", obj[prop]);
            }

        }

    }

}
29
Azder
for(var k in validation_messages) {
    var o = validation_messages[k];
    do_something_with(o.your_name);
    do_something_else_with(o.your_msg);
}
27
chaos

p ist der Wert

for (var key in p) {
  alert(key + ' => ' + p[key]);
}

ODER 

Object.keys(p).forEach(key => { console.log(key, p[key]) })
11
Wesam
for(var key in validation_messages){
    for(var subkey in validation_messages[key]){
        //code here
        //subkey being value, key being 'yourname' / 'yourmsg'
    }
}
8
Dmitri Farkov

In ES7 können Sie Folgendes tun:

for (const [key, value] of Object.entries(obj)) {
  //
}
6
Kévin Berthommier

Hier kommt die verbesserte und rekursive Version von AgileJons Lösung ( demo ):

function loopThrough(obj){
  for(var key in obj){
    // skip loop if the property is from prototype
    if(!obj.hasOwnProperty(key)) continue;

    if(typeof obj[key] !== 'object'){
      //your code
      console.log(key+" = "+obj[key]);
    } else {
      loopThrough(obj[key]);
    }
  }
}
loopThrough(validation_messages);

Diese Lösung funktioniert für alle Arten von Tiefen.

5
JepZ

Andere Option:

var testObj = {test: true, test1: false};
for(let x of Object.keys(testObj)){
    console.log(x);
}
4
dude

ECMAScript-2017 wurde vor einem Monat fertiggestellt und führt Object.values ​​() ein. Jetzt können Sie das tun:

let v;
for (v of Object.values(validation_messages))
   console.log(v.your_name);   // jimmy billy
3
Chong Lip Phang

Ich denke, es lohnt sich, darauf hinzuweisen, dass jQuery dies mit $.each() gut aussieht.

Siehe: https://api.jquery.com/each/

Zum Beispiel:

$('.foo').each(function() {
    console.log($(this));
});

$(this) ist das einzige Element innerhalb des Objekts. Tauschen Sie $('.foo') in eine Variable, wenn Sie die Selector Engine von jQuery nicht verwenden möchten.

3
Daniel Dewhurst

Ich konnte die obigen Beiträge nicht dazu bringen, genau das zu tun, was ich wollte.

Nachdem ich mit den anderen Antworten hier rumgespielt hatte, habe ich das gemacht. Es ist hackig, aber es funktioniert!

Für dieses Objekt:

var myObj = {
    pageURL    : "BLAH",
    emailBox   : {model:"emailAddress", selector:"#emailAddress"},
    passwordBox: {model:"password"    , selector:"#password"}
};

... diesen Code:

// Get every value in the object into a separate array item ...
function buildArray(p_MainObj, p_Name) {
    var variableList = [];
    var thisVar = "";
    var thisYes = false;
    for (var key in p_MainObj) {
       thisVar = p_Name + "." + key;
       thisYes = false;
       if (p_MainObj.hasOwnProperty(key)) {
          var obj = p_MainObj[key];
          for (var prop in obj) {
            var myregex = /^[0-9]*$/;
            if (myregex.exec(prop) != prop) {
                thisYes = true;
                variableList.Push({item:thisVar + "." + prop,value:obj[prop]});
            }
          }
          if ( ! thisYes )
            variableList.Push({item:thisVar,value:obj});
       }
    }
    return variableList;
}

// Get the object items into a simple array ...
var objectItems = buildArray(myObj, "myObj");

// Now use them / test them etc... as you need to!
for (var x=0; x < objectItems.length; ++x) {
    console.log(objectItems[x].item + " = " + objectItems[x].value);
}

... produziert dies in der Konsole:

myObj.pageURL = BLAH
myObj.emailBox.model = emailAddress
myObj.emailBox.selector = #emailAddress
myObj.passwordBox.model = password
myObj.passwordBox.selector = #password
2
user1833875

var obj={
name:"SanD",
age:"27"
}
Object.keys(obj).forEach((key)=>console.log(key,obj[key]));

Um das JavaScript-Objekt zu durchlaufen, können wir forEach verwenden und zur Optimierung des Codes die Pfeilfunktion verwenden 

1
Sandip Bailkar

Die Lösung, die für mich funktioniert, ist folgende

_private.convertParams=function(params){
    var params= [];
    Object.keys(values).forEach(function(key) {
        params.Push({"id":key,"option":"Igual","value":params[key].id})
    });
    return params;
}
0
Jorge Santos Neill

Es gibt wenige Möglichkeiten, das zu tun ... 

1) 2 Schichten für ... in Schleife ...

for (let key in validation_messages) {
   const vmKeys = validation_messages[key];
   for (let vmKey in vmKeys) {
      console.log(vmKey + vmKeys[vmKey]);
   }
}

2) Verwenden von Object.key

Object.keys(validation_messages).forEach(key => {
   const vmKeys = validation_messages[key];
   Object.keys(vmKeys).forEach(key => {
    console.log(vmKeys + vmKeys[key]);
   });
});

3) Rekursive Funktion

const recursiveObj = obj => {
  for(let key in obj){
    if(!obj.hasOwnProperty(key)) continue;

    if(typeof obj[key] !== 'object'){
      console.log(key + obj[key]);
    } else {
      recursiveObj(obj[key]);
    }
  }
}

Und nenne es wie:

recursiveObj(validation_messages);
0
Alireza