Eine Anleitung zur variablen Zuordnung und Mutation in JavaScript

Mutationen sind etwas, von dem Sie in der Welt von JavaScript ziemlich oft hören, aber was genau sind sie und sind sie so böse, wie sie als sein?

In diesem Artikel werden wir die Konzepte der variablen Zuordnung und Mutation abdecken und sehen, warum - zusammen - sie können für Entwickler ein echter Schmerz sein. Wir werden uns ansehen, wie sie es verwalten, um Probleme zu vermeiden, wie man so wenig wie möglich verwendet und wie Sie Ihren Code vorhersehbar halten.

Wenn Sie dieses Thema genauer untersuchen oder mit modernem JavaScript auf dem neuesten Stand sein möchten, lesen Sie das erste Kapitel meines neuen Buches Lernen Sie kostenlos mit JavaScript.

Beginnen wir, indem wir zu den Grundlagen von Werttypen zurückkehren…

Key Takeaways

• JavaScript -Werte werden in Primitive (unveränderlich) und Objekte (veränderlich) kategorisiert und beeinflussen, wie sich die variable Zuordnung und Mutation verhalten.
• unter Verwendung von `const` verhindert keine Mutationen an Objekte; Es verhindert nur die Neuzuweisung der Variablen zu einem anderen Wert oder Objekt.
• Das Schlüsselwort "let" ermöglicht die Neuzuweisung, sodass es für Variablen geeignet ist, die den Wert im gesamten Code ändern müssen.
• Der Spread-Operator (`…`) ist entscheidend für die Erstellung von flachen Kopien von Objekten und vermeidet so Probleme, die sich auf Mutationen in Kopie-durch-Referenzobjekten beziehen.
• Mutationen sind nicht von Natur aus schlecht, sollten aber sorgfältig verwaltet werden, um die Vorhersehbarkeit des Codes aufrechtzuerhalten und Fehler zu minimieren, insbesondere in dynamischen Webanwendungen.

Datentypen

Jeder Wert in JavaScript ist entweder ein primitiver Wert oder ein Objekt. Es gibt sieben verschiedene primitive Datentypen:

• Zahlen wie 3, 0, -4, 0,625
• Strings wie "Hallo", "Welt", "hi`", "
"
• booleans, wahr und falsch
• null
• undefined
• Symbole - Ein einzigartiges Token, das garantiert mit einem anderen Symbol garantiert wird
• bigint - für den Umgang mit großen Ganzzahlwerten

Alles, was kein primitiver Wert ist, ist ein Objekt, einschließlich Arrays, Daten, regulären Ausdrücken und natürlich Objektliteralen. Funktionen sind eine besondere Art von Objekt. Sie sind definitiv Objekte, da sie Eigenschaften und Methoden haben, aber auch in der Lage sein können, aufgerufen zu werden.

variable Zuordnung

variable Zuordnung ist eines der ersten Dinge, die Sie in der Codierung lernen. So würden wir beispielsweise den Variablenbären die Nummer 3 zuweisen:

<span>const bears = 3;
</span>

Eine häufige Metapher für Variablen ist eine von Kästchen mit Etiketten mit Werten in sich. Das obige Beispiel würde als Box dargestellt, das das Etikett „Bären“ mit dem Wert von 3 enthält.

Eine alternative Denkweise über das, was als Referenz passiert, ist, dass das Etikett den Wert von 3:

bindet

Wenn ich die Nummer 3 einer anderen Variablen zuordne, verweist sie auf den gleichen Wert wie Bären:

<span>const bears = 3;
</span>

Die Variablen tragen und musketiere beide verweisen auf denselben primitiven Wert von 3. Wir können dies mit dem strengen Gleichstellungsoperator verifizieren, ===:

<span>let musketeers = 3;
</span>

Der Gleichstellungsoperator gibt true zurück, wenn beide Variablen denselben Wert verweisen.

Einige gotchas bei der Arbeit mit Objekten

Die vorherigen Beispiele zeigten, dass primitive Werte Variablen zugewiesen wurden. Der gleiche Vorgang wird verwendet, wenn Objekte zugewiesen werden:

bears <span>=== musketeers
</span><span><< true
</span>

