Comment utiliser la déstructuration en JavaScript pour écrire un code plus propre et plus puissant

Parfois, vous devez détruire pour construire quelque chose de nouveau.

ES6 nous a présenté l'une des fonctionnalités JavaScript les plus attendues: la déstructuration. En tant que concept, Destructuring n'est ni nouveau ni révolutionnaire et certaines langues avaient déjà Destructuring (??) bien avant. Mais c'était une fonctionnalité très nécessaire et demandée en JavaScript.

La destruction est le processus de rupture d'une structure. Dans le contexte de la programmation, les structures sont les structures de données, et déstructurer ces structures de données signifie décompresser les valeurs individuelles de la structure de données. En JavaScript, la déstructuration peut être appliquée à un objet ou à un tableau.

La destruction fait, casse tout…. quelle utilisation en avons-nous ??

Avant de répondre à cette question, ayons une définition formelle de la Destructuration. MDN à la rescousse!

La syntaxe d' affectation de 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. -MDN

Regardons quelques exemples pour mieux comprendre les bases de la déstructuration.

Tableaux

Échantillon 1:

Quand j'ai vu ce simple morceau de code la première fois, j'étais déconcerté. Je n'ai pas compris ce qui s'est passé. Si vous êtes comme moi, laissez-moi essayer de vous expliquer.

À la ligne 1, nous définissons 2 variables aet b. Dans la ligne suivante, les deux variables sont à l'intérieur d'un tableau dans le côté gauche qui à son tour est assimilé à un tableau réel dans le côté ride. Dans les lignes suivantes, nous imprimons les valeurs de a& bet nous obtenons respectivement 7 et 8 qui étaient les éléments du tableau RHS. La magie qui se produit dans la ligne 2 s'appelle la déstructuration.

Le LHS déstructure le RHS et les valeurs obtenues lors du déballage des éléments sont affectées aux variables dans l'ordre.

Mais pourquoi le LHS est-il dans un tableau ???

L'affectation de déstructuration utilise une syntaxe similaire, sur le LHS par rapport au RHS pour définir les valeurs à décompresser de la variable d'origine.

Échantillon 2:

Ici, nous avons introduit une autre variable leftoutdans le code maintenant. Nous avons 2 types d'utilisation différents de leftoutdans le code.

  • [a,b,leftout]-> Cela affecte le troisième élément du tableau to leftcomme prévu.
  • [a,b,…leftout]-> Cela donne les 2 premières valeurs toaa ndb respectivement et le reste du tableau est affecté à la he leftovariable t ut.

La solution réside dans l' opérateur. Cet opérateur réduit tous les arguments restants ( repos ) dans un seul tableau. Dans ce dernier point, les 2 premiers éléments du tableau sont assignés à a& brespectivement, et le reste des arguments sont regroupés dans un tableau (restructuration peut-être ??) et assignés à la leftoutvariable. Nous pouvons vérifier la même chose en regardant la sortie.

Objets

Échantillon 1:

La destruction fonctionne de la même manière pour les objets et les tableaux. L'objet dans le LHS a des propriétés a& bqui sont affectées respectivement aux propriétés a& bde l'objet RHS. Nous obtenons respectivement 1 et 2 en les imprimant.

