Beispielimplementierung der Überprüfung, ob ein Objekt leer ist, in nativem JavaScript

Unten sehen Sie den Codeausschnitt, mit dem Sie prüfen können, ob ein Objekt null ist. Für neuere Browser können Sie „Object.keys“ von ES6 verwenden. Für ältere Browser können Sie die Lodash-Bibliothek installieren und ihre Methode „isEmpty“ verwenden.

const leer = {}; 
/* -------------------------
  Neuere Browser----------------------------*/
Objekt.Schlüssel(leer).Länge === 0 && leer.Konstruktor === Objekt
// WAHR 
/* -------------------------
  Lodash kann für ältere Browser verwendet werden
----------------------------*/
_.isEmpty(leer)
// WAHR

Was ist natives JavaScript

Natives JavaScript bedeutet, dass keine Frameworks oder Bibliotheken verwendet werden. Es handelt sich lediglich um normales Vanilla-JavaScript, es werden keine Bibliotheken wie Lodash oder jQuery verwendet.

A. Überprüfen auf Nullobjekte in neueren Browsern

Mit der integrierten Methode Object.keys können wir nach Nullobjekten suchen.

const leer = {}; 
Objekt.Schlüssel(leer).Länge === 0 && leer.Konstruktor === Objekt;

Warum brauchen wir zusätzliche constructor ?

Sie fragen sich vielleicht, warum wir constructor überhaupt überprüfen müssen. Es soll die Wrapper-Instanz überschreiben. In JavaScript haben wir 9 integrierte Konstruktoren.

neues Objekt();
neuer String();
neue Nummer();
neuer Boolean();
neues Array();
neuer RegExp();
neue Funktion();
neues Datum();

Hier können wir mit new Object() ein leeres Objekt erstellen .

const obj = neues Objekt(); 
Objekt.keys(obj).length === 0; // wahr

Verwenden Sie also einfach Object.keys . Es gibt tatsächlich true zurück, wenn das Objekt leer ist. Aber was passiert, wenn wir mit anderen Konstruktoren neue Objektinstanzen erstellen?

Funktion badEmptyCheck(Wert) {
  gibt Object.keys(Wert).Länge === 0 zurück;
} 
badEmptyCheck(neuer String()); // wahr 
badEmptyCheck(neue Zahl()); // wahr 
badEmptyCheck(neuer Boolean()); // wahr 
badEmptyCheck(neues Array()); // wahr 
badEmptyCheck(neuer RegExp()); // wahr 
badEmptyCheck(neue Funktion()); // wahr 
badEmptyCheck(neues Datum()); // wahr

Beheben Sie Fehlalarme durch die Überprüfung des Konstruktors

Korrigieren Sie diesen Fehler, indem Sie eine Konstruktorprüfung hinzufügen.

Funktion goodEmptyCheck(Wert) {
  Objekt.Schlüssel(Wert).Länge === 0
    && value.constructor === Objekt; // Konstruktorprüfung
}
goodEmptyCheck(neuer String()); // falsch 
goodEmptyCheck(neue Zahl()); // falsch 
goodEmptyCheck(new Boolean()); // falsch 
goodEmptyCheck(neues Array()); // falsch 
goodEmptyCheck(neuer RegExp()); // falsch 
goodEmptyCheck(neue Funktion()); // falsch 
goodEmptyCheck(neues Datum()); // falsch

Nullprüfung auf andere Werte

Als nächstes testen wir unsere Methode mit einigen Werten, um zu sehen, was wir erhalten.

Funktion istEmptyObject(Wert) {
  gibt Objekt.Schlüssel(Wert).Länge === 0 und Wert.Konstruktor === Objekt zurück;
}

Soweit, so gut. Für Nicht-Objekte wird false zurückgegeben.

isEmptyObject(100) // falsch
isEmptyObject(true) // falsch
isEmptyObject([]) // falsch

Aber Vorsicht! Die folgenden Werte verursachen einen Fehler.

// TypeError: Undefined oder Null kann nicht in ein Objekt umgewandelt werden.
istEmptyObject(undefiniert);
istEmptyObject(null);

Verbesserte Leerprüfungen für null und undefined

Wenn Sie nicht möchten, dass TypeError geworfen wird, können Sie eine zusätzliche Prüfung hinzufügen

Funktion istEmptyObject(Wert) {
  Rückgabewert && Object.keys(value).length === 0 && value.constructor === Object;
}

B. Nullobjektprüfung in älteren Browsern

Was ist, wenn Sie ältere Browser unterstützen müssen? Wie wir alle wissen, meinen wir mit alten Browsern den Internet Explorer und haben zwei Möglichkeiten: die Verwendung nativer Browser oder die Verwendung von Bibliotheken.

Suchen nach Nullobjekten mit JavaScript

Natives JS ist nicht so prägnant, aber es ist kein Problem, es als leeres Objekt zu beurteilen.

Funktion isObjectEmpty(Wert) {
  zurückkehren (
    Object.prototype.toString.call(Wert) === '[Objekt Objekt]' && JSON.stringify(Wert) === '{}'
  );
}

Für Objekte wird true zurückgegeben.

isObjectEmpty({}); // wahr 
isObjectEmpty(neues Objekt()); // wahr

Andere Arten von Konstruktoren können ebenfalls normal beurteilt werden

isObjectEmpty(new String()); // falsch 
isObjectEmpty(neue Zahl()); // falsch 
isObjectEmpty(new Boolean()); // falsch 
isObjectEmpty(new Array()); // falsch 
isObjectEmpty(new RegExp()); // falsch 
isObjectEmpty(neue Funktion()); // falsch 
isObjectEmpty(neues Datum()); // falsch

Das Übergeben von null und undefined führt nicht zu einer Meldung über TypeError .

isObjectEmpty(null); // falsch
isObjectEmpty(undefiniert); // falsch

Suchen nach Nullobjekten mithilfe einer externen Bibliothek

Es gibt unzählige externe Bibliotheken, mit denen nach Nullobjekten gesucht werden kann. Und die meisten haben gute Unterstützung für ältere Browser

Lodash 
_.isEmpty({});
// WAHR
Unterstreichen
_.isEmpty({});
// WAHR
jQuery 
jQuery.isEmptyObject({});
// WAHR

Native vs. Bibliothek

Die Antwort ist: Es kommt darauf an! Ich lege großen Wert darauf, meine Programme so einfach wie möglich zu halten, da mir der Overhead externer Bibliotheken nicht gefällt. Außerdem bin ich für kleinere Anwendungen zu faul, externe Bibliotheken einzurichten.

Wenn in Ihrer Anwendung jedoch bereits eine externe Bibliothek installiert ist, können Sie diese problemlos verwenden. Sie kennen Ihre Anwendung besser als jeder andere. Wählen Sie also die Methode, die am besten zu Ihrer Situation passt.

Oben sind die Details der Beispielimplementierung der Überprüfung, ob ein Objekt in nativem JavaScript leer ist. Weitere Informationen zur Überprüfung, ob ein Objekt in JavaScript leer ist, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!