Diese Zuordnung bedeutet, dass die variablen Ghostbusters auf ein Objekt verweist:

Ein großer Unterschied bei der Zuweisung von Objekten an Variablen besteht jedoch darin, dass wenn Sie einem anderen Variablen einem anderen Objektwesen ein völlig anderes Objekt zuweisen - auch wenn beide Objektliterale genau gleich aussehen! Die folgende Zuordnung sieht beispielsweise aus wie die variable TMNT (Teenage Mutant Ninja Turtles) auf das gleiche Objekt wie die variablen Ghostbusters:

<span>const ghostbusters = { number: 4 };
</span>

Obwohl die Variablen Ghostbusters und TMNT so aussehen, als würden sie auf das gleiche Objekt verweisen, verweisen sie tatsächlich beide auf ein völlig anderes Objekt, da wir sehen können, ob wir uns mit dem strengen Gleichstellungsoperator erkundigen:

<span>let tmnt = { number: 4 };
</span>

variable Neuzuweisung

Als das CONT -Keyword in ES6 eingeführt wurde, glaubten viele Menschen fälschlicherweise, dass Konstanten JavaScript eingeführt worden waren, dies war jedoch nicht der Fall. Der Name dieses Schlüsselworts ist ein wenig irreführend.

Jede mit const deklarierte Variable kann nicht zu einem anderen Wert zugewiesen werden. Dies gilt für primitive Werte und Objekte. Beispielsweise wurde die Variablenbären im vorherigen Abschnitt mit Const deklariert, sodass sie keinen anderen Wert zugewiesen hat. Wenn wir versuchen, den Variablenbären die Nummer 2 zuzuweisen, erhalten wir einen Fehler:

ghostbusters <span>=== tmnt
</span><span><< false
</span>

Der Verweis auf die Nummer 3 ist festgelegt und die Bärenvariable kann nicht zugewiesen werden.

Das Gleiche gilt für Objekte. Wenn wir versuchen, den variablen Ghostbusters ein anderes Objekt zuzuweisen, erhalten wir den gleichen Fehler:

bears <span>= 2;
</span><span><< TypeError: Attempted to assign to readonly property.
</span>

variable Neuzuweisung mit LET

Wenn das Schlüsselwort LET verwendet wird, um eine Variable zu deklarieren, kann es neu zugewiesen werden, um einen anderen Wert später in unserem Code zu verweisen. Zum Beispiel haben wir die variablen Musketiere mit LET deklariert, damit wir den Wert, auf den sich Musketeers beziehen, ändern können. Wenn D'Aragnan den Musketieren beigetreten würde, würde ihre Zahl auf 4:

erhöhen

ghostbusters <span>= {number: 5};
</span><span>TypeError: Attempted to assign to readonly property.
</span>

Dies kann erfolgen, weil Let verwendet wurde, um die Variable zu deklarieren. Wir können den Wert verändern, den Musketiere so oft verweisen, wie wir möchten.

Die Variable -TMNT wurde auch mit LET deklariert, sodass sie auch neu zugewiesen werden kann, um ein anderes Objekt zu verweisen (oder einen anderen Typ, wenn wir es mögen):

<span>const bears = 3;
</span>

Beachten Sie, dass die Variable TMNT nun auf ein vollständig unterschiedliches Objekt verweist; Wir haben die Nummerneigenschaft nicht nur auf 5 geändert.

Zusammenfassend lässt sich sagen, dass der Wert nicht zugewiesen werden kann, wenn Sie eine Variable mit CONT mit Const deklarieren, und verweist immer auf denselben primitiven Wert oder denselben Objekt, dem sie ursprünglich zugewiesen wurde. Wenn Sie eine Variable mit LET deklarieren, kann der Wert so oft wie erforderlich nach Bedarf im Programm neu zugewiesen werden.

so oft wie möglich die Verwendung von const wird allgemein als gute Praxis angesehen, da dies bedeutet, dass der Wert von Variablen konstant bleibt und der Code konsistenter und vorhersehbarer ist, was ihn weniger anfällig für Fehler und Fehler macht.

variable Zuordnung durch Referenz

