Comment utiliser la destruction de tableaux et d'objets dans JavaScript

L'affectation de déstructuration est une fonctionnalité intéressante fournie avec ES6. La déstructuration est une expression JavaScript qui permet de décompresser les valeurs des tableaux, ou les propriétés des objets, dans des variables distinctes. Autrement dit, nous pouvons extraire des données de tableaux et d'objets et les affecter à des variables.

Pourquoi est-ce nécessaire?

Imaginez que nous voulons extraire des données d'un tableau. Auparavant, comment cela se ferait-il?

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

Nous pouvons voir que lorsque nous voulons extraire des données d'un tableau, nous devons faire la même chose encore et encore.

L'affectation de déstructuration ES6 facilite l'extraction de ces données. Comment est-ce ainsi? Tout d'abord, nous discuterons de l'affectation de déstructuration avec des tableaux. Ensuite, nous passerons à la déstructuration des objets.

Commençons.

Destructuration de base des baies

Si nous voulons extraire des données de tableaux, c'est assez simple en utilisant l'affectation de déstructuration.

Faisons référence à notre premier exemple pour les tableaux. Au lieu de passer par ce processus répétitif, nous ferions ceci:

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

Nous pouvons également faire cela avec le même résultat.

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

Déclaration des variables avant l'attribution

Les variables peuvent être déclarées avant d'être affectées comme ceci:

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

Notez que les variables sont définies de gauche à droite. Ainsi, la première variable obtient le premier élément du tableau, la deuxième variable obtient la deuxième variable du tableau, et ainsi de suite.

Ignorer les éléments d'un tableau

Que faire si nous voulons obtenir le premier et le dernier élément de notre tableau au lieu du premier et du deuxième élément, et que nous voulons affecter seulement deux variables? Cela peut également être fait. Regardez l'exemple ci-dessous:

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

Qu'est-ce qui vient juste de se passer?

Regardez le tableau sur le côté gauche de l'affectation de variable. Notez qu'au lieu d'avoir une seule virgule, nous en avons trois. Le séparateur virgule est utilisé pour ignorer les valeurs dans un tableau. Donc, si vous voulez ignorer un élément dans un tableau, utilisez simplement une virgule.

Faisons un autre. Sautons le premier et le troisième élément de la liste. Comment ferions-nous cela?

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

Le séparateur par virgule fait donc la magie. Donc, si nous voulons ignorer tous les éléments, nous faisons simplement ceci:

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

Assigner le reste d'un tableau

Que faire si nous voulons affecter une partie du tableau à des variables et le reste des éléments d'un tableau à une variable particulière? Dans ce cas, nous ferions ceci:

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

En utilisant ce modèle, vous pouvez décompresser et affecter la partie restante d'un tableau à une variable.

Affectation de déstructuration avec fonctions

Nous pouvons également extraire des données d'un tableau retourné par une fonction. Disons que nous avons une fonction qui renvoie un tableau comme l'exemple ci-dessous:

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

Nous obtenons les mêmes résultats.

Utilisation des valeurs par défaut

Les valeurs par défaut peuvent être attribuées aux variables juste au cas où la valeur extraite du tableau est undefined:

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

Donc namerevient à "Sarah" car il n'est pas défini dans le tableau.

Échange de valeurs à l'aide de l'affectation de destruction

Encore une chose. Nous pouvons utiliser l'affectation de déstructuration pour permuter les valeurs des variables:

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

Ensuite, passons à la destruction d'objets.

Destructuration d'objets

Voyons d'abord pourquoi la déstructuration des objets est nécessaire.

Supposons que nous souhaitons extraire des données d'un objet et attribuer de nouvelles variables. Avant ES6, comment cela se ferait-il?

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" 

Voyez à quel point il est fastidieux d'extraire toutes les données. Nous devons faire la même chose à plusieurs reprises. La déstructuration ES6 sauve vraiment la mise. Allons-y directement.

Destructuration d'objets de base

Répétons l'exemple ci-dessus avec ES6. Au lieu d'attribuer les valeurs une par une, nous pouvons utiliser l'objet de gauche pour extraire les données:

 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" 

Vous obtiendrez les mêmes résultats. Il est également valide d'assigner des variables à un objet qui n'a pas été déclaré:

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

Variables déclarées avant d'être affectées

Les variables dans les objets peuvent être déclarées avant d'être affectées avec la déstructuration. Essayons ça:

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" 

Il est également important de noter que lors de l'utilisation de cette syntaxe, le ()doit être précédé d'un point-virgule. Sinon, il pourrait être utilisé pour exécuter une fonction à partir de la ligne précédente.

Notez que les variables de l'objet sur le côté gauche doivent avoir le même nom qu'une clé de propriété dans l'objet person. Si les noms sont différents, nous obtiendrons undefined:

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

Mais si nous voulons utiliser un nouveau nom de variable, eh bien, nous le pouvons.

Utilisation d'un nouveau nom de variable

Si nous voulons affecter les valeurs d'un objet à une nouvelle variable au lieu d'utiliser le nom de la propriété, nous pouvons le faire:

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

Ainsi, les valeurs extraites sont transmises aux nouvelles variables fooet bar.

Utilisation des valeurs par défaut

Les valeurs par défaut peuvent également être utilisées dans la déstructuration d'objets, juste au cas où une variable se trouve undefineddans un objet dont elle souhaite extraire des données:

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

Donc, si la valeur n'est pas indéfinie, la variable stocke la valeur extraite de l'objet comme dans le cas de name. Sinon, il a utilisé la valeur par défaut comme pour friend.

Nous pouvons également définir des valeurs par défaut lorsque nous attribuons des valeurs à une nouvelle variable:

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

Ainsi a   nameété extrait personet affecté à une variable différente. friend, d'autre part, était undefinedin person, donc la nouvelle variable bar  a reçu la valeur par défaut.

Nom de propriété calculé

Le nom de propriété calculé est une autre fonctionnalité littérale d'objet qui fonctionne également pour la déstructuration. Vous pouvez spécifier le nom d'une propriété via une expression si vous la mettez entre crochets:

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

Combinaison de tableaux avec des objets

Les tableaux peuvent également être utilisés avec des objets dans la déstructuration d'objets:

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

Imbrication dans la destruction d'objets

Les objets peuvent également être imbriqués lors de la déstructuration:

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" 

Reste dans la destruction d'objets

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. :)