Déstructuration et opérateur spread des objets
Extrayez les propriétés d’un objet avec la déstructuration, clonez et fusionnez des objets avec l’opérateur spread et utilisez les paramètres rest dans les signatures de fonctions.
Déstructuration et opérateur spread des objets est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que la déstructuration ?
La déstructuration extrait les valeurs d'objets et de tableaux pour les placer dans des variables nommées. C'est une forme abrégée de plusieurs instructions d'accès aux propriétés : elle rend le code concis et indique clairement quelles propriétés sont utilisées.
Bases de la déstructuration d'objets
Utilisez des accolades à gauche d'une affectation pour extraire des propriétés nommées.
const user = { name: 'Alice', age: 30, role: 'admin' };
// Without destructuring:
const name = user.name;
const age = user.age;
// With destructuring:
const { name, age, role } = user;
console.log(name); // 'Alice'
console.log(age); // 30Renommer des variables déstructurées
Utilisez la syntaxe property: newName pour renommer une propriété pendant la déstructuration. C'est utile lorsque le nom de la propriété entre en conflit avec une variable existante ou n'est pas assez explicite.
const { name: userName, age: userAge } = user;
console.log(userName); // 'Alice'Valeurs par défaut lors de la déstructuration
Si une propriété vaut undefined, une valeur par défaut est utilisée. Vous pouvez combiner cette syntaxe avec le renommage.
const { name, role = 'viewer', theme = 'light' } = user;
// role is 'admin' (from object)
// theme is 'light' (default — not in object)Déstructuration d'objets imbriqués
Déstructurez des objets imbriqués en fournissant des motifs imbriqués.
const order = {
id: 42,
customer: { name: 'Bob', email: 'bob@example.com' },
total: 99.99
};
const { id, customer: { name, email }, total } = order;
console.log(name); // 'Bob'Déstructuration de tableaux
Utilisez des crochets pour déstructurer les tableaux selon la position des éléments. Ignorez des éléments en plaçant des virgules.
const [first, second, , fourth] = [10, 20, 30, 40];
console.log(first); // 10
console.log(second); // 20
console.log(fourth); // 40
// Swap variables:
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1Déstructuration des paramètres de fonction
Déstructurez directement les paramètres des fonctions pour obtenir des interfaces plus claires et un code explicite. Cette pratique est très courante dans les fonctions de composants React.
function greet({ name, greeting = 'Hello' }) {
return `${greeting}, ${name}!`;
}
greet({ name: 'Alice' }); // 'Hello, Alice!'
greet({ name: 'Bob', greeting: 'Hi' }); // 'Hi, Bob!'L'opérateur de décomposition sur les objets
L'opérateur de décomposition { ...obj } crée une copie superficielle d'un objet et peut fusionner des objets. Lorsque des clés sont en conflit, les clés placées plus tard remplacent les précédentes.
const defaults = { theme: 'light', lang: 'en', debug: false };
const userPrefs = { theme: 'dark', lang: 'fr' };
const settings = { ...defaults, ...userPrefs };
// { theme: 'dark', lang: 'fr', debug: false }L'opérateur de décomposition sur les tableaux
[...arr] crée une copie superficielle d'un tableau. Utilisez la décomposition pour concaténer des tableaux et ajouter des éléments au début ou à la fin sans modifier le tableau d'origine.
const base = [1, 2, 3];
const extended = [...base, 4, 5]; // [1, 2, 3, 4, 5]
const prepended = [0, ...base]; // [0, 1, 2, 3]
const combined = [...base, ...extended]; // [1, 2, 3, 1, 2, 3, 4, 5]Syntaxe rest dans la déstructuration
La syntaxe rest rassemble les propriétés ou les éléments restants dans un nouvel objet ou tableau. Rest doit être le dernier motif.
const { name, ...rest } = { name: 'Alice', age: 30, role: 'admin' };
console.log(name); // 'Alice'
console.log(rest); // { age: 30, role: 'admin' }
const [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1
console.log(tail); // [2, 3, 4]Copie superficielle et copie profonde
La décomposition et la déstructuration créent toutes deux des copies superficielles. Les objets et tableaux imbriqués restent des références partagées. Effectuez une copie profonde avec structuredClone(obj) (version moderne) ou JSON.parse(JSON.stringify(obj)) (version historique).
const a = { x: 1, nested: { y: 2 } };
const b = { ...a };
b.x = 99; // a.x is still 1 (shallow copy OK)
b.nested.y = 99; // a.nested.y is now 99! (reference shared)Vérification rapide
Que fait const { a, ...rest } = obj ?
Récapitulatif : déstructuration et décomposition
La déstructuration d'objets extrait les propriétés nommées. La déstructuration de tableaux extrait les éléments selon leur position. Renommez avec deux-points et définissez des valeurs par défaut avec =. Utilisez des motifs imbriqués pour les objets profonds. La décomposition crée des copies superficielles et fusionne des objets ou des tableaux. Rest rassemble les propriétés ou les éléments restants.
Questions Fréquemment Posées
La leçon « Déstructuration et opérateur spread des objets » est-elle gratuite ?
Oui — le texte complet de « Déstructuration et opérateur spread des objets » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Déstructuration et opérateur spread des objets » ?
Extrayez les propriétés d’un objet avec la déstructuration, clonez et fusionnez des objets avec l’opérateur spread et utilisez les paramètres rest dans les signatures de fonctions. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Déstructuration et opérateur spread des objets » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Méthodes de tableau : map, filter, reduce et find
- Déstructuration et opérateur spread des objets
- Littéraux de modèle et chaînage optionnel
- Modules : import et export