Geekly articles weekly

Wir beschäftigen uns mit Objekten in JavaScript

In diesem Artikel gab der Autor, ein Front-End-Entwickler, einen Überblick über die wichtigsten Möglichkeiten zum Erstellen, Ändern und Vergleichen von JavaScript-Objekten.


Objekte sind eines der Grundkonzepte in JavaScript. Als ich anfing, sie zu studieren, schienen sie mir ziemlich einfach zu sein: nur ein paar Schlüssel und Werte, wie in der Theorie beschrieben.

Erst nach einiger Zeit wurde mir klar, dass das Thema viel komplizierter ist als ich dachte. Und dann fing ich an, Informationen aus verschiedenen Quellen zu studieren. Einige von ihnen gaben eine gute Vorstellung von dem Thema, aber ich konnte nicht sofort das ganze Bild sehen.

In diesem Beitrag habe ich versucht, alle Aspekte der Arbeit mit Objekten in JS zu behandeln, ohne zu tief auf einzelne Details einzugehen, ohne jedoch wichtige Details zu verpassen, die Ihnen helfen, das Thema zu verstehen und sich während des weiteren Studiums sicherer zu fühlen.

Beginnen wir also mit den Grundlagen.

Objekt


Ein Objekt in JavaScript ist einfach eine Sammlung von Eigenschaften, von denen jede ein Schlüssel-Wert-Paar ist. Auf Schlüssel kann mit der gepunkteten ( obj.a ) oder der in Klammern gesetzten Notation ( obj ['a'] ) zugegriffen werden.

Denken Sie daran, dass Klammern verwendet werden sollten, wenn der Schlüssel lautet:

  • ist keine gültige JavaScript-Kennung (sie hat ein Leerzeichen, einen Bindestrich, sie beginnt mit einer Zahl ...)
  • ist eine Variable.

Eine der Eigenschaften, die Objekte in JS beim Erstellen erhalten, heißt Prototyp , und dies ist ein sehr wichtiges Konzept.

Prototyp


Jedes Objekt in JavaScript verfügt über eine interne Eigenschaft namens Prototype . In den meisten Browsern können Sie mit der Bezeichnung __proto__ darauf verweisen .

Prototyp ist eine Möglichkeit, die Eigenschaftsvererbung in JavaScript bereitzustellen. So können Sie Funktionen gemeinsam nutzen, ohne Code im Speicher zu duplizieren. Die Methode erstellt eine Beziehung zwischen zwei Objekten.

Einfach ausgedrückt, Prototype erstellt einen Zeiger von einem Objekt auf ein anderes.

Prototypkette

Jedes Mal, wenn JS nach einer Eigenschaft im Objekt sucht und diese nicht direkt am Objekt selbst findet, prüft es, ob die Eigenschaft im Prototypobjekt vorhanden ist. Wenn keine Eigenschaft darin enthalten ist, sucht JS weiter im Prototyp des zugehörigen Objekts. Dies wird fortgesetzt, bis JS eine geeignete Eigenschaft findet oder das Ende der Kette erreicht.

Schauen wir uns ein Beispiel an:

var cons = function () {   this.a = 1;   this.b = 2; } var obj = new cons(); </i>  cons.prototype.b = 3; cons.prototype.c = 4;

cons ist ein Konstruktor (nur eine Funktion, die mit dem neuen Operator aufgerufen werden kann).

In der fünften Zeile erstellen wir ein neues Objekt - eine neue Kopie der Nachteile . Unmittelbar nach dem Erstellen erhält obj auch eine Prototyp-Eigenschaft.

Und jetzt fügen wir dem Prototyp des cons- Objekts Eigenschaften ( 'b', 'c' ) hinzu.
Betrachten Sie obj :

obj.a // 1 - alles ist wie zuvor , obj.a ist immer noch 1.
obj.c - obj hat keine c Eigenschaft! Wie bereits erwähnt, sucht JS jetzt im obj- Prototyp danach und gibt den Wert 4 zurück.

Lassen Sie uns nun darüber nachdenken, was der Wert von obj.b ist und was er wird, wenn wir obj.b entfernen.

Obj.b ist 2. Wir haben die Eigenschaft b zugewiesen, aber wir haben es für den Cons- Prototyp getan. Wenn wir also obj.b überprüfen, erhalten wir immer noch 2. Unmittelbar nach dem Löschen von obj.b kann JS b jedoch nicht mehr bei o bj finden und setzt daher die Suche im Prototyp fort und gibt den Wert 3 zurück.

Als nächstes möchte ich kurz über verschiedene Möglichkeiten zum Erstellen eines Objekts und etwas mehr über Prototypen sprechen.

Objekterstellung


Objektliteral : let obj = {a: 1};
Wir haben ein Objekt mit der folgenden Prototypkette erstellt: obj ---> Object.prototype ---> null
Wie Sie sich vorstellen können, ist object.prototype der Prototyp des Objekts sowie das Ende der Prototypenkette.