Im nativen JavaScript können Sie Variablen nur Werte zuweisen. Sie können keine Variablen zuweisen, um auf eine andere Variable zu verweisen, obwohl es so aussieht, als ob Sie es können. Beispielsweise entspricht die Anzahl der Stooges wie die Anzahl der Musketiere, sodass wir die variablen Stooges zuweisen können, um den gleichen Wert wie die variablen Musketeiere zu verweisen, indem wir Folgendes verwenden:

<span>let musketeers = 3;
</span>

Dies sieht so aus, als ob die variablen Stooges die variablen Musketiere verweisen, wie im folgenden Diagramm gezeigt:

Dies ist jedoch im nativen JavaScript unmöglich: Eine Variable kann nur auf einen tatsächlichen Wert verweisen. Es kann nicht auf eine andere Variable hinweisen. Was tatsächlich passiert, wenn Sie eine solche Zuordnung erfolgen, ist, dass die Variable links von der Zuordnung den Wert auf die Variable an den rechten Referenzen verweist, so Sobald diese Aufgabe erfolgt ist, ist die Stooges -Variable überhaupt nicht mit der Variablen der Musketiere verbunden.

Dies bedeutet, dass, wenn D'Aragnan sich den Musketieren anschließt und wir den Wert der Musketiere auf 4 setzen, der Wert von Stooges als 3. bleibt es zu jedem neuen Wert; Es wird immer 3.

sein Zusammenfassend

Zusammenfassung: Wenn Sie eine Variable mit CONT mit Const deklarieren und auf einen primitiven Wert einstellen, auch über eine Verweise auf eine andere Variable, kann sich sein Wert nicht ändern. Dies ist gut für Ihren Code, da dies bedeutet, dass er konsistenter und vorhersehbarer ist.

Mutationen

Ein Wert soll veränderlich sein , wenn er geändert werden kann. Das ist alles, was es gibt: A Mutation ist der Akt der Änderung der Eigenschaften eines Wertes.

Alle primitiven Wert in JavaScript sind unveränderlich : Sie können ihre Eigenschaften nicht ändern. Wenn wir beispielsweise variable Lebensmittel die Zeichenfolge "Kuchen" zuweisen, können wir sehen, dass wir keine seiner Eigenschaften ändern können:

<span>const bears = 3;
</span>

Wenn wir versuchen, den ersten Brief in „F“ zu ändern, sieht es so aus, als hätte er sich geändert:

<span>let musketeers = 3;
</span>

Aber wenn wir uns den Wert der Variablen ansehen, sehen wir, dass sich tatsächlich nichts geändert hat:

bears <span>=== musketeers
</span><span><< true
</span>

Das Gleiche passiert, wenn wir versuchen, die Länge Eigenschaft zu ändern:

<span>const ghostbusters = { number: 4 };
</span>

Trotz des Rückgabewerts, der impliziert, dass die Länge geändert wurde

<span>let tmnt = { number: 4 };
</span>

Beachten Sie, dass dies nichts damit zu tun hat, die Variable mit const anstelle von LET zu deklarieren. Wenn wir LET verwendet hätten, könnten wir Lebensmittel so einstellen, dass wir auf eine andere Zeichenfolge verweisen, aber wir können keine seiner Eigenschaften ändern. Es ist unmöglich, die Eigenschaften primitiver Datentypen zu ändern, da sie

unveränderlich . sind

Veränderlichkeit und Objekte in JavaScript

Umgekehrt sind alle Objekte in JavaScript veränderlich, was bedeutet, dass ihre Eigenschaften geändert werden können, selbst wenn sie mit Const deklariert werden (denken Sie daran und kontrollieren Sie nur, ob eine Variable neu zugewiesen werden kann und nichts damit zu tun hat Wandlungsfähigkeit). Zum Beispiel können wir das erste Element eines Arrays mit dem folgenden Code ändern:

ghostbusters <span>=== tmnt
</span><span><< false
</span>

Beachten Sie, dass diese Änderung immer noch aufgetreten ist, obwohl wir das variable Lebensmittel unter Verwendung von const deklarierten. Dies zeigt, dass die Verwendung von const

nicht veraltet, dass Objekte . mutiert werden

Wir können auch die Länge Eigenschaft eines Arrays ändern, auch wenn es mit const:

deklariert wurde

