Verwendung der Array- und Objektzerstörung in JavaScript

Die Destrukturierungsaufgabe ist eine coole Funktion, die mit ES6 geliefert wurde. Destructuring ist ein JavaScript-Ausdruck, mit dem Werte aus Arrays oder Eigenschaften von Objekten in unterschiedliche Variablen entpackt werden können. Das heißt, wir können Daten aus Arrays und Objekten extrahieren und sie Variablen zuweisen.

Warum ist das notwendig?

Stellen Sie sich vor, wir möchten Daten aus einem Array extrahieren. Wie würde das bisher gemacht werden?

let introduction = ["Hello", "I" , "am", "Sarah"]; let greeting = introduction[0]; let name = introduction[3]; console.log(greeting);//"Hello" console.log(name);//"Sarah" 

Wir können sehen, dass wir, wenn wir Daten aus einem Array extrahieren wollen, immer wieder dasselbe tun müssen.

Die ES6-Destrukturierungszuweisung erleichtert das Extrahieren dieser Daten. Wie ist das so Zunächst werden wir die Destrukturierungszuweisung mit Arrays diskutieren. Dann werden wir zur Objektzerstörung übergehen.

Lass uns anfangen.

Grundlegende Array-Destrukturierung

Wenn wir Daten aus Arrays extrahieren möchten, ist die Verwendung der Destrukturierungszuweisung recht einfach.

Beziehen wir uns auf unser erstes Beispiel für Arrays. Anstatt diesen sich wiederholenden Prozess zu durchlaufen, würden wir Folgendes tun:

let introduction = ["Hello", "I" , "am", "Sarah"]; let [greeting, pronoun] = introduction; console.log(greeting);//"Hello" console.log(pronoun);//"I" 

Wir können dies auch mit dem gleichen Ergebnis tun.

let [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(pronoun);//"I"

Variablen vor der Zuweisung deklarieren

Variablen können deklariert werden, bevor sie wie folgt zugewiesen werden:

 let greeting, pronoun; [greeting, pronoun] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(pronoun);//"I" 

Beachten Sie, dass die Variablen von links nach rechts gesetzt werden. Die erste Variable erhält also das erste Element im Array, die zweite Variable erhält die zweite Variable im Array und so weiter.

Überspringen von Elementen in einem Array

Was ist, wenn wir das erste und letzte Element in unserem Array anstelle des ersten und zweiten Elements erhalten möchten und nur zwei Variablen zuweisen möchten? Dies kann auch durchgeführt werden. Schauen Sie sich das folgende Beispiel an:

let [greeting,,,name] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(name);//"Sarah" 

Was ist gerade passiert?

Sehen Sie sich das Array auf der linken Seite der Variablenzuweisung an. Beachten Sie, dass wir statt nur eines Kommas drei haben. Das Komma-Trennzeichen wird verwendet, um Werte in einem Array zu überspringen. Wenn Sie also ein Element in einem Array überspringen möchten, verwenden Sie einfach ein Komma.

Lass uns noch einen machen. Lassen Sie uns den ersten und dritten Punkt in der Liste überspringen. Wie würden wir das machen?

let [,pronoun,,name] = ["Hello", "I" , "am", "Sarah"]; console.log(pronoun);//"I" console.log(name);//"Sarah" 

Das Komma-Trennzeichen zaubert also. Wenn wir also alle Elemente überspringen möchten, tun wir Folgendes:

let [,,,,] = ["Hello", "I" , "am", "Sarah"]; 

Zuweisen des Restes eines Arrays

Was ist, wenn wir einen Teil des Arrays Variablen und den Rest der Elemente in einem Array einer bestimmten Variablen zuweisen möchten? In diesem Fall würden wir Folgendes tun:

let [greeting,...intro] = ["Hello", "I" , "am", "Sarah"]; console.log(greeting);//"Hello" console.log(intro);//["I", "am", "Sarah"] 

Mit diesem Muster können Sie den verbleibenden Teil eines Arrays entpacken und einer Variablen zuweisen.

Zuordnung mit Funktionen zerstören

Wir können auch Daten aus einem Array extrahieren, das von einer Funktion zurückgegeben wird. Angenommen, wir haben eine Funktion, die ein Array wie im folgenden Beispiel zurückgibt:

function getArray() { return ["Hello", "I" , "am", "Sarah"]; } let [greeting,pronoun] = getArray(); console.log(greeting);//"Hello" console.log(pronoun);//"I" 

Wir erhalten die gleichen Ergebnisse.

Standardwerte verwenden

Den Variablen können Standardwerte zugewiesen werden, falls der aus dem Array extrahierte Wert wie folgt lautet undefined:

let [greeting = "hi",name = "Sarah"] = ["hello"]; console.log(greeting);//"Hello" console.log(name);//"Sarah" 

Also namefällt auf "Sarah" zurück, weil es nicht im Array definiert ist.

Werte tauschen mit der Destructuring Assignment

Eine Sache noch. Wir können die Destrukturierungszuweisung verwenden, um die Werte von Variablen auszutauschen:

let a = 3; let b = 6; [a,b] = [b,a]; console.log(a);//6 console.log(b);//3 

Fahren wir als nächstes mit der Objektzerstörung fort.

Objektzerstörung

Lassen Sie uns zunächst sehen, warum eine Objektzerstörung erforderlich ist.

Angenommen, wir möchten Daten aus einem Objekt extrahieren und neuen Variablen zuweisen. Wie würde dies vor ES6 geschehen?

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let name = person.name; let country = person.country; let job = person.job; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" 

Sehen Sie, wie mühsam es ist, alle Daten zu extrahieren. Wir müssen immer wieder dasselbe tun. Die ES6-Destrukturierung spart wirklich den Tag. Lass uns gleich hineinspringen.

Grundlegende Objektzerstörung

Wiederholen wir das obige Beispiel mit ES6. Anstatt Werte einzeln zuzuweisen, können wir das Objekt links verwenden, um die Daten zu extrahieren:

 let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name, country, job} = person; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" 