Object.create (): var newObj = Object.create (obj);
NewObj hat die folgende Prototypenkette: newObj ---> obj ---> Object.prototype ---> null

Konstruktor. Wie im obigen Beispiel ist der Konstruktor nur eine JS-Funktion, mit der wir den neuen Operator verwenden können, um neue Instanzen davon zu erstellen.

ES6-Klassen:

 class rectangle { constructor(height, width) { this.height = height; this.width = width; } getArea() { return this.height * this.width; } } let square = new rectangle(2, 2);

Square ist eine Instanz des Rechteckkonstruktors. Daher können wir square.getArea () // 4 , square.width sowie alle von object.prototype geerbten Funktionen aufrufen .

Welche Methode ist besser? Wenn Sie mehrere Instanzen erstellen möchten, können Sie ES6 oder den Konstruktor verwenden. Wenn Sie ein Objekt einmal erstellen möchten, ist es besser, ein Literal anzugeben, da dies der einfachste Weg ist.

Und jetzt, wenn wir etwas über Prototypen gelernt und uns mit allen Möglichkeiten zum Erstellen neuer Objekte vertraut gemacht haben, können wir einen der verwirrendsten Aspekte diskutieren, die mit Objekten verbunden sind.

Objekte vergleichen und ändern


In JavaScript sind Objekte vom Referenztyp

Wenn wir ein Objekt erstellen, sei obj = {a: 1}; , die Variable obj erhält die Adresse im Speicher des Objekts, aber nicht ihren Wert! Es ist unbedingt erforderlich, diesen Unterschied zu verstehen, da sonst Fehler auftreten können. Wenn wir ein anderes Objekt erstellen, lassen Sie newObj = obj , erstellen wir tatsächlich einen Zeiger auf einen bestimmten Bereich des Speicherobjekts und nicht auf ein vollständig neues Objekt.

Dies bedeutet, dass wir durch Ausführen von newObj.a = 2 tatsächlich obj so ändern, dass obj.a zu 2 wird!

Dieser Ansatz führt leicht zum Auftreten von Fehlern, sodass viele Unternehmen mit unveränderlichen Objekten arbeiten. Anstatt ein bereits erstelltes Objekt zu ändern, müssen Sie erneut ein neues Objekt (eine Kopie des Originals) erstellen und bereits Änderungen daran vornehmen. So funktionieren wichtige Bibliotheken wie Redux, und insgesamt ist dies eines der Grundkonzepte der funktionalen Programmierung. Lesen Sie hier mehr.

Gleichheit

Aus dem Obigen folgt auch, dass zwei Objekte niemals gleich sein können, selbst wenn sie dieselben Eigenschaften haben. Dies liegt an der Tatsache, dass JS tatsächlich die Position von Objekten im Speicher vergleicht und sich zwei Objekte niemals in derselben Speicherzelle befinden.

 // Two distinct objects with the same properties are not equal var fruit = {name: 'apple'}; var fruitbear = {name: 'apple'}; fruit === fruitbear; // return false // here fruit and fruitbear are pointing to same object var fruit = {name: 'apple'}; var fruitbear = fruit; fruit === fruitbear; // return true

Sie haben sich also höchstwahrscheinlich bereits gefragt, wie Sie Objekte vergleichen oder verschiedene Manipulationen mit Objekten durchführen können, da diese unveränderlich sind.

Betrachten Sie einige Möglichkeiten.

Objektwechsel

Angenommen, es ist klar, dass wir Objekte auf keine gute Weise ändern sollten, also möchten wir eine Kopie des entsprechenden Objekts erstellen und seine Eigenschaften ändern. Object.assign () kommt zur Rettung .

 var obj = { a : 1, b : 2}; var newObj = Object.assign({}, obj,{a:2}) // {a : 2, b : 2 }

Wenn wir den Wert der Eigenschaft a von obj ändern möchten , können wir object.assign verwenden , um eine Kopie von obj zu erstellen und zu ändern.

Das Beispiel zeigt, dass wir zuerst ein leeres Objekt erstellen, dann die obj- Werte kopieren und unsere Änderungen vornehmen, um schließlich ein neues und gebrauchsfertiges Objekt zu erhalten.

Bitte beachten Sie, dass diese Methode beim Tiefkopieren nicht funktioniert. Wenn wir vom tiefen Kopieren sprechen, meinen wir, dass Sie ein Objekt mit einer oder mehreren Eigenschaften kopieren müssen.

 const obj = {a : 1, b : { a : 1 } }; // b property is an object

Object.assign () kopiert die Eigenschaften des Objekts. Wenn der Wert der Eigenschaft also ein Zeiger auf ein Objekt ist, wird nur der Zeiger kopiert.

Tiefes Kopieren erfordert eine rekursive Operation. Sie können hier eine Funktion schreiben oder einfach die Methode _.cloneDeep aus der Lodash- Bibliothek verwenden.

Objektvergleich

