Déstructuration d’objet JavaScript

Résumé : dans ce tutoriel, vous découvrirez la déstructuration d’objet JavaScript qui attribue les propriétés d’un objet à des variables individuelles.

Si vous voulez apprendre à déstructurer un tableau, vous pouvez consulter le tutoriel de déstructuration de tableau.

Introduction à l’affectation de déstructuration d’objet JavaScript

Supposons que vous ayez un objet person avec deux propriétés : firstName et lastName.

Code language: JavaScript (javascript)

Avant ES6, lorsque vous souhaitez attribuer des propriétés de l’objet person à des variables, vous le faites généralement comme suit:

Code language: JavaScript (javascript)

ES6 introduit la syntaxe de déstructuration d’objets qui fournit une autre façon d’attribuer les propriétés d’un objet à des variables:

Code language: JavaScript (javascript)

Dans cet exemple, les propriétés firstName et lastName sont affectées respectivement aux variables fName et lName.

Dans cette syntaxe:

Code language: JavaScript (javascript)

L’identifiant avant les deux-points (:) est la propriété de l’objet et l’identifiant après les deux-points est la variable.

Notez que le nom de la propriété est toujours à gauche, qu’il s’agisse d’une syntaxe littérale d’objet ou de déstructuration d’objet.

Si les variables ont les mêmes noms que les propriétés de l’objet, vous pouvez rendre le code plus concis comme suit:

Code language: JavaScript (javascript)

Dans cet exemple, nous avons déclaré deux variables firstName et lastName et attribué les propriétés de l’objet person aux variables de la même instruction.

Il est possible de séparer la déclaration et la cession. Cependant, vous devez entourer les variables entre parenthèses:

Si vous n’utilisez pas les parenthèses, le moteur JavaScript interprétera le côté gauche comme un bloc et lancera une erreur de syntaxe.

Lorsque vous affectez une propriété qui n’existe pas à une variable à l’aide de la déstructuration de l’objet, la variable est définie sur undefined. Par exemple:

Code language: JavaScript (javascript)

Dans cet exemple, la propriété middleName n’existe pas dans l’objet person, par conséquent, la variable middleName est undefined.

Définition des valeurs par défaut

Vous pouvez attribuer une valeur par défaut à la variable lorsque la propriété d’un objet n’existe pas. Exemple:

Code language: JavaScript (javascript)

Dans cet exemple, nous avons affecté la chaîne vide à la variable middleName lorsque l’objet person n’a pas la propriété middleName.

De plus, nous attribuons la propriété currentAge à la variable age avec la valeur par défaut de 18.

Cependant, lorsque l’objet person a la propriété middleName, l’affectation fonctionne comme d’habitude:

Code language: JavaScript (javascript)

Déstructurer un objet null

Une fonction peut renvoyer un objet ou null dans certaines situations. Par exemple:

Code language: JavaScript (javascript)

Et vous utilisez l’affectation de déstructuration d’objet:

Code language: JavaScript (javascript)

Le code va lancer un TypeError:

Code language: JavaScript (javascript)

Pour éviter cela, vous pouvez utiliser l’opérateur OR (||) pour remplacer l’objet null par un objet vide:

Code language: JavaScript (javascript)

Maintenant, aucune erreur ne se produira. Et les firstName et lastName seront undefined.

Déstructuration d’objets imbriqués

En supposant que vous avez un objet employee qui a un objet name comme propriété:

Code language: JavaScript (javascript)

L’instruction suivante déstructure les propriétés de l’objet name imbriqué en variables individuelles:

Code language: JavaScript (javascript)

Il est possible d’assigner plusieurs propriétés à plusieurs variables:

Code language: JavaScript (javascript)

Arguments de la fonction de déstructuration

Supposons que vous ayez une fonction qui affiche l’objet person:

Code language: JavaScript (javascript)

Il est possible de déstructurer l’argument objet passé dans la fonction comme ceci:

Code language: JavaScript (javascript)

Cela semble moins verbeux, surtout lorsque vous utilisez de nombreuses propriétés de l’objet argument. Cette technique est souvent utilisée dans React.

Résumé

• La déstructuration d’objet affecte par défaut les propriétés d’un objet à des variables portant les mêmes noms.