💡 En clair
La déstructuration extrait des valeurs d'un tableau dans des variables distinctes en une seule ligne : let [a, b, c] = tableau;. Le spread ... étale les éléments pour les copier, les fusionner ou les passer en arguments. Les deux vont de pair avec la copie de tableau.
Déstructuration — extraire dans des variables :
let fruits = ["pomme", "banane", "mangue"];
let [premier, deuxieme, troisieme] = fruits;
console.log(premier, deuxieme, troisieme);
let [a, , c] = fruits;
console.log(a, c);
let [x = 1, y = 2] = [10];
console.log(x, y);
Console
pomme banane mangue
pomme mangue
10 2
✏️ Ligne par ligne
let [premier, deuxieme, troisieme] = fruits;extrait dans l'ordre : trois variables pour trois éléments.
let [a, , c] = fruits;la virgule vide ignore le 2e élément.
let [x = 1, y = 2] = [10];valeurs par défaut si l'élément est absent.
Échanger deux variables sans variable temporaire :
let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y);
Spread ... — copier, fusionner, passer en arguments :
let original = [1, 2, 3];
let copie = [...original];
let a = [1, 2], b = [3, 4];
let fusion = [...a, ...b];
let complet = [1, ...a, 5];
console.log(Math.max(...[5, 2, 8, 1]));
let lettres = [..."abc"];
console.log(lettres);
Rest operator — récupérer les éléments restants :
let fruits = ["pomme", "banane", "mangue"];
let [premier, ...reste] = fruits;
console.log(premier, reste);
Console
pomme [ 'banane', 'mangue' ]
⚠️ Pièges fréquents
let copie = original ne copie PAS le tableau : les deux variables pointent vers le même. Utiliser [...original] ou original.slice().- Pour les tableaux imbriqués,
[...] ne copie que le premier niveau (shallow copy). Utiliser structuredClone(original) pour une copie profonde.
💡 Astuce
Le spread ... et le rest ...reste utilisent la même syntaxe, mais dans des contextes opposés : spread « ouvre » un tableau, rest « ramasse » plusieurs valeurs dans un tableau.