Une chose à noter ( si vous l'avez ) est qu'il y a un léger changement de syntaxe ( maintenant vous l'avez ).

Dans la déstructuration d'objets, l'ensemble du LHS et du RHS sont enveloppés à l'intérieur ()

Nous pouvons voir l'erreur que nous obtenons lorsque nous ne l'enveloppons pas à l'intérieur. ().Cela indique que la déclaration d'instruction est attendue.

Ce qui se passe en fait, c'est que placer quelque chose entre accolades {}confond JavaScript de sorte qu'il le considère comme un bloc et non comme un objet. Pour cette raison, il recherche une déclaration pour le bloc ( déclaration de fonction ), nous enfermons donc le code à l'intérieur (). Cela en fait une expression plutôt qu'un bloc, et nous obtenons nos résultats.

Échantillon 2:

Encore une fois l' restopérateur. Fonctionne comme dans les tableaux, sauf que cette fois, les valeurs restantes sont réduites à l'intérieur d'un objet car la structure à utiliser est définie par le LHS.

À quoi sert la déstructuration?

Comme le montrent les exemples ci-dessus, nous connaissons maintenant l'importance de la déstructuration. Il existe de nombreuses utilisations et différents cas d'utilisation de la déstructuration pour les objets et les tableaux. Nous allons essayer certains d'entre eux. ( PS - les exemples sont valables pour les objets et les tableaux, sauf indication contraire. )

Affectation des variables

Nous avons déjà vu comment les variables sont affectées dans les exemples ci-dessus, alors jetons un coup d'œil à une autre.

Dans cet exemple, un tableau déjà créé est directement affecté pour la déstructuration. Des valeurs sont néanmoins affectées aux variables.

Il en va de même pour l'objet.

Les valeurs par défaut

Parfois, il peut arriver que nous définissions un nnombre de variables pour obtenir des valeurs de la déstructuration, mais le tableau / objet peut n'avoir que des n-xéléments. Dans ce cas, des xvariables seront affectées undefined.

Nous pouvons voir que ce bn'est pas défini, car le tableau n'a tout simplement pas autant d'éléments à déstructurer et à affecter chaque variable.

La solution à cela est de donner des valeurs par défaut aux variables, donc s'il n'y a pas assez d'éléments, les variables prennent des valeurs par défaut plutôt que de devenir indéfinies.

Échange

L'échange est le processus d'échange de valeurs entre 2 variables ou plus. Une manière standard d'effectuer un échange consiste soit à utiliser une variable temporaire, soit à utiliser XOR. En JavaScript, la même chose peut être faite en utilisant la déstructuration.

Swap en utilisant une température variable. Le code est explicite.

En utilisant la déstructuration, nous échangeons simplement la position des éléments et Voilà! Échange terminé.

Ignorer les valeurs

Nous pouvons capturer et utiliser uniquement les valeurs requises et rejeter ou ignorer les valeurs inutiles.

Ici, nous pouvons voir que nous avons ignoré la valeur du milieu en ne l'attribuant à aucune variable, ce qui nous évite les tracas.

Affectation indirecte d'un retour de fonction

Ici, nous pouvons voir que la fonction x renvoie un tableau. À la ligne 4 où nous déstructurons, nous fournissons l'appel de fonction qui renvoie le tableau et non le tableau directement. Cela rend le code bien rangé et facile à lire et à comprendre.

Affectation à de nouvelles variables

Les propriétés peuvent être décompressées d'un objet et affectées à une variable avec un nom différent de celui de la propriété d'objet.

Nous pouvons voir que les valeurs des propriétés sont également des variables auxquelles des valeurs sont attribuées via la déstructuration.

Déstructuration d'objets imbriqués et de tableaux

Comme nous pouvons le voir, ces données sont un objet qui a une propriété appelée location qui à son tour contient un tableau dont les éléments sont des objets.

Avec la déstructuration, nous devons obtenir les valeurs de toutes les propriétés présentes à l'intérieur de l'objet à l'intérieur du tableau d'emplacement.

Nous avons donc créé un objet appelé obj qui contient la même structure que l'objet de données, et les valeurs que nous voulons décompresser sont fournies sous forme de variables (mylatitude, mylongitude, mycity). Ceux-ci sont à leur tour assimilés au tableau de données (identique à la syntaxe de déstructuration avant). Lorsque les variables sont imprimées, nous obtenons les valeurs respectives.

Destructuration avec boucle for-of

Dans l'extrait de code ci-dessus, nous avons un tableau d'objets people dont les propriétés contiennent à leur tour un objet (people> object> family). Nous voulons maintenant décompresser certaines des valeurs de l'objet en utilisant la boucle for..of.

Dans la boucle, nous avons assigné une variable objet, avec la même structure que dans le tableau people, en ignorant les valeurs dont nous n'avons pas besoin. Nous avons affecté des variables n & m respectivement au nom et aux propriétés mères, car ce sont les valeurs que nous voulons décompresser. À l'intérieur de la boucle, nous imprimons les variables et nous obtenons les valeurs nécessaires.

La grande image.

Vous devez utiliser la déstructuration dans votre code ou la pratiquer pour en faire une idée. Cela semble simple dans les exemples car les exemples sont juste pour vous faire comprendre les bases. Avec des opérations complexes / multiples (réduire ()!), La déstructuration peut rapidement devenir déroutante, ce que nous ne voulons pas!

De plus, vous pourriez également penser que la déstructuration n'est qu'une syntaxe de sucre pour effectuer un ensemble de tâches (comme nous pouvons donner aux variables la valeur de chaque élément d'un tableau en utilisant une boucle for). Dans une certaine mesure, nous pouvons dire que c'est du sucre, mais quand nous regardons l'image plus large «The Big Picture», nous comprendrons pourquoi la déstructuration a plus de valeur qu'un simple minimiseur de code.

JavaScript a de nombreuses opérations à la fois pour l'extraction et la construction de données, mais elles fonctionnent toutes sur un élément à la fois.

Pour construire

Pour extraire (toujours un à la fois)

Bien qu'il existe une syntaxe pour construire plusieurs propriétés à la fois, mais elle ne peut être utilisée qu'au moment de l'affectation - elle ne peut pas être utilisée pour modifier un objet existant.

Avant l'introduction d'ES6, il n'existait aucun mécanisme pour extraire toutes les données à la fois. C'est là que la déstructuration a vraiment fini par briller. Il vous permet d'extraire plusieurs propriétés d'un objet. Nous l'avons vu dans les exemples ci-dessus.

Pièges

Il n'y en a qu'un auquel je pense et nous en avons discuté:

  • Une instruction ne doit pas commencer par une accolade {

Conclusion

J'ai essayé de simplifier la déstructuration en démontrant autant de cas d'utilisation de déstructuration que possible. J'espère que cela vous a clarifié ce concept. Vous pouvez désormais utiliser la déstructuration pour écrire un code puissant et propre.