Déstructuration d’objets ES6 et JavaScript

by

Angulaire et JavaScript

Ces dernières années, les aliments déconstruits sont devenus à la mode chez les gastronomes, où les chefs décomposent les plats selon leur idée de base (déstructuration) puis les reconstruisent à partir de leurs composants de base (restructuration). Qu’est-ce que cela a à voir avec JavaScript ? En l’occurrence, il prend également en charge la déstructuration et la restructuration des tableaux et des objets. Jusqu’à la sortie d’ECMAScript 6 (ES6), la partie déstructuration de l’équation était beaucoup plus difficile à réaliser que la restructuration, nécessitant plusieurs lignes de code à accomplir. Désormais, la possibilité de déstructurer un tableau ou un objet en une seule ligne de code offre une multitude de possibilités de codage. Dans ce didacticiel de développement Web, nous nous concentrerons aujourd’hui sur la déstructuration d’objets ; Le prochain article se concentrera sur la déstructuration mixte (objet et tableau), ainsi que sur certaines de ses utilisations plus avancées.

Vous cherchez à apprendre le développement Web dans un format de cours en ligne ? Consultez notre liste de certains des meilleurs cours de développement HTML et Web.

Principes de base de la déstructuration JavaScript

L’article Advanced TypeScript/ES6 Array Features aborde la déstructuration de Array et compare la nouvelle syntaxe ES6 avec celle des versions précédentes de JavaScript (JS). A titre d’exemple, nous avons assigné les éléments d’un tableau à quatre variables distinctes :

// in pre-ES6 Javascript
var ivoryKnightMembers = ['John', 'Rob', 'George', 'Steve'];
var john   = ivoryKnightMembers[0], 
    rob    = ivoryKnightMembers[1],
    George = ivoryKnightMembers[2], 
    Steve  = ivoryKnightMembers[3];

// using ES6 destructuring
let ivoryKnightMembers = ['John', 'Rob', 'George', 'Steve'];
let [john, rob, george, steve] = ivoryKnightMembers;

Dans ce didacticiel JavaScript, nous avons défini la déstructuration comme une fonctionnalité d’EcmaScript 2015 et de Typescript qui vous permet de décomposer la structure d’une entité. Bien que cette définition suffise dans le contexte du sujet traité, elle omet quelques autres points sur la déstructuration, tels que :

  • Il peut être appliqué à une structure complexe (c’est-à-dire un tableau ou un objet).
  • Il peut être utilisé à la fois pour l’affectation de variables et/ou la déclaration de variables.
  • Il prend en charge la syntaxe de déstructuration imbriquée pour gérer les structures imbriquées.

Alors couvrons chacun de ces points à tour de rôle, car ils s’appliquent aux objets.

Exemples de déstructuration d’objets en JavaScript

L’extrait de code ci-dessus est un exemple de déstructuration de tableau dans une affectation de variable. Étant donné que les objets JS stockent leurs attributs sous forme de tableaux associatifs, nous pouvons également placer un littéral d’objet sur le côté gauche d’une expression d’affectation pour la déstructuration d’objet :

const band = {
    drummer: 'George',
    bassist: 'Steve',
    guitarist: 'Rob',
    vocalist: 'John'
};

// Object Destructuring
const { drummer, bassist, guitarist, vocalist } = band;

// Outputs "George, Steve, Rob, John"
console.log(drummer, bassist, guitarist, vocalist);

Affectation de nouvelles valeurs aux variables locales

L’extrait suivant montre comment utiliser la déstructuration d’objet pour attribuer de nouvelles valeurs aux variables locales. Notez que nous devons utiliser une paire de parenthèses fermantes (()) dans l’expression d’affectation. Sinon, le littéral d’objet de déstructuration sera défini comme une instruction de bloc, ce qui générera une erreur car un bloc ne peut pas apparaître à gauche d’une expression d’affectation :

// Initialize local variables
let drummer="George";
let bassist="Steve";
let guitarist="Rob";
let vocalist="John";

