Une réintroduction à la tâche de destruction

Si vous écrivez en JavaScript, vous connaissez probablement ES2015 et toutes les nouvelles normes de langage introduites. Une telle norme qui a connu une popularité incroyable est celle de la déstructuration. La possibilité de «plonger» dans un tableau ou un objet et de référencer quelque chose à l'intérieur de celui-ci plus directement. Cela ressemble généralement à ceci.

 const response = {
   statut: 200
   Les données: {}
}

// au lieu de response.data nous obtenons ...
const {data} = response // les données référencent directement l'objet de données


const objectList = [ { key: 'value' }, { key: 'value' }, { key: 'value' } ]

// au lieu de objectList [0]objectList [1]etc nous obtenons ...
const [obj, obj1, obj2] = objectList // maintenant chaque objet peut être référencé directement

Cependant, l'attribution de déstructuration est un élément de syntaxe si puissant que de nombreux développeurs, même ceux qui l'utilisent depuis sa première publication, oublient certaines de ses tâches. Dans cet article, nous allons passer en revue cinq exemples concrets pour la déstructuration des objets et des tableaux, parfois les deux! Et juste pour le plaisir, je vais inclure un exemple insignifiant que je suis tombé sur l’autre jour.

1. Destruction imbriquée

Pouvoir accéder à une clé de niveau supérieur à l’intérieur d’un objet ou au premier élément d’un tableau est puissant, mais aussi quelque peu limitant. Cela n’élimine qu’un niveau de complexité et nous aboutissons toujours à une série de points ou de [0] références pour accéder à ce que nous recherchons vraiment.

La destruction se révèle finalement plus efficace. Et il peut y avoir des raisons valables pour le faire. Prenons cet exemple de réponse d'objet à partir d'une requête HTTP. Nous voulons aller au-delà de l'objet de données et accéder uniquement à l'utilisateur. Tant que nous connaissons les clés que nous recherchons, ce n’est pas un problème.

 const response = {
  statut: 200,
  Les données: {
    utilisateur: {
       nom: 'Rachel',
      titre: 'rédacteur en chef'
    },
    Compte: {},
    société: 'Smashing Magazine'
  }
}

const {data: {utilisateur}} = réponse // utilisateur est {nom: 'Rachel', titre: 'rédacteur en chef'} 

Il est possible de faire la même chose avec des tableaux imbriqués. Dans ce cas, vous n’avez pas besoin de connaître la clé car il n’en existe pas. Ce que vous devez savoir, c’est la position de ce que vous recherchez. Vous devrez fournir une variable de référence (ou un espace réservé par virgule) pour chaque élément et jusqu’à celui que vous recherchez (nous y reviendrons plus tard). La variable peut être nommée n'importe quoi car elle ne tente pas de faire correspondre une valeur à l'intérieur du tableau.

 const smashingContributors = [['rachel', ['writer', 'editor', 'reader']]['laurie', ['writer', 'reader']]

const [[rachel, roles]] = smashingContributors
// rachel est 'rachel'
// roles is [ 'writer', 'editor', 'reader' ] 

N'oubliez pas que ces fonctions doivent être utilisées judicieusement, comme pour tout outil. Reconnaissez votre cas d'utilisation et l'audience de votre base de code. Envisagez la lisibilité et la facilité de changement par la suite. Par exemple, si vous souhaitez accéder à un sous-tableau uniquement, une carte conviendrait peut-être mieux.

2. Destructuration des objets et des tableaux

Les objets et les tableaux sont des structures de données courantes. Si commune, en fait, que l'une apparaît souvent dans l'autre. Au-delà de la déstructuration imbriquée, nous pouvons accéder aux propriétés imbriquées même si leur structure est différente de la structure externe.

Prenez cet exemple de tableau dans un objet.

 const organization = {
    utilisateurs: ['rachel', 'laurie', 'eric', 'suzanne'],
    nom: 'Smashing Magazine',
    site: 'https://www.smashingmagazine.com/'
}

const {utilisateurs: [rachel]} = organisation // rachel est 'rachel' 

Le cas d'utilisation opposé est également valable. Un tableau d'objets.

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}]

const [{name}] = utilisateurs // nom est 'rachel' 

Il se trouve que cet exemple présente un problème. Nous ne pouvons accéder qu'au nom du premier utilisateur; sinon, nous tenterons d’utiliser «nom» pour référencer deux chaînes différentes, ce qui n’est pas valide. Notre prochain scénario de déstructuration devrait résoudre ce problème.

3. Alias ​​

Comme nous l’avons vu dans l’exemple ci-dessus (lorsque nous avons des clés à répéter dans différents objets que nous voulons extraire), nous ne pouvons pas le faire de la manière “typique”. Les noms de variables ne peuvent pas être répétés dans la même portée (c’est la façon la plus simple de l’expliquer, c’est évidemment plus compliqué que cela).

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}]

const [{name: rachel}, {name: laurie}] = utilisateurs // rachel est 'rachel' et laurie est 'laurie' 