bears <span>= 2;
</span><span><< TypeError: Attempted to assign to readonly property.
</span>

Kopieren durch Referenz

Denken Sie daran, dass die Variablen, wenn wir Objektliteralen Variablen zuweisen, völlig unterschiedliche Objekte verweisen, auch wenn sie gleich aussehen:

ghostbusters <span>= {number: 5};
</span><span>TypeError: Attempted to assign to readonly property.
</span>

Aber wenn wir einer anderen Variablen eine Variable Fantastic4 zuweisen, verweisen beide auf das gleiche

-Objekt:

Dies weist die Variable Fantastic4 Referenz

musketeers <span>= 4;
</span>

dasselbe

Objekt zu, wie auf die Variable -TMNT -Referenz und nicht auf ein völlig anderes Objekt.

Dies wird häufig als Kopieren durch Referenz bezeichnet, da beide Variablen auf das gleiche

-Objekt

zugewiesen sind. Dies ist wichtig, da alle Mutationen an diesem Objekt in

beide

Variablen zu sehen sind. Wenn sich Spider-Man den Fantastic Four anschließt, könnten wir den Zahlenwert im Objekt aktualisieren:

Dies ist eine Mutation, da wir die Zahleneigenschaft geändert haben, anstatt Fantastic4 auf ein neues Objekt zu verweisen.

tmnt <span>= {number: 5};
</span>

Dies verursacht uns ein Problem

<span>const bears = 3;
</span>

Dies liegt daran

Dies zeigt ein wichtiges Konzept in JavaScript: Wenn Objekte durch Referenz kopiert und anschließend mutiert werden, wirkt sich die Mutation auf alle anderen Variablen aus, die auf dieses Objekt referenzieren. Dies kann zu unbeabsichtigten Nebenwirkungen und Fehler führen, die schwer aufzuspüren sind.

Der Spread -Operator zur Rettung!

Wie erstellen Sie also eine Kopie eines Objekts, ohne einen Verweis auf das ursprüngliche Objekt zu erstellen? Die Antwort ist, den Spread Operator zu verwenden!

Der Spread -Operator wurde für Arrays und Zeichenfolgen in ES2015 und für Objekte in ES2018 eingeführt. Sie können leicht eine flache Kopie eines Objekts erstellen, ohne einen Verweis auf das ursprüngliche Objekt zu erstellen.

Das folgende Beispiel zeigt, wie wir die Variable Fantastic4 auf eine Kopie des TMNT -Objekts einstellen können. Diese Kopie ist genau das gleiche wie das TMNT -Objekt, aber Fantastic4 verweist auf ein völlig neues Objekt. Dies erfolgt durch die Festlegung des Namens der Variablen, die in einem Objekt wörtlich kopiert werden soll, wobei der Spread -Operator davor ist:

<span>let musketeers = 3;
</span>

Was wir hier tatsächlich getan haben, ist die Variable Fantastic4 einem neuen Objektliteral zuzuweisen und dann den Spread -Operator zu verwenden, um alle aufzählbaren Eigenschaften des von der TMNT -Variablen verwiesenen Objekts zu kopieren. Da diese Eigenschaften Werte sind, werden sie nach Wert in das fantastische Objekt kopiert.

Jetzt wirken sich alle Änderungen an beiden Objekten nicht auf die andere aus. Wenn wir beispielsweise die Nummerneigenschaft der Variablen fantastic4 auf 5 aktualisieren, hat dies keine Auswirkungen auf die TMNT -Variable:

bears <span>=== musketeers
</span><span><< true
</span>

Der Spread -Operator hat auch eine nützliche Verknüpfungsnotation, mit der Kopien eines Objekts vorgenommen und dann einige Änderungen am neuen Objekt in einer einzelnen Codezeile vorgenommen werden können.

Sagen Sie zum Beispiel, wir wollten ein Objekt erstellen, um die Teenage Mutant Ninja Turtles zu modellieren. Wir könnten das erste Turtle -Objekt erstellen und dem Variablen Leonardo zuweisen:

<span>const ghostbusters = { number: 4 };
</span>

Die anderen Schildkröten haben alle die gleichen Eigenschaften, mit Ausnahme der Waffen- und Farbeigenschaften, die für jede Schildkröte unterschiedlich sind. Es ist sinnvoll, eine Kopie des Objekts zu erstellen, das Leonardo unter Verwendung des Spread -Operators verweist und dann die Waffen- und Farbeigenschaften wie SO ändert:

<span>let tmnt = { number: 4 };
</span>

Wir können dies in einer Zeile tun, indem wir die Eigenschaften hinzufügen, die wir nach dem Verweis auf das Spread -Objekt ändern möchten. Hier ist der Code, um neue Objekte für die Variablen Donatello und Raphael zu erstellen:

<span>const bears = 3;
</span>

Beachten Sie, dass die Verwendung des Spread -Operators auf diese Weise nur eine flache Kopie eines Objekts erstellt. Um eine tiefe Kopie zu erstellen, müssen Sie dies rekursiv oder eine Bibliothek verwenden. Persönlich würde ich empfehlen, dass Sie versuchen, Ihre Objekte so flach wie möglich zu halten.

Sind Mutationen schlecht?

In diesem Artikel haben wir die Konzepte der variablen Zuordnung und Mutation behandelt und gesehen, warum - zusammen - sie können für Entwickler ein echter Schmerz sein.

Mutationen haben einen schlechten Ruf, aber sie sind nicht unbedingt schlecht an sich. Wenn Sie eine dynamische Web -App erstellen, muss sie sich irgendwann ändern. Das ist buchstäblich die Bedeutung des Wortes "dynamisch"! Dies bedeutet, dass es irgendwo in Ihrem Code einige Mutationen geben muss. Je weniger Mutationen es gibt, desto vorhersehbarer wird Ihr Code, was die Aufrechterhaltung erleichtert und die Wahrscheinlichkeit, Fehler zu entwickeln, keine Fehler entwickeln.

Eine besonders toxische Kombination wird durch Referenz und Mutationen kopiert. Dies kann zu Nebenwirkungen und Fehlern führen, die Sie nicht einmal erkennen. Wenn Sie ein Objekt mutieren, auf das eine andere Variable in Ihrem Code verwiesen wird, kann es viele Probleme verursachen, die schwierig zu erfassen können. Der Schlüssel ist, zu versuchen, die Verwendung von Mutationen zum Essentiellen zu minimieren und den Überblick zu behalten, welche Objekte mutiert wurden.

In der funktionellen Programmierung ist eine reine Funktion eine, die keine Nebenwirkungen verursacht, und Mutationen sind eine der größten Ursachen für Nebenwirkungen.

Eine goldene Regel besteht darin, Objekte durch Bezugnahme zu vermeiden. Wenn Sie ein anderes Objekt kopieren möchten, verwenden Sie den Spread -Operator und machen Sie dann sofort nach der Erstellung der Kopie Mutationen.

Als nächstes werden wir uns mit Array -Mutationen in JavaScript befassen.

Vergessen Sie nicht, mein neues Buch zu lesen. Lernen Sie, mit JavaScript zu codieren, wenn Sie mit modernem JavaScript auf dem neuesten Stand sein möchten. Sie können das erste Kapitel kostenlos lesen. Und bitte wenden Sie sich auf Twitter, wenn Sie Fragen oder Kommentare haben!

häufig gestellte Fragen (FAQs) zur javaScript -variablen Zuordnung und Mutation

Was ist der Unterschied zwischen variabler Zuordnung und Mutation in JavaScript? Sei zum Beispiel x = 5; Hier zuweisen wir den Wert 5 der Variablen x. Andererseits bezieht sich die Mutation auf den Prozess der Änderung des Wertes einer vorhandenen Variablen. Zum Beispiel, wenn wir später x = 10 schreiben; Wir mutieren die Variable X, indem wir seinen Wert von 5 auf 10 ändern.

Wie behandelt JavaScript für primitive und nicht primitive Datentypen variable Zuordnung und Mutation unterschiedlich? und Arrays) anders, wenn es um variable Zuordnung und Mutation geht. Bei primitiven Datentypen wird bei einer Variablen eine Kopie des Wertes erstellt und in einem neuen Speicherort gespeichert. Bei nicht primitiven Datentypen weisen beide Variablen, wenn Sie eine Variable zuweisen, auf denselben Speicherort hin. Wenn Sie also eine Variable mutieren, spiegelt sich die Änderung in allen Variablen wider, die auf diesen Speicherort hinweisen.

Pass-by-Wert und Pass-by-Referenz sind zwei Möglichkeiten, wie JavaScript Variablen an eine Funktion übergeben kann. Wenn JavaScript eine Variable nach Wert übergibt, wird eine Kopie des Wertes der Variablen erstellt und diese Kopie an die Funktion übergeben. Alle Änderungen an der Variablen innerhalb der Funktion beeinflussen die ursprüngliche Variable nicht. Wenn JavaScript jedoch eine Variable durch Referenz übergeht, gibt es eine Referenz auf den Speicherort der Variablen. Daher beeinflussen alle Änderungen an der Variablen innerhalb der Funktion auch die ursprüngliche Variable.

Wie kann ich Mutation in JavaScript verhindern? Eine Möglichkeit besteht darin, die Methode von Object.Freeze () zu verwenden, die verhindert, dass neue Eigenschaften zu einem Objekt hinzugefügt werden, vorhandene Eigenschaften entfernt und verhindert, dass die Aufzählbarkeit, die Konfigurierbarkeit oder die Schreibfähigkeit vorhandener Eigenschaften geändert wird. Eine andere Möglichkeit besteht darin, das CONT -Keyword bei der Erklärung einer Variablen zu verwenden. Dies verhindert die Neuzuweisung der Variablen, verhindert jedoch nicht die Mutation des Wertes der Variablen, wenn der Wert ein Objekt oder ein Array ist. 🎜> In JavaScript ist eine flache Kopie eines Objekts eine Kopie des Objekts, wobei die Werte des ursprünglichen Objekts und die Kopie auf denselben Speicherort für nicht primitive Datentypen verweisen. Wenn Sie die Kopie mutieren, ist das ursprüngliche Objekt auch mutiert. Andererseits ist eine tiefe Kopie eines Objekts eine Kopie des Objekts, bei der die Werte des ursprünglichen Objekts und die Kopie nicht auf denselben Speicherort verweisen. Wenn Sie die Kopie mutieren, ist das ursprüngliche Objekt daher nicht mutiert.

Wie kann ich eine tiefe Kopie eines Objekts in JavaScript erstellen? In JavaScript wird die Methoden json.Parse () und json.Stringify () verwendet. Die methode json.stringify () wandelt das Objekt in eine JSON -String um, und die JSON.Parse () -Methode wandelt die JSON -Zeichenfolge wieder in ein Objekt um. Dies erstellt ein neues Objekt, das eine tiefe Kopie des ursprünglichen Objekts ist.

Was ist die MutationObserver -API in JavaScript? Es soll eine allgemeine, effiziente und robuste API zur Reaktion auf Änderungen in einem Dokument bereitstellen. Eine Schließung ist eine Funktion, die Zugriff auf seinen eigenen Bereich, den Umfang der äußeren Funktion und den globalen Umfang hat. Wenn eine Variable in einem Verschluss zugewiesen oder mutiert wird, kann sie den Wert der Variablen im äußeren Bereich beeinflussen, je nachdem, ob die Variable im Bereich des Verschlusses oder im äußeren Bereich deklariert wurde.

Was ist der Unterschied Zwischen var, let und const in JavaScript? var ist function scoped und wenn es außerhalb einer Funktion deklariert wird, ist es global Scoped. LET und CONT sind Block abgebaut, was bedeutet, dass sie nur innerhalb des Blocks existieren, in dem sie deklariert sind. Der Unterschied zwischen LET und CONT besteht darin Im Kontext der asynchronen Programmierung? Wenn eine Variable in einer asynchronen Funktion zugewiesen oder mutiert wird, kann sie zu unerwarteten Ergebnissen führen, wenn andere Teile des Codes auf den Wert der Variablen beruhen. Dies liegt daran, dass die variable Zuordnung oder Mutation möglicherweise nicht vor den anderen Teilen des Codelaufs abgeschlossen ist. Um dies zu bewältigen, bietet JavaScript mehrere Funktionen, wie z.

Das obige ist der detaillierte Inhalt vonEine Anleitung zur variablen Zuordnung und Mutation in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!