const band = {
    drummer: 'George',
    bassist: 'Steve',
    guitarist: 'Rob',
    vocalist: 'John'
};

// Reassign firstname and lastname using destructuring
// Enclose in a pair of parentheses, since this is an assignment expression
({ drummer, guitarist } = band);

// bassist and vocalist remain unchanged
// Outputs "George, Steve, Rob, John"
console.log(drummer, bassist, guitarist, vocalist);

Affectation de valeurs par défaut et déstructuration en JS

L’affectation de déstructuration est très flexible, vous permettant d’affecter des variables qui ne correspondent à aucune clé de l’objet déstructuré. Si vous le faites, JS se fera un plaisir de créer la variable et de lui attribuer une valeur de indéfini. Sinon, vous pouvez attribuer vous-même une valeur par défaut comme ceci :

const band = {
    drummer: 'George',
    bassist: 'Steve',
    guitarist: 'Rob',
    vocalist: 'John'
};

// Assign default value of 'Allan' to keyboardist if undefined
const { drummer, bassist, guitarist, keyboardist="Allan", vocalist } = band;

// List band members using ES6 template literals
// Outputs "Ivory Knight are George, Steve, Rob, Allan, and John"
console.log(`Ivory Knight are ${drummer}, ${bassist}, ${guitarist}, ${keyboardist}, and ${vocalist}.`);

Lis: Utilisation de variables JavaScript et de fonctions intégrées

Modification des noms de variables en JavaScript

Vous pensez probablement déjà que l’affectation de variables à l’aide de la déstructuration est une chose assez puissante. Eh bien, ça va encore mieux. Les développeurs Web ne sont pas limités aux variables qui ont le même nom que leur clé d’objet correspondante. Les programmeurs peuvent attribuer à un nom de variable différent en utilisant la syntaxe [object_key]:[variable_name]. Vous souhaitez définir des valeurs par défaut ? Vous pouvez en affecter en utilisant la syntaxe [object_key]:[variable_name] = [default_value]:

const band = {
    drummer: 'George',
    bassist: 'Steve',
    guitarist: 'Rob',
    vocalist: 'John'
};

// Assign default value of 'Allan' to keyboards if undefined
const { drums: drummer, bass: bassist="New guy", guitars: guitarist, keyboards="Allan", vocals: vocalist } = band;

// List band members using ES6 template literals
// Outputs "Ivory Knight are George, New guy, Rob, Allan, and John"
console.log(`Ivory Knight are ${drums}, ${bass}, ${guitars}, ${keyboards}, and ${vocals}.`);

Destructuration d’objets imbriqués en JavaScript

Comme vous le savez certainement, les objets peuvent eux-mêmes contenir d’autres objets. Par conséquent, il est logique que les objets enfants puissent également être déstructurés. Voici un exemple qui montre comment procéder :

const band = {
    drummer: 'George',
    bassist: 'Steve',
    guitarist: 'Rob',
    vocalist: 'John',
    backupVocals: {
      lowBackups: 'Steve',
      highBackups: 'Rob'
    }
};

// Assign to local variables
const { drummer, bassist, guitarist, vocalist, backupVocals: {lowBackups, midBackups="N/A", highBackups} } = band;

// Outputs "Backup vocals performed by Steve, N/A, Rob."
console.log(`Backup vocals performed by ${lowBackups}, ${midBackups}, ${highBackups}.`);

Réflexions finales sur la destruction d’objets ES6

Dans ce didacticiel de développement Web, nous avons appris à déstructurer des objets à l’aide de la syntaxe ES6. Le prochain article se concentrera sur la déstructuration mixte (objet et tableau), ainsi que sur certaines de ses utilisations plus avancées.

En attendant, pourquoi ne pas consulter la démo des extraits de code d’aujourd’hui ? Vous pouvez même jouer avec eux si vous le souhaitez !

Lisez plus de didacticiels de programmation JavaScript et de guides de développement de logiciels.

Leave a Comment