Retour au cours

L'opérateur de décomposition (...) pour copier et combiner

JavaScript : Le cours complet pour débutant, de « Zéro à Héros »

93. L'opérateur de décomposition (Spread Operator - ...)

L'opérateur de décomposition (...) est représenté par trois points. Il « étale » ou déploie les éléments d'un itérable (comme un tableau) ou les propriétés d'un objet dans un autre tableau ou littéral d'objet.

1. Décomposition de tableaux (Combiner et Cloner)

C'est le moyen le plus simple de créer une copie superficielle (shallow copy) d'un tableau (résolvant le problème de référence).

javascript const arr1 = [1, 2]; const arr2 = [3, 4];

// Combiner des tableaux const combined = [...arr1, ...arr2, 5]; // [1, 2, 3, 4, 5]

// Cloner un tableau (crée une nouvelle référence) const arrCopy = [...arr1]; arrCopy.push(99); console.log(arr1); // [1, 2] (l'original est inchangé)

2. Décomposition d'objets (Fusionner)

Déploie les paires clé-valeur d'un objet dans un autre. Utile pour mettre à jour un état ou une configuration.

javascript const defaults = { color: 'red', size: 'M' }; const userSettings = { size: 'L', theme: 'dark' };

// Fusionner defaults, puis écraser avec les propriétés de userSettings const finalSettings = { ...defaults, ...userSettings, border: 'none' };

/* Résultat : { color: 'red', size: 'L', // Écrasé theme: 'dark', border: 'none' } */