Sie erhalten die gleichen Ergebnisse. Es ist auch gültig, einem Objekt, das nicht deklariert wurde, Variablen zuzuweisen:

let {name, country, job} = {name: "Sarah", country: "Nigeria", job: "Developer"}; console.log(name);//"Sarah" console.log(country);//"Nigeria" console.log(job);//Developer" 

Variablen, die vor der Zuweisung deklariert wurden

Variablen in Objekten können deklariert werden, bevor sie mit der Destrukturierung zugewiesen werden. Versuchen wir das mal:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let name, country, job; {name, country, job} = person; console.log(name);// Error : "Unexpected tokenSarah", country: "Nigeria", job: "Developer"}; let name, country, job; ({name, country, job} = person); console.log(name);//"Sarah" console.log(job);//"Developer" 

Es ist auch wichtig zu beachten, dass bei Verwendung dieser Syntax dem ()ein Semikolon vorangestellt werden sollte. Andernfalls kann eine Funktion aus der vorherigen Zeile ausgeführt werden.

Beachten Sie, dass die Variablen im Objekt auf der linken Seite denselben Namen haben sollten wie ein Eigenschaftsschlüssel im Objekt person. Wenn die Namen unterschiedlich sind, erhalten wir undefined:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name, friends, job} = person; console.log(name);//"Sarah" console.log(friends);//undefined 

Aber wenn wir einen neuen Variablennamen verwenden wollen, können wir das.

Verwenden eines neuen Variablennamens

Wenn wir einer neuen Variablen Werte eines Objekts zuweisen möchten, anstatt den Namen der Eigenschaft zu verwenden, können wir Folgendes tun:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name: foo, job: bar} = person; console.log(foo);//"Sarah" console.log(bar);//"Developer" 

Die extrahierten Werte werden also an die neuen Variablen foound übergeben bar.

Standardwerte verwenden

Standardwerte können auch bei der Objektzerstörung verwendet werden, falls sich eine Variable undefinedin einem Objekt befindet, aus dem Daten extrahiert werden sollen:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name = "myName", friend = "Annie"} = person; console.log(name);//"Sarah" console.log(friend);//"Annie" 

Wenn der Wert also nicht undefiniert ist, speichert die Variable den aus dem Objekt extrahierten Wert wie im Fall von name. Andernfalls wurde der Standardwert wie für verwendet friend.

Wir können auch Standardwerte festlegen, wenn wir einer neuen Variablen Werte zuweisen:

let person = {name: "Sarah", country: "Nigeria", job: "Developer"}; let {name:foo = "myName", friend: bar = "Annie"} = person; console.log(foo);//"Sarah" console.log(bar);//"Annie" 

Also   namewurde aus personeiner anderen Variablen extrahiert und dieser zugeordnet. friendwar andererseits undefinedin person, so dass der neuen Variablen bar  der Standardwert zugewiesen wurde.

Name der berechneten Eigenschaft

Der Name der berechneten Eigenschaft ist ein weiteres Objektliteral, das auch für die Destrukturierung geeignet ist. Sie können den Namen einer Eigenschaft über einen Ausdruck angeben, wenn Sie ihn in eckige Klammern setzen:

let prop = "name"; let {[prop] : foo} = {name: "Sarah", country: "Nigeria", job: "Developer"}; console.log(foo);//"Sarah" 

Arrays mit Objekten kombinieren

Arrays können auch mit Objekten in der Objektzerstörung verwendet werden:

let person = {name: "Sarah", country: "Nigeria", friends: ["Annie", "Becky"]}; let {name:foo, friends: bar} = person; console.log(foo);//"Sarah" console.log(bar);//["Annie", "Becky"] 

Verschachtelung in Objektzerstörung

Objekte können auch bei der Destrukturierung verschachtelt werden:

let person = { name: "Sarah", place: { country: "Nigeria", city: "Lagos" }, friends : ["Annie", "Becky"] }; let {name:foo, place: { country : bar, city : x} } = person; console.log(foo);//"Sarah" console.log(bar);//"Nigeria" 

Ruhe in der Objektzerstörung

The rest syntax can also be used to pick up property keys that are not already picked up by the destructuring pattern. Those keys and their values are copied into a new object:

let person = {name: "Sarah", country: "Nigeria", job: "Developer" friends: ["Annie", "Becky"]}; let {name, friends, ...others} = person; console.log(name);//"Sarah" console.log(friends);//["Annie", "Becky"] console.log(others);// {country: "Nigeria", job: "Developer"} 

Here, the remaining properties whose keys where not part of the variable names listed were assigned to the variable others. The rest syntax here is ...others. others can be renamed to whatever variable you want.

One last thing – let's see how Object Destructing can be used in functions.

Object Destructuring and Functions

Object Destructuring can be used to assign parameters to functions:

function person({name: x, job: y} = {}) { console.log(x); } person({name: "Michelle"});//"Michelle" person();//undefined person(friend);//Error : friend is not defined 

Notice the {} on the right hand side of the parameters object. It makes it possible for us to call the function without passing any arguments. That is why we got undefined. If we remove it, we'll get an error message.

We can also assign default values to the parameters:

function person({name: x = "Sarah", job: y = "Developer"} = {}) { console.log(x); } person({name});//"Sarah" 

We can do a whole lot of things with Array and Object Destructuring as we have seen in the examples above.

Thank you for reading. :)