Es gibt eine coole Möglichkeit, mit Objekten zu arbeiten - die Linienkonvertierung. Im folgenden Beispiel konvertieren wir beide Objekte in Zeichenfolgen und vergleichen sie:

 JSON.stringify(obj1) === JSON.stringify(obj2)

Dieser Ansatz ist gerechtfertigt, da wir am Ende Zeichenfolgen vergleichen, die einen Zeiger auf einen Werttyp darstellen. Die schlechte Nachricht ist, dass es nicht immer funktioniert, hauptsächlich weil die eine oder andere Reihenfolge der Eigenschaften des Objekts nicht garantiert ist.

Eine weitere gute Lösung ist die Verwendung der _.isEqual- Methode von Lodash , mit der Objekte gründlich verglichen werden.

Bevor wir fertig sind, gehen wir einige häufig gestellte Fragen zu Objekten durch. Dies wird dazu beitragen, tiefer in das Thema einzutauchen und das erworbene Wissen in die Praxis umzusetzen.

Versuchen Sie, selbst über die Lösung nachzudenken, bevor Sie die Antwort lesen.

Wie finde ich die Länge eines Objekts heraus?


Um die Antwort zu erhalten, müssen alle Eigenschaften des Objekts einzeln sortiert und gezählt werden. Es gibt verschiedene Möglichkeiten, diese Iteration durchzuführen:

  • für in . Diese Methode deckt alle zählbaren Eigenschaften eines Objekts und seiner Prototypkette ab. Wir haben den Prototyp kennengelernt (und hoffentlich das Material gelernt), daher sollte klar sein, dass die Verwendung von for in nicht immer der Fall ist, um die Eigenschaften des Objekts zu erhalten.
  • Object.keys . Diese Methode gibt ein Array mit den Schlüsseln aller eigenen (zum angegebenen Objekt gehörenden) zählbaren Eigenschaften zurück. Dieser Ansatz ist besser, da wir nur an den Eigenschaften des Objekts arbeiten, ohne auf die Eigenschaften des Prototyps zurückzugreifen . Es gibt jedoch Situationen, in denen Sie das Enumerable- Attribut einer Eigenschaft auf false setzen und object.keys es schließlich überspringt und Sie ein falsches Ergebnis erhalten. Dies kommt selten vor, aber in solchen Fällen ist getOwnPropertyNames hilfreich .
  • getOwnPropertyNames gibt ein Array zurück, das alle eigenen Schlüssel des Objekts enthält (sowohl zählbar als auch nicht zählbar).

Erwähnenswert auch:

  • Object.values ​​iteriert über seine eigenen Zähleigenschaften und gibt ein Array mit den entsprechenden Werten zurück .
  • Object.entries iteriert über seine eigenen Zähleigenschaften und gibt ein Array mit Schlüsseln und ihren Werten zurück .

Ich denke, Sie haben bemerkt, dass die meisten der oben aufgeführten Methoden ein Array zurückgeben. Dies ist eine Gelegenheit, die JavaScript-Methoden für die Arbeit mit Arrays voll auszunutzen.

Eine solche Methode ist array.length . Am Ende können wir einfach schreiben

 let objLength = Object.getOwnPropertyNames(obj).length;

Wie überprüfe ich, ob ein Objekt leer ist?


  1. JSON.stringify (myObj) === "{}" . Hier verwenden wir wieder das String-Konvertierungs-Tool, mit dem Sie leicht überprüfen können, ob ein Objekt leer ist (Vergleich von Strings, nicht von Objekten).
  2. ! Object.keys (myobj) .length // true . Wie bereits erwähnt, kann das Konvertieren der Schlüssel eines Objekts in ein Array sehr nützlich sein. Hier verwenden wir die bequeme Eigenschaftslänge, die von Array.prototype geerbt wurde, und überprüfen damit die Länge der Schlüssel im Array. In JS wird 0 zu false. Fügen Sie also hinzu ! wir machen es wahr. Alle anderen Zahlen werden zu false.

Abschließend


Ich hoffe, dass Sie sich jetzt sicherer fühlen, Objekte zu erstellen und mit ihnen zu arbeiten. Fassen wir zusammen:

  • Denken Sie daran, dass Objekte zum Referenztyp gehören. Daher wird empfohlen, mit ihnen zu arbeiten, ohne die ursprünglichen Objekte zu ändern.
  • Freunde dich mit der Prototyp- Eigenschaft und der Prototyp- Kette an.
  • Lernen Sie die Hilfsmittel beim Arbeiten mit Objekten kennen. Denken Sie daran, dass Sie Objekte in Zeichenfolgen umwandeln, ein Array mit ihren Schlüsseln abrufen oder einfach ihre Eigenschaften mit einer Reihe von Methoden durchlaufen können, die wir kennengelernt haben.

Viel Glück beim Lernen von JavaScript-Objekten.

Bild

Source: https://habr.com/ru/post/de419193/

More articles:


All Articles