L'aliasing ne s'applique qu'aux objets. C’est parce que les tableaux peuvent utiliser n’importe quel nom de variable choisi par le développeur, au lieu de devoir faire correspondre une clé d’objet existante.

4. Valeurs par défaut

La restructuration suppose souvent que la valeur à laquelle elle se réfère est présente, mais qu’en est-il si ce n’est pas le cas? Il n’est jamais agréable de lire du code avec des valeurs indéfinies. Lorsque les valeurs par défaut sont utiles.

Voyons comment elles fonctionnent pour les objets.

 const user = {name: 'Luke', organisation: 'Acme Publishing}}
const {name = 'Brian', role = 'publisher'} = utilisateur
// nom est Luke
// role is publisher 

Si la clé référencée a déjà une valeur, la valeur par défaut est ignorée. Si la clé n'existe pas dans l'objet, la valeur par défaut est utilisée.

Nous pouvons faire quelque chose de similaire pour les tableaux.

 const roleCounts = [2]
const [editors = 1, contributors = 100] = roleCounts
// editors is 2
// contributors is 100 

Comme dans l'exemple des objets, si la valeur existe, la valeur par défaut est ignorée. En regardant l'exemple ci-dessus, vous remarquerez peut-être que nous sommes en train de déstructurer plus d'éléments qu'il n'en existe dans le tableau. Qu'en est-il de la déstructuration de moins d'éléments?

5. Ignorer les valeurs

L'un des avantages de la déstructuration est qu'elle vous permet d'accéder aux valeurs qui font partie d'une structure de données plus grande. Cela implique notamment d'isoler ces valeurs et d'ignorer le reste du contenu, si vous le souhaitez.

Nous en avons déjà vu un exemple précédemment, mais isolons le concept dont nous parlons.

 const user = {name: 'Luke', organisation: 'Acme Publishing'}
const {nom} = utilisateur
// name is Luke 

Dans cet exemple, nous ne détruisons jamais l’organisation et c’est parfaitement correct. Il est toujours disponible pour référence dans l’objet user comme ceci.

 user.organization 

Pour les tableaux, il existe en réalité deux façons d’ignorer des éléments. Dans l'exemple des objets, nous référençons spécifiquement les valeurs internes à l'aide du nom de clé associé. Lorsque les tableaux sont déstructurés, le nom de la variable est attribué par position. Commençons par ignorer les éléments à la fin du tableau.

 const roleCounts = [2, 100, 100000]
const [editors, contributors] = roleCounts
// editors is 2
// contributors is 100 

Nous avons déstructuré les premier et deuxième éléments du tableau et les autres éléments ne sont pas pertinents. Mais qu'en est-il des éléments plus tard? Si sa position dépend de sa position, ne devons-nous pas déstructurer chaque élément jusqu’à atteindre celui que nous voulons?

En fin de compte, ce n’est pas le cas. Au lieu de cela, nous utilisons des virgules pour impliquer l’existence de ces éléments, mais sans variables de référence, elles sont ignorées.

 const roleCounts = [2, 100, 100000]
const [, contributors, readers] = roleCounts
// contributeurs est 100
// readers is 100000 

Et nous pouvons faire les deux en même temps. Ignorer des éléments où nous voulons en utilisant le paramètre fictif. Et encore une fois, comme dans l'exemple objet, les éléments «ignorés» sont encore disponibles dans le tableau roleCounts .

Exemple Wonky

La puissance et la polyvalence de la déstructuration permettent également des choses vraiment bizarres. Il est difficile de dire s'ils seront utiles ou non, mais sachez que c'est une option!

Vous pouvez par exemple utiliser la déstructuration pour réaliser des copies superficielles.

 const obj = {clé: 'valeur' , arr: [1,2,3,4]}
const {arr, arr: copie} = obj
// arr et copy sont tous les deux [1,2,3,4] 

Une autre fonction de la déstructuration est le déréférencement.

 const obj = {node: {exemple: 'chose'}}
const {noeud, noeud: {exemple}} = obj
// noeud est {exemple: 'chose'}
// exemple: 'chose' 

Comme toujours, la lisibilité est de la plus haute importance et tous ces exemples doivent être utilisés judiciairement. Mais connaître toutes vos options vous aide à choisir la meilleure.

Conclusion

JavaScript est rempli d'objets et de tableaux complexes. Qu'il s'agisse de la réponse d'une requête HTTP ou de fichiers statiques, il est important de pouvoir accéder efficacement au contenu incorporé. Utiliser une affectation de déstructuration est un excellent moyen de le faire. Il gère non seulement plusieurs niveaux d’imbrication, mais il permet un accès ciblé et fournit des valeurs par défaut dans le cas de références indéfinies.

Même si vous utilisez la déstructuration depuis des années, de nombreux détails sont cachés dans la spécification. J'espère que cet article a rappelé les outils que le langage vous offre. La prochaine fois que vous écrirez du code, l’un d’eux sera peut-être utile!

(dm, yk, il)