JavaScript moderne avec ES6-ES13 (tutoriel JS)

La destructuration en JavaScript : Extraire des valeurs d'objets et de tableaux

Toutes les vidéos du tutoriel JavaScript moderne avec ES6-ES13 (tutorial JS)

Le Destructuring en JavaScript est une technique utile qui te permet d'extraire des valeurs spécifiques à partir d'objets et de tableaux. Cela permet d'obtenir un code plus élégant et compact, ce qui te fait écrire moins de lignes. Voyons comment tu peux utiliser efficacement le Destructuring dans tes projets.

Principales conclusions

  • Le Destructuring permet l'extraction facile de valeurs à partir d'objets et de tableaux.
  • Les mutations des variables peuvent être évitées par le renommage lors du Destructuring.
  • Cette technique peut améliorer considérablement la lisibilité de ton code, surtout lorsqu'il s'agit de recevoir plusieurs valeurs de retour de fonctions.

Guide étape par étape

Notions de base du Destructuring d'objets

Tout d'abord, examinons l'utilisation du Destructuring avec des objets. Tu peux commencer avec un simple objet qui a deux propriétés. Crée un objet avec les propriétés x et y:

Déstructuration en JavaScript : Extraire des valeurs optimales des objets et des tableaux

Pour extraire les valeurs de ces propriétés, la méthode traditionnelle nécessiterait deux affectations séparées:

const x = obj.x;
const y = obj.y;
La déstructuration en JavaScript : Extraire des valeurs optimales d'objets et de tableaux

Cependant, c'est peu pratique, car nous devons répéter la même instruction pour chaque propriété.

Avec cette syntaxe, l'objet obj est mentionné à droite et les propriétés x et y sont écrites à gauche entre accolades. Vérifions le résultat:

Flexibilité dans la sélection des propriétés

Une des caractéristiques utiles du Destructuring est sa flexibilité dans la sélection des variables. Tu n'es pas obligé d'extraire toutes les propriétés; tu peux aussi choisir uniquement x, y ou une combinaison des deux.

Renommage de variables lors du Destructuring

Le Destructuring te permet également de renommer des variables pour éviter des conflits avec des noms déjà existants. Si tu as la valeur de retour d'une fonction, tu peux changer le nom de la variable en utilisant un deux-points:

Supposons que tu reçoives l'objet d'une fonction appelée getCoordinates.

Destructuring des tableaux – Une approche différente

En plus des objets, le Destructuring peut également être utilisé pour les tableaux. Si tu as une fonction qui retourne un tableau, tu peux également y affecter facilement les valeurs:

Il est à noter que tu remplaces les accolades par des crochets. Cela signifie que les variables sont assignées dans l'ordre où elles apparaissent dans le tableau.

Omissions de valeurs dans le tableau

Une autre application utile du Destructuring pour les tableaux est la possibilité d'ignorer les valeurs non nécessaires.

Destructuration en JavaScript : Extraire des valeurs optimales à partir d'objets et de tableaux

Ici, b est ignoré et les valeurs ne sont stockées que dans les variables a et c.

Résumé - Destructuring en JavaScript: Extraction élégante de valeurs à partir d'objets et de tableaux

Le Destructuring est un moyen élégant d'extraire des valeurs d'objets et de tableaux en JavaScript. Il améliore la lisibilité et l'efficacité de ton code en permettant de déclarer plusieurs valeurs en une seule ligne. De plus, cette technique te permet de gérer les conflits de noms de variables existants et d'omettre élégamment les valeurs non nécessaires.

Questions fréquemment posées

Comment fonctionne le Destructuring en JavaScript?Le Destructuring est une syntaxe qui te permet d'extraire facilement des éléments des tableaux et des objets et d'assigner des variables.

Puis-je ne destructurer qu'une partie d'un objet?Oui, tu peux spécifiquement extraire uniquement les propriétés dont tu as besoin.

Comment renommer des variables lors du Destructuring?C'est possible en utilisant un deux-points suivi du nouveau nom de variable, par exemple { prop: newName }.

Puis-je utiliser le Destructuring pour les tableaux?Oui, tu peux également utiliser le Destructuring pour les tableaux en utilisant des crochets pour extraire les valeurs.

Puis-je ignorer une valeur lors du Destructuring?Oui, c'est possible en laissant simplement une place vide dans le Destructuring_ARRAY.