Je nachdem, welche Browser Sie unterstützen müssen, kann dies auf verschiedene Arten erfolgen. Die überwiegende Mehrheit der Browser in freier Wildbahn unterstützt ECMAScript 5 (ES5). Beachten Sie jedoch, dass viele der folgenden Beispiele verwendet werden Object.keys, die in IE <9 nicht verfügbar sind. Siehe Kompatibilitätstabelle .
ECMAScript 3+
Wenn Sie ältere Versionen von IE unterstützen müssen, ist dies die Option für Sie:
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
var val = obj[key];
// use val
}
}
Die Verschachtelung ifstellt sicher, dass Sie nicht über Eigenschaften in der Prototypenkette des Objekts auflisten (was das Verhalten ist, das Sie mit ziemlicher Sicherheit wollen). Du musst benutzen
Object.prototype.hasOwnProperty.call(obj, key) // ok
eher, als
obj.hasOwnProperty(key) // bad
Mit ECMAScript 5+ können Sie prototyplose Objekte erstellen Object.create(null), und diese Objekte verfügen nicht über die hasOwnPropertyMethode. Frecher Code kann auch Objekte erzeugen, die das überschreibenhasOwnProperty Methode .
ECMAScript 5+
Sie können diese Methoden in jedem Browser verwenden, der ECMAScript 5 und höher unterstützt. Diese erhalten Werte von einem Objekt und vermeiden eine Aufzählung über die Prototypkette. Wo objist dein Objekt:
var keys = Object.keys(obj);
for (var i = 0; i < keys.length; i++) {
var val = obj[keys[i]];
// use val
}
Wenn Sie etwas kompakteres wollen oder mit Funktionen in Schleifen vorsichtig sein wollen, dann Array.prototype.forEachist Ihr Freund:
Object.keys(obj).forEach(function (key) {
var val = obj[key];
// use val
});
Die nächste Methode erstellt ein Array, das die Werte eines Objekts enthält. Dies ist praktisch zum Umschleifen.
var vals = Object.keys(obj).map(function (key) {
return obj[key];
});
// use vals array
Wenn Sie die Benutzer Object.keyssicher machen möchten null(wie sie for-insind), können Sie dies tun Object.keys(obj || {})....
Object.keysgibt aufzählbare Eigenschaften zurück. Für die Iteration über einfache Objekte ist dies normalerweise ausreichend. Wenn Sie etwas mit nicht aufzählbaren Eigenschaften haben, mit denen Sie arbeiten müssen, können Sie es Object.getOwnPropertyNamesanstelle von verwenden Object.keys.
ECMAScript 2015+ (AKA ES6)
Arrays lassen sich mit ECMAScript 2015 einfacher iterieren. Sie können dies zu Ihrem Vorteil nutzen, wenn Sie einzeln in einer Schleife mit Werten arbeiten:
for (const key of Object.keys(obj)) {
const val = obj[key];
// use val
}
Mit den Fettpfeilfunktionen von ECMAScript 2015 wird das Zuordnen des Objekts zu einem Array von Werten zu einem Einzeiler:
const vals = Object.keys(obj).map(key => obj[key]);
// use vals array
ECMAScript 2015 wird vorgestellt Symbol, von denen Instanzen als Eigenschaftsnamen verwendet werden können. Verwenden Sie Object.getOwnPropertySymbolsdiese Option, um die Symbole eines Objekts zum Aufzählen zu erhalten (diese Funktion Symbol kann daher nicht zum Erstellen privater Eigenschaften verwendet werden). Die neue ReflectAPI von ECMAScript 2015 bietetReflect.ownKeys eine Liste von Eigenschaftsnamen (einschließlich nicht aufzählbarer) und Symbolen.
Array-Verständnis (nicht verwenden)
Das Array-Verständnis wurde vor der Veröffentlichung aus ECMAScript 6 entfernt . Vor ihrer Entfernung hätte eine Lösung so ausgesehen:
const vals = [for (key of Object.keys(obj)) obj[key]];
// use vals array
ECMAScript 2017+
ECMAScript 2016 fügt Funktionen hinzu, die dieses Thema nicht beeinflussen. Die ECMAScript 2017-Spezifikation fügt hinzu Object.valuesund Object.entries. Beide geben Arrays zurück (was angesichts der Analogie zu einigen überraschend sein wird Array.entries). Object.valueskann unverändert oder mit einer for-ofSchleife verwendet werden.
const values = Object.values(obj);
// use values array or:
for (const val of Object.values(obj)) {
// use val
}
Wenn Sie sowohl den Schlüssel als auch den Wert verwenden möchten, ist dies das Richtige Object.entriesfür Sie. Es wird ein mit [key, value]Paaren gefülltes Array erzeugt . Sie können dies unverändert oder (beachten Sie auch die ECMAScript 2015-Destrukturierungszuweisung) in einer for-ofSchleife verwenden:
for (const [key, val] of Object.entries(obj)) {
// use key and val
}
Object.values Shim
Schließlich kann es, wie in den Kommentaren und von teh_senaus in einer anderen Antwort erwähnt, sinnvoll sein, eine davon als Unterlegscheibe zu verwenden. Keine Sorge, das Folgende ändert nichts am Prototyp, sondern fügt lediglich eine Methode hinzu Object(die viel weniger gefährlich ist). Mit den Fettpfeilfunktionen kann dies auch in einer Zeile erfolgen:
Object.values = obj => Object.keys(obj).map(key => obj[key]);
die du jetzt gerne benutzen kannst
// ['one', 'two', 'three']
var values = Object.values({ a: 'one', b: 'two', c: 'three' });
Wenn Sie das Shimmen vermeiden möchten, wenn ein Eingeborener Object.valuesvorhanden ist, können Sie Folgendes tun:
Object.values = Object.values || (obj => Object.keys(obj).map(key => obj[key]));
Schließlich...
Beachten Sie die Browser / Versionen, die Sie unterstützen müssen. Die obigen Angaben sind korrekt, wenn die Methoden oder Sprachfunktionen implementiert sind. Beispielsweise war die Unterstützung für ECMAScript 2015 in V8 bis vor kurzem standardmäßig deaktiviert, wodurch Browser wie Chrome unterstützt wurden. Funktionen aus ECMAScript 2015 sollten vermieden werden, bis die Browser, die Sie unterstützen möchten, die von Ihnen benötigten Funktionen implementieren. Wenn Sie Ihren Code mit babel in ECMAScript 5 kompilieren, haben Sie Zugriff auf alle Funktionen in dieser Antwort.