Wie man Objekte und Arrays in JavaScript zerstören | Mit Beispielen erklärt

Die ES6 -Version wurde mit einer Welle neuer Merkmale ausgestattet. Eine dieser Funktionen war die Fähigkeit, Objekte und Arrays zu zerstören. Destructuring -Arrays oder Objekte ist der Prozess, das Werte von Objekten oder Arrays entnommen und lokale Variablen mithilfe der Destructuring -Syntax zuweisen.

Destructuring funktioniert, indem die Werte der Elemente des Array/Objekts mehrerer Variablen mithilfe einer einzelnen Codezeile zugewiesen werden. Anschließend können Sie diese Werte mit diesen neuen Variablen zugreifen. Denken Sie daran, es gibt kein bestimmtes "Symbol" oder "Operator".

Syntax
Die Syntax der Verwendung der Zerstörungsaufgabe ist ziemlich einfach. Um das Objekt in mehrere Variablen zu zerstören:

• Verwenden Sie die Curly -Klammern nach der Variablendefinition
• Legen Sie die Variablen in die lockigen Klammern ein
• Setzen Sie es dann (Ganzvariablenerklärung) gleich dem Objekt

Objekte:

const var1, var2 = ObjectName;

Verwenden Sie in ähnlicher Weise die Quadratklammern anstelle von lockigen Klammern, um Arrays für mehrere Variablen zu zerstören.

Arrays:

const [variable1, variable2] = arrayName;

Notiz: Bei zerstörenden Objekten sollte der Name der Variablen mit dem Namen der Eigenschaften des Objekts übereinstimmen.

Zerstörungen von Arrays in JavaScript

Erstellen Sie ein Array, das zufällige Elemente enthält, um die Zerstörung von Arrays in JavaScript mit dem folgenden Befehl zu demonstrieren:

Benutzer = ["Alberto", "Rodrigo", 25, "männlich"];

Sie können sehen, wir haben ein Array mit den Details einer Person. Die traditionelle Lösung zum Speichern der Werte der Elemente dieses Arrays in lokalen Variablen wäre:

const FirstName = Benutzer [1];
const lastname = user [2];
const alter = user [3];
const Gender = Benutzer [4];

Dies ist ein langer Prozess und erfordert mehr Codezeilen.

Mit den Destructuring -Funktionen ändert sich die oben genannten Code an:

const [FirstName, Nachname, Alter, Geschlecht] = Benutzer;

Nur mit dieser einen Zeile haben wir 4 Variablen erstellt und ihnen die jeweiligen Werte aus dem Array zugewiesen.

Um dies zu überprüfen, können Sie den Wert einer dieser Variablen mit dem folgenden Code drucken:

Konsole.log (FirstName);
Konsole.log (Geschlecht);

Der komplette Code -Snippet wäre:

Array = ["Alberto", "Rodrigo", 25, "männlich"];
const [FirstName, Nachname, Alter, Geschlecht] = Array;
Konsole.log (FirstName);
Konsole.log (Geschlecht);

Sie erhalten die folgende Ausgabe:

Sie können sehen, dass die Variablen ihre Werte aus den Elementen des Arrays hatten.

Zerstörende verschachtelte Arrays

Die Zerstörung funktioniert sogar mit verschachtelten Arrays. Nehmen Sie beispielsweise ein verschachteltes Array, das mit den folgenden Codezeilen erstellt werden kann:

Benutzer = ["Alberto", "Rodrigo", 25, "männlich", ["MR.John "," Samantha "];

Sie können sehen, dass das letzte Element des Arrays ein weiteres Array ist, das die Namen des Vaters und der Mutter der Person enthält.

Wir können dieses verschachtelte Array mit dem folgenden Code zerstören:

const [FirstName, Nachname, Alter, Geschlecht, [Fathername, Muttername]] = Array;

Sie können diese Zerstörung mit den folgenden Befehlen überprüfen:

Konsole.log (FirstName);
Konsole.log (Geschlecht);
Konsole.log (fathername);
Konsole.log (Muttername);

Der komplette Code -Snippet lautet:

Array = ["Alberto", "Rodrigo", 25, "männlich", ["MR.John "," Samantha "];
const [FirstName, Nachname, Alter, Geschlecht, [Fathername, Muttername]] = Array;
Konsole.log (FirstName);
Konsole.log (Geschlecht);
Konsole.log (fathername);
Konsole.log (Muttername);

Sie sehen die folgende Ausgabe auf dem Bildschirm, wenn Sie das Programm ausführen.

Sie können sehen, dass Sie das Array erfolgreich zerstören und das Ergebnis auch am Ende überprüfen konnten.

Zerstörungen von Objekten in JavaScript

Angenommen, wir haben ein „Person“ -Objekt:

var person =
FirstName: "John",
Alter: 25,
LastName: "Doe",
Job: "Auditor",
;

Und die Schlüsselwertpaare sind die Eigenschaften dieser Person: Vorname, Nachname, Alter und Job.

Sie können dieses Objekt mithilfe der folgenden Zeile zerstören:

var FirstName, Alter, Nachname, Job = Person;

Notiz: Wenn Sie ein Objekt zerstören, sollte der Name der Variablen mit dem Namen der Eigenschaften des Objekts übereinstimmen, sonst funktioniert die Zerstörung nicht und der Wert der Variablen wäre nicht definiert.

Sie können die Zerstörungen überprüfen, indem Sie die Werte dieser Variablen auf die Konsole drucken, indem Sie die folgenden Codezeilen verwenden.

Konsole.log (FirstName);
Konsole.log (lastname);
Konsole.log (Alter);
Konsole.Protokoll (Job);

Der komplette Code -Snippet lautet:

var person =
FirstName: "John",
Alter: 25,
LastName: "Doe",
Job: "Auditor",
;
var FirstName, Alter, Nachname, Job = Person;
Konsole.log (FirstName);
Konsole.log (lastname);
Konsole.log (Alter);
Konsole.Protokoll (Job);

Wenn Sie dieses Programm ausführen, sehen Sie die folgende Ausgabe:

Sie haben erfolgreich ein Objekt in JavaScript erstellt, und das ist es, Objekte und Arrays in JavaScript zu zerstören.

Abschluss

Arrays und Objekte können unter Verwendung der destruktiven Syntax in JavaScript, Destructuring Arrays und Objekten, zerstört werden. Destructuring ist der Prozess der Zuweisung der Werte der Elemente/Eigenschaften von Arrays/Objekten an lokale Variablen mithilfe einer einzelnen Codezeile. In diesem Leitfaden haben wir gelernt, wie wir mit Hilfe von Beispielen Arrays, verschachtelte Arrays und Objekte zerstören können.