Überprüfung der Existenz eines Schlüssels in einem JavaScript-Objekt: 3 Methoden für Anfänger

Überprüfung der Existenz eines Schlüssels in einem JavaScript-Objekt: Analyse für Anfänger

Haben Sie jemals versucht, einen Wert aus einem JavaScript-Objekt zu erhalten, und als Antwort ein mysteriöses undefined bekommen? Eine vertraute Situation, oder? Besonders wenn Sie mit Daten von APIs, Konfigurationen oder einfach großen Strukturen arbeiten. Heute klären wir ein für alle Mal, wie man richtig prüft, ob ein Schlüssel in einem Objekt existiert. Dies ist eine der häufigsten Fragen auf Stack Overflow – und das aus gutem Grund.

Stellen Sie sich vor, das Objekt ist ein Schrank mit Schubladen. Sie möchten wissen, ob es eine Schublade mit der Aufschrift "Schlüssel" gibt. Sie können einfach am Griff ziehen (und einen Fehler erhalten, wenn die Schublade nicht existiert), oder Sie können zuerst nachschauen und sich vergewissern. In JavaScript haben wir gleich drei zuverlässige Methoden, dies zu tun. Los geht's!

Warum überhaupt die Existenz eines Schlüssels prüfen?

Angenommen, Sie schreiben eine App für eine Einkaufsliste. Sie haben ein Objekt cart, das Artikel mit Mengen enthalten kann:

const cart = {\n  apples: 3,\n  bananas: 5\n};\n\n// Wir möchten Birnen hinzufügen, wissen aber nicht, ob sie bereits vorhanden sind\nfunction addItem(item, quantity) {\n  if (cart[item] !== undefined) {\n    cart[item] += quantity;\n  } else {\n    cart[item] = quantity;\n  }\n}

Dieser Code funktioniert, hat aber Fallstricke. Was ist, wenn der Wert des Schlüssels 0 oder null ist? Dann liefert die Prüfung auf undefined ein falsches Ergebnis. Deshalb schauen wir uns professionelle Ansätze an.

Methode 1: Der in-Operator – der Allrounder

Der in-Operator prüft, ob eine Eigenschaft im Objekt existiert, einschließlich geerbter Eigenschaften. Dies ist die zuverlässigste Methode, wenn Sie wissen möchten, ob ein Schlüssel überhaupt vorhanden ist.

const user = {\n  name: 'Anna',\n  age: 25,\n  isAdmin: false\n};\n\nconsole.log('name' in user);    // true\nconsole.log('age' in user);     // true\nconsole.log('salary' in user);  // false\nconsole.log('toString' in user); // true (von Object geerbt)

Vorteile: funktioniert auch, wenn der Wert null, undefined oder false ist. Prüft die gesamte Prototypenkette.

Nachteile: Kann geerbte Eigenschaften finden, die Sie nicht benötigen. Zum Beispiel toString oder hasOwnProperty.

Für die meisten Fälle ist in die ideale Wahl. Besonders wenn Sie mit gewöhnlichen Objekt-Wörterbüchern arbeiten.

Methode 2: hasOwnProperty() – nur eigene Schlüssel

Wenn Sie nur die eigenen Eigenschaften eines Objekts prüfen müssen (nicht geerbte), verwenden Sie die Methode hasOwnProperty. Dies ist eine Standardmethode aller Objekte in JavaScript.

const book = {\n  title: 'JavaScript für Dummies',\n  pages: 300\n};\n\nconsole.log(book.hasOwnProperty('title'));   // true\nconsole.log(book.hasOwnProperty('pages'));   // true\nconsole.log(book.hasOwnProperty('toString')); // false (keine eigene Eigenschaft)\nconsole.log(book.hasOwnProperty('author'));   // false

Beachten Sie: hasOwnProperty prüft keine geerbten Eigenschaften. Das macht es unverzichtbar, wenn Sie Objekte mit Klassen oder Prototypen erstellen.

Es gibt jedoch eine Besonderheit! Wenn Ihr Objekt mit Object.create(null) erstellt wurde, hat es keine Methode hasOwnProperty. Was tun? Verwenden Sie einen sicheren Aufruf:

const dict = Object.create(null);\ndict.key1 = 'value1';\n\n// So funktioniert es nicht:\n// console.log(dict.hasOwnProperty('key1')); // TypeError\n\n// Aber so schon:\nconsole.log(Object.prototype.hasOwnProperty.call(dict, 'key1')); // true

Die moderne Syntax erlaubt die Verwendung von Object.hasOwn() – einer statischen Methode, die in ES2022 hinzugefügt wurde. Sie löst dieses Problem elegant:

console.log(Object.hasOwn(dict, 'key1')); // true

Ich empfehle die Verwendung von Obj