JavaScript moderne a de nombreuses nouvelles fonctionnalités qui facilitent l'écriture de code de manière simple et structurée. L'une des fonctionnalités modernes et pratiques disponibles dans ES6 + est la déstructuration de tableaux et d'objets.
Les frameworks JavaScript comme React.js et Angular encouragent l'utilisation de cette technique. Il est donc essentiel de comprendre ce qu'est la déstructuration et comment l'utiliser lors de l'écriture de code.
Qu'est-ce que la destruction d'objets et de tableaux en JavaScript?
La déstructuration en JavaScript fait référence au processus de décompression des valeurs d'un tableau ou d'un objet. Il fournit un moyen plus concis d'obtenir des valeurs à partir de tableaux ou d'objets sans effort lourd lorsque vous êtes intéressé par des éléments de tableau individuels ou des valeurs dans un objet.
Il est également utile lors du traitement des valeurs de retour d'une fonction ou d'une expression complexe. Cette notion est l'une des meilleures pratiques à suivre lors de l'écriture du code React.
Comment déstructurer les tableaux
Voici un exemple de code pour avoir une idée de la déstructuration d'un tableau :
constante arr = [1, 2];
constante [a, b] = arr ;
console.log (a) // imprime 1 sur la console
console.log (b) // imprime 2 sur la console
Ce code utilise la déstructuration pour assigner les valeurs de arr—1 et 2—aux variables un et b, respectivement. C'est le concept fondamental de la déstructuration. Vous avez un tableau ou un objet sur le côté droit, et vous décompressez les éléments et les affectez à des variables individuelles sur le côté gauche.
Sous le capot, JavaScript copie les valeurs de arr et les affecte aux variables du côté gauche comme ceci :
constante arr = [1,2];
constante a = arr[0];
constante b = arr[1];
Comme vous pouvez le voir, la déstructuration est une manière plus concise de le faire, contrairement à l'utilisation de la notation d'objet ou de crochet. Cependant, cette syntaxe sera probablement utile lorsque vous travaillez avec des tableaux complexes ou des fonctions qui renvoient des tableaux ou des chaînes.
Vérifiez l'exemple de code ci-dessous :
constante [jour, mois, date, année, heure, fuseau horaire] = Date().diviser(' ')
// Calling Date() renvoie la date actuelle au format :
// Lun 20 février 2023 13:07:29 GMT+0000
console.log (jour) // imprime lun
console.log (mois) // imprime février
console.log (date) // imprime 20
Dans cet exemple de code, nous créons une nouvelle chaîne avec la date actuelle en appelant Date(). Ensuite, nous utilisons diviser(), un Méthode de chaîne JavaScript, pour séparer les éléments de la chaîne en utilisant l'espace comme séparateur. diviser(' ') renvoie un tableau, et nous utilisons la déstructuration pour attribuer les valeurs aux variables individuelles.
N'oubliez pas que si votre tableau contient plus d'éléments que vous n'en décompressez, JavaScript ignorera les éléments supplémentaires.
constante arr = [1, 2, 3, 4];
constante [a, b] = arr ;
console.log (a) // imprime 1
console.log (b) // imprime 2
// les valeurs 3 et 4 ne sont affectées à aucune variable; ils sont ignorés
Dans ce cas, si vous souhaitez stocker les éléments restants dans une variable, utilisez un paramètre rest comme ceci :
constante arr = [1, 2, 3, 4];
constante [a, b,... reste] = arr ;
console.log (reste) // imprime [3,4]
Parfois, vous pouvez ne pas vous soucier d'un élément spécifique. Le modèle de déstructuration de JavaScript vous permet également d'ignorer certains éléments en utilisant une virgule vide.
constante arr = [1, 2, 3, 4];
constante [a,, c] = arr ;
console.log (c) // imprime 3
Le code ci-dessus utilise l'espace vide pour ignorer la valeur 2 dans le tableau arr. Au lieu d'attribuer une valeur 2 variable c, il passe à l'élément suivant du tableau. Il ignore également la quatrième valeur car il ne spécifie pas de variable dans laquelle la stocker.
En revanche, si vous avez besoin de moins d'articles que vous ne déballez, le processus attribuera le indéfini valeur à ces variables supplémentaires.
constante arr = [1];
constante [a, b] = arr ;
console.log (a) // imprime 1
console.log (b) // imprime undefined
Pour éviter que des variables ne soient définies, vous pouvez définir des valeurs par défaut si vous n'êtes pas sûr de la longueur du tableau comme suit (l'attribution de valeurs par défaut n'est pas obligatoire) :
constante arr = [1];
constante [un = '10', b = 'non fourni'] = arr ;
console.log (a) // imprime 1
console.log (b) // affiche "non fourni"
Cette déstructuration attribue la valeur 1 variable un, écrasant sa valeur par défaut. Variable b conserve sa valeur par défaut car aucune valeur n'est fournie.
Comment déstructurer des objets
La déstructuration d'objets n'est pas si différente des tableaux. La seule différence est que les tableaux sont itérables et que les objets ne le sont pas, ce qui entraîne une façon légèrement différente de faire les choses.
Lorsque vous travaillez avec des objets, les variables situées à gauche de l'opérateur d'affectation sont également initialisées comme des objets :
constante personne = {nom: 'Alvin', âge: 10, hauteur: 1};
constante {nom, âge, taille} = personne ;
console.log (nom) // imprime 'Alvin'
console.log (hauteur) // imprime 1
À partir du code, nous utilisons les noms de propriété du personne objet. Cependant, vous n'êtes pas obligé d'utiliser les noms de propriété exacts dans l'objet. Vous pouvez déstructurer et stocker les valeurs dans différents noms de variables comme suit :
constante personne = {nom: 'Alvin', âge: 10, hauteur: 1};
constante {nom: prénom, âge: années, hauteur: hauteuractuelle} = personne ;
console.log (prénom) // imprime 'Alvin'
console.log (hauteuractuelle) // imprime 1
Vous commencez par spécifier la valeur de la propriété que vous souhaitez déstructurer, puis spécifiez le nom de la variable que vous utiliserez pour stocker la valeur après deux-points. Et comme les tableaux, déstructurer un nom de propriété qui n'existe pas sera indéfini.
Pour gérer cela, vous pouvez également spécifier des valeurs par défaut au cas où le nom de propriété que vous souhaitez attribuer à une variable n'est pas disponible :
constante personne = {nom: 'Alvin', âge: 10, hauteur: 1};
constante {nom, âge, taille, lieu='Mondial'} = personne ;
console.log (nom) // imprime 'Alvin'
console.log (emplacement) // imprime 'Monde entier'
L'ordre des variables sur le côté gauche n'a pas d'importance avec un objet puisque les objets stockent les valeurs dans des paires clé-valeur. En tant que tel, le code suivant donnera les mêmes résultats :
constante personne = {nom: 'Alvin', âge: 10, hauteur: 1};
constante {âge, taille, nom} = personne ;
console.log (nom) // imprime 'Alvin'
console.log (hauteur) // imprime 1
Enfin, comme pour les tableaux, vous pouvez également utiliser le paramètre rest pour déstructurer plusieurs valeurs dans une variable comme ceci :
constante personne = {nom: 'Alvin', âge: 10, hauteur: 1};
constante {nom,... reste} = personne ;
console.log (nom) // imprime 'Alvin'
console.log (reste) // affiche { age: 10, taille: 1 }
Notez simplement que le paramètre rest doit toujours venir en dernier. Sinon, JavaScript lèvera une exception.
Améliorez la qualité de votre code avec la déstructuration de JavaScript
Les fonctionnalités modernes de Javascript, comme la déstructuration, vous permettent d'écrire du code hautement lisible. En utilisant la déstructuration, vous pouvez rapidement décompresser les valeurs des tableaux et des objets. La déstructuration peut également s'avérer utile dans d'autres situations, comme l'échange des valeurs de deux variables. J'espère que vous comprenez maintenant ce que signifie la déstructuration en JavaScript et que vous pourrez l'utiliser lors de l'écriture de code.
