Modernes JavaScript hat viele neue Funktionen, die es einfach machen, Code auf einfache und strukturierte Weise zu schreiben. Eine der praktischen modernen Funktionen, die in ES6+ verfügbar sind, ist die Destrukturierung von Arrays und Objekten.
JavaScript-Frameworks wie React.js und Angular fördern die Verwendung dieser Technik. Daher ist es wichtig zu verstehen, worum es bei der Destrukturierung geht und wie man sie beim Schreiben von Code verwendet.
Was ist Objekt- und Array-Destrukturierung in JavaScript?
Destrukturieren in JavaScript bezieht sich auf den Vorgang des Entpackens von Werten aus einem Array oder Objekt. Es bietet eine prägnantere Methode zum Abrufen von Werten aus Arrays oder Objekten ohne großen Aufwand, wenn Sie an einzelnen Array-Elementen oder Werten in einem Objekt interessiert sind.
Es ist auch hilfreich, wenn Rückgabewerte einer komplexen Funktion oder eines komplexen Ausdrucks verarbeitet werden. Dieses Konzept ist eines der
Best Practices, denen Sie beim Schreiben von React-Code folgen sollten.So destrukturieren Sie Arrays
Hier ist ein Beispielcode, um ein Gefühl für die Array-Destrukturierung zu bekommen:
konst arr = [1, 2];
konst [a, b] = arr;
Konsole.log (a) // gibt 1 auf der Konsole aus
Konsole.log (b) // gibt 2 auf der Konsole aus
Dieser Code verwendet Destrukturierung, um die Werte von zuzuweisen Arr—1 und 2— zu den Variablen A Und B, bzw. Dies ist das grundlegende Konzept hinter der Destrukturierung. Sie haben auf der rechten Seite ein Array oder Objekt, und auf der linken Seite entpacken Sie Elemente und weisen sie einzelnen Variablen zu.
Unter der Haube kopiert JavaScript Werte von Arr und weist sie den Variablen auf der linken Seite wie folgt zu:
konst arr = [1,2];
konst a = arr[0];
konst b = arr[1];
Wie Sie sehen können, ist die Destrukturierung eine prägnantere Möglichkeit, dies zu tun, im Gegensatz zur Verwendung der Objekt- oder Klammernotation. Diese Syntax ist jedoch wahrscheinlich nützlich, wenn Sie mit komplexen Arrays oder Funktionen arbeiten, die Arrays oder Zeichenfolgen zurückgeben.
Überprüfen Sie den Beispielcode unten:
konst [Tag, Monat, Datum, Jahr, Uhrzeit, Zeitzone] = Datum().Teilt(' ')
// Der Aufruf von Date() gibt das aktuelle Datum im Format zurück:
// Mo 20. Feb 2023 13:07:29 GMT+0000
Konsole.log (Tag) // druckt Mo
Konsole.log (Monat) // druckt Feb
Konsole.log (Datum) // druckt 20
In diesem Codebeispiel erstellen wir durch Aufrufen eine neue Zeichenfolge mit dem aktuellen Datum Datum(). Als nächstes verwenden wir Teilt(), A JavaScript-String-Methode, um Elemente in der Zeichenfolge mit Leerzeichen als Trennzeichen zu trennen. Teilt(' ') gibt ein Array zurück, und wir verwenden Destrukturierung, um die Werte einzelnen Variablen zuzuweisen.
Denken Sie daran, dass JavaScript die zusätzlichen Elemente ignoriert, wenn Ihr Array mehr Elemente enthält, als Sie entpacken.
konst arr = [1, 2, 3, 4];
konst [a, b] = arr;
Konsole.log (a) // gibt 1 aus
Konsole.log (b) // druckt 2
// die Werte 3 und 4 werden keiner Variablen zugewiesen; sie werden ignoriert
Wenn Sie in diesem Fall die verbleibenden Elemente in einer Variablen speichern möchten, verwenden Sie einen rest-Parameter wie folgt:
konst arr = [1, 2, 3, 4];
konst [a, b, ...rest] = arr;
Konsole.log (Rest) // druckt [3,4]
Manchmal ist Ihnen ein bestimmter Artikel vielleicht egal. Das Destrukturierungsmuster von JavaScript ermöglicht es Ihnen auch, bestimmte Elemente zu überspringen, indem Sie ein leeres Komma verwenden.
konst arr = [1, 2, 3, 4];
konst [a,, c] = arr;
Konsole.log (c) // druckt 3
Der obige Code verwendet das Leerzeichen, um den Wert zu ignorieren 2 im Array Arr. Statt Wertzuweisung 2 zu variabel C, springt es zum nächsten Element im Array. Es ignoriert auch den vierten Wert, da es keine Variable zum Speichern angibt.
Wenn Sie dagegen weniger Artikel benötigen, als Sie auspacken, weist der Prozess die Artikel zu nicht definiert Wert für diese zusätzlichen Variablen.
konst arr = [1];
konst [a, b] = arr;
Konsole.log (a) // gibt 1 aus
Konsole.log (b) // gibt undefiniert aus
Um zu verhindern, dass Variablen undefiniert sind, können Sie Standardwerte festlegen, wenn Sie sich bezüglich der Array-Länge nicht sicher sind, wie folgt (das Zuweisen von Standardwerten ist nicht erforderlich):
konst arr = [1];
konst [ein = '10', b = 'nicht vorgesehen'] = arr;
Konsole.log (a) // gibt 1 aus
Konsole.log (b) // druckt "nicht bereitgestellt"
Diese Destrukturierung weist den Wert zu 1 zu variabel A, wobei der Standardwert überschrieben wird. Variable B behält seinen Standardwert bei, da kein Wert angegeben wird.
Wie man Objekte destrukturiert
Das Destrukturieren von Objekten unterscheidet sich nicht so sehr von Arrays. Der einzige Unterschied besteht darin, dass Arrays iterierbar sind und Objekte nicht, was zu einer etwas anderen Vorgehensweise führt.
Beim Arbeiten mit Objekten werden die Variablen auf der linken Seite des Zuweisungsoperators ebenfalls wie Objekte initialisiert:
konst Person = {Name: 'Alwin', Alter: 10, Höhe: 1};
konst {Name, Alter, Größe} = Person;
Konsole.log (Name) // gibt 'Alvin' aus
Konsole.log (Höhe) // gibt 1 aus
Aus dem Code verwenden wir Eigenschaftsnamen aus der Person Objekt. Sie müssen jedoch nicht die genauen Eigenschaftsnamen im Objekt verwenden. Sie können die Werte wie folgt destrukturieren und in verschiedenen Variablennamen speichern:
konst Person = {Name: 'Alwin', Alter: 10, Höhe: 1};
konst {Name: Vorname, Alter: Jahre, Höhe: aktuelleHöhe} = person;
Konsole.log (Vorname) // gibt 'Alvin' aus
Konsole.log (aktuelle Höhe) // gibt 1 aus
Sie beginnen mit der Angabe des Eigenschaftswerts, den Sie destrukturieren möchten, und geben dann den Variablennamen an, den Sie zum Speichern des Werts nach einem Doppelpunkt verwenden. Und wie bei Arrays wird die Destrukturierung eines nicht vorhandenen Eigenschaftsnamens sein nicht definiert.
Um dies zu handhaben, können Sie auf ähnliche Weise Standardwerte angeben, falls der Eigenschaftsname, den Sie einer Variablen zuweisen möchten, nicht verfügbar ist:
konst Person = {Name: 'Alwin', Alter: 10, Höhe: 1};
konst {Name, Alter, Größe, Ort='Weltweit'} = Person;
Konsole.log (Name) // gibt 'Alvin' aus
Konsole.log (Speicherort) // druckt 'Weltweit'
Die Reihenfolge der Variablen auf der linken Seite spielt bei einem Objekt keine Rolle, da die Objekte Werte in Schlüssel-Wert-Paaren speichern. Daher führt der folgende Code zu denselben Ergebnissen:
konst Person = {Name: 'Alwin', Alter: 10, Höhe: 1};
konst {Alter, Größe, Name} = Person;
Konsole.log (Name) // gibt 'Alvin' aus
Konsole.log (Höhe) // gibt 1 aus
Schließlich können Sie, ähnlich wie bei Arrays, auch den rest-Parameter verwenden, um mehrere Werte in einer Variablen wie folgt zu destrukturieren:
konst Person = {Name: 'Alwin', Alter: 10, Höhe: 1};
konst {Name,... Rest} = Person;
Konsole.log (Name) // gibt 'Alvin' aus
Konsole.log (Rest) // druckt { Alter: 10, Größe: 1 }
Beachten Sie nur, dass der rest-Parameter immer an letzter Stelle stehen muss. Andernfalls löst JavaScript eine Ausnahme aus.
Verbessern Sie Ihre Codequalität mit der Destrukturierung von JavaScript
Die modernen Funktionen von Javascript, wie Destrukturierung, ermöglichen es Ihnen, gut lesbaren Code zu schreiben. Mithilfe der Destrukturierung können Sie schnell Werte aus Arrays und Objekten entpacken. Die Destrukturierung kann sich auch in anderen Situationen als nützlich erweisen, z. B. beim Austauschen von Werten zweier Variablen. Hoffentlich verstehen Sie jetzt, was Destrukturieren in JavaScript bedeutet, und können es beim Schreiben von Code verwenden.
