Wie kann ich ein JavaScript-Objekt in einer Schleife durchlaufen oder aufzählen?

Question

Ich habe ein JavaScript-Objekt wie das folgende:

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

Jetzt möchte ich eine Schleife durch alle p Elemente ( p1 , p2 , p3 ...) und ihre Schlüssel und Werte erhalten. Wie kann ich das tun?

Ich kann das JavaScript-Objekt bei Bedarf ändern. Mein ultimatives Ziel ist es, eine Schleife durch einige Schlüssel-Wert-Paare zu ziehen, und wenn möglich, möchte ich die Verwendung von eval .

Answer 1

Nur JavaScript-Code ohne Abhängigkeiten:

var p = {"p1": "value1", "p2": "value2", "p3": "value3"};
keys = Object.keys(p);   // ["p1", "p2", "p3"]

for(i = 0; i < keys.length; i++){
  console.log(keys[i] + "=" + p[keys[i]]);   // p1=value1, p2=value2, p3=value3
}

Answer 2

Mehrere Wege zur Iteration von Objekten in Javascript

Verwendung von für...in Schleife

 var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};
for (let key in p){
   if(p.hasOwnProperty(key)){
     console.log(`${key} : ${p[key]}`)
   }
}

Verwendung von für...von Schleife

 var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};
for (let key of Object.keys(p)){
     console.log(`key: ${key} & value: ${p[key]}`)
}

Verwendung von forEach() mit Objekt.Schlüssel , Objekt.Werte , Objekt.Einträge

var p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};
Object.keys(p).forEach(key=>{
   console.log(`${key} : ${p[key]}`);
});
Object.values(p).forEach(value=>{
   console.log(value);
});
Object.entries(p).forEach(([key,value])=>{
    console.log(`${key}:${value}`)
})

Answer 3

Schleifen können ziemlich interessant sein, wenn man reines JavaScript verwendet. Es scheint, dass nur ECMA6 (neue JavaScript-Spezifikation von 2015) die Schleifen in den Griff bekommen hat. Während ich dies schreibe, haben sowohl Browser als auch beliebte integrierte Entwicklungsumgebungen (IDE) leider immer noch Probleme, die neuen Funktionen vollständig zu unterstützen.

Auf den ersten Blick sieht eine JavaScript-Objektschleife wie vor ECMA6 aus:

for (var key in object) {
  if (p.hasOwnProperty(key)) {
    var value = object[key];
    console.log(key); // This is the key;
    console.log(value); // This is the value;
  }
}

Auch, ich weiß, das ist außerhalb des Anwendungsbereichs mit dieser Frage, aber im Jahr 2011, ECMAScript 5.1 hinzugefügt die forEach Methode nur für Arrays, die im Grunde eine neue, verbesserte Methode zum Durchlaufen von Arrays bietet, während für nicht iterierbare Objekte weiterhin die alte, umständliche und verwirrende for Schleife. Aber das Seltsame ist, dass diese neue forEach Methode unterstützt nicht break was zu allen möglichen anderen Problemen führte.

Grundsätzlich im Jahr 2011 gibt es nicht eine echte solide Art und Weise in JavaScript Schleife andere als das, was viele populäre Bibliotheken (jQuery, Underscore, etc.) beschlossen, neu zu implementieren.

Ab 2015 haben wir nun eine bessere Möglichkeit, Schleifen (und Unterbrechungen) für jeden Objekttyp (einschließlich Arrays und Strings) zu erstellen. Hier ist, wie eine Schleife in JavaScript schließlich aussehen wird, wenn die Empfehlung wird Mainstream:

for (let [key, value] of Object.entries(object)) {
    console.log(key); // This is the key;
    console.log(value); // This is the value;
}

Beachten Sie, dass die meisten Browser den obigen Code ab dem 18. Juni 2016 nicht mehr unterstützen werden. Selbst in Chrome müssen Sie dieses spezielle Flag aktivieren, damit es funktioniert: chrome://flags/#enable-javascript-harmony

Bis dies zum neuen Standard wird, kann die alte Methode weiterhin verwendet werden, aber es gibt auch Alternativen in gängigen Bibliotheken oder sogar leichte Alternativen für diejenigen, die keine dieser Bibliotheken verwenden.

Answer 4

Ein guter Weg für die Schleifenbildung auf einem aufzählbaren JavaScript-Objekt, der für ReactJS genial und üblich sein könnte, ist die Verwendung von Object.keys o Object.entries mit Hilfe von map Funktion. wie unten:

// assume items:

const items = {
  first: { name: 'phone', price: 400 },
  second: { name: 'tv', price: 300 },
  third: { name: 'sofa', price: 250 },
};

Für die Schleifenbildung und die Anzeige einiger UI auf ReactJS verhalten sich wie unten:

~~~
<div>
  {Object.entries(items).map(([key, ({ name, price })]) => (
    <div key={key}>
     <span>name: {name}</span>
     <span>price: {price}</span>
    </div>
  ))}
</div>

Eigentlich verwende ich die Destrukturierungszuweisung zweimal, einmal, um die key einmal für das Erhalten name y price .

Answer 5

Seit ES06 können Sie die Werte eines Objekts als Array mit

let arrValues = Object.values( yourObject) ;

Es gibt ein Array mit den Objektwerten zurück und extrahiert keine Werte aus Prototype!

MDN DOCS Objekt.Werte()

und für die Schlüssel (die bereits vor mir hier beantwortet wurden)

let arrKeys   = Object.keys(yourObject);