Mögliches Duplikat: Iterate over Object Literal Values
Ich habe ein Objekt in JavaScript:
var object = someobject;
Object { aaa=true, bbb=true, ccc=true }
Wie kann ich das jeweils verwenden?
object.each(function(index, value)) {
console.log(value);
}
Funktioniert nicht.
Ein Javascript-Objekt hat keine Standard-.each-Funktion. jQuery bietet eine Funktion. Siehe http://api.jquery.com/jQuery.each/ Die folgende Funktion sollte funktionieren
$.each(object, function(index, value) {
console.log(value);
});
Eine andere Möglichkeit wäre die Verwendung von Vanilla Javascript mit den Funktionen Object.keys()
und Array .map()
wie folgt
Object.keys(object).map(function(objectKey, index) {
var value = object[objectKey];
console.log(value);
});
Siehe https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Object/keys und https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Diese sind in der Regel besser als die Verwendung einer normalen Javascript for-Schleife, es sei denn, Sie verstehen wirklich die Auswirkungen der Verwendung einer normalen for-Schleife und sehen Verwendung für it's spezifische Eigenschaften wie Schleifen über die Eigenschaft Kette.
Aber normalerweise funktioniert eine for-Schleife nicht besser als jQuery
oder Object.keys().map()
. Ich werde im Folgenden auf zwei mögliche Probleme bei der Verwendung einer einfachen for-Schleife eingehen.
Richtig, wie auch in anderen Antworten erwähnt, wäre eine einfache Javascript-Alternative
for(var index in object) {
var attr = object[index];
}
Dabei gibt es zwei mögliche Probleme:
1 . Sie wollen überprüfen, ob das Attribut, das Sie finden, vom Objekt selbst stammt und nicht von einer höheren Stufe der Prototypenkette. Dies kann mit der Funktion hasOwnProperty
wie folgt überprüft werden
for(var index in object) {
if (object.hasOwnProperty(index)) {
var attr = object[index];
}
}
Siehe https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty für weitere Informationen.
Die Funktionen jQuery.each
und Object.keys
kümmern sich automatisch darum.
2 . Ein weiteres potenzielles Problem bei einer einfachen for-Schleife ist das des Geltungsbereichs und der Nichtverschlüsse. Das ist ein bisschen kompliziert, aber nehmen Sie zum Beispiel den folgenden Code. Wir haben eine Reihe von Schaltflächen mit den IDs button0, button1, button2 usw., und wir wollen einen onclick auf sie setzen und ein console.log
wie folgt erstellen:
<button id='button0'>click</button>
<button id='button1'>click</button>
<button id='button2'>click</button>
var messagesByButtonId = {"button0" : "clicked first!", "button1" : "clicked middle!", "button2" : "clicked last!"];
for(var buttonId in messagesByButtonId ) {
if (messagesByButtonId.hasOwnProperty(buttonId)) {
$('#'+buttonId).click(function() {
var message = messagesByButtonId[buttonId];
console.log(message);
});
}
}
Wenn wir nach einiger Zeit auf eine der Schaltflächen klicken, erhalten wir in der Konsole immer die Meldung "Zuletzt geklickt!" und niemals "Zuerst geklickt!" oder "Mitte geklickt!". Warum? Weil zu dem Zeitpunkt, an dem die onclick-Funktion ausgeführt wird, die Variable "messageByButtonId[buttonId]" angezeigt wird, und zwar zu diesem Zeitpunkt mit der Variable "buttonId". Und da die Schleife zu diesem Zeitpunkt beendet ist, ist die Variable buttonId
immer noch "button2" (der Wert, den sie während der letzten Schleifeniteration hatte), und so wird messagesByButtonId[buttonId]
zu messagesByButtonId["button2"]
, d.h. "zuletzt geklickt!".
Siehe https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures für weitere Informationen über Schließungen. Insbesondere der letzte Teil dieser Seite, der unser Beispiel behandelt.
Auch hier lösen jQuery.each
und Object.keys().map()
dieses Problem automatisch für uns, denn es stellt uns eine Funktion(index, value)
(mit Closure) zur Verfügung, so dass wir sicher sein können, sowohl index als auch value zu verwenden und uns darauf verlassen können, dass sie den Wert haben, den wir erwarten.
for(var key in object) {
console.log(object[key]);
}
var object = { "a": 1, "b": 2};
$.each(object, function(key, value){
console.log(key + ": " + object[key]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
//output
a: 1
b: 2