6.8 L'Opérateur de diffusion

Dans la vidéo précédente, vous avez vu comment combiner deux tableaux avec concat. Il existe une alternative ES6 plus claire et plus flexible : l'opérateur de diffusion ... (spread operator).

Combiner deux tableaux

Avec spread, on déclare un nouveau tableau et on « répand » à l'intérieur les éléments individuels de chaque tableau source.

const first = [1, 2, 3];
							const second = [4, 5, 6];
							const combined = [...first, ...second];
							// [1, 2, 3, 4, 5, 6]

L'avantage par rapport à concat est la visualisation : on voit clairement qu'on construit un nouveau tableau et on contrôle l'ordre précis des éléments. On peut aussi insérer facilement des éléments entre ou aux extrémités.

const combined = [0, ...first, 'middle', ...second, 7];

Faire l'équivalent avec concat et des manipulations d'index serait beaucoup plus pénible.

Cloner un tableau avec spread

L'opérateur de diffusion fonctionne aussi pour cloner. Le pattern est le même que pour les objets, vu dans la section précédente :

const copy = [...combined];

C'est strictement équivalent à combined.slice() sans argument, mais plus explicite sur l'intention. Comme pour les objets, c'est une copie de surface : les éventuels sous-tableaux ou objets imbriqués restent partagés par référence.

L'opérateur spread est devenu omniprésent en JavaScript moderne. Vous le retrouverez dans la déstructuration, les paramètres rest, la propagation d'arguments, etc. Maîtrisez-le bien, c'est un gain de clarté énorme dans votre code au quotidien.

En résumé

L'opérateur de diffusion (spread operator) est présenté comme une alternative plus propre et flexible à la méthode `concat()` pour combiner des tableaux en JavaScript ES6. Cet opérateur répartit les éléments d'un tableau individuellement dans un nouveau tableau, offrant une meilleure visualisation du résultat final. Il permet également d'insérer facilement des éléments supplémentaires entre ou après les tableaux combinés, et peut remplacer la méthode `slice()` pour copier un tableau.

Points clés

• L'opérateur de diffusion (...) répartit les éléments d'un tableau individuellement dans un nouveau tableau
• C'est une approche plus propre que concat() pour combiner deux tableaux avec meilleure lisibilité
• Il offre plus de flexibilité : on peut facilement insérer des éléments entre les tableaux combinés
• La syntaxe montre clairement la structure du tableau résultant comparée à concat()
• On peut utiliser l'opérateur de diffusion pour copier un tableau, remplaçant slice() sans arguments

Questions fréquentes

Quelle est la différence entre l'opérateur de diffusion et la méthode concat()?

L'opérateur de diffusion est plus flexible et offre une meilleure visualisation du tableau combiné. Avec concat(), si vous voulez insérer un élément entre deux tableaux, le code devient plus complexe, tandis qu'avec l'opérateur de diffusion, c'est très simple et lisible.

Comment utiliser l'opérateur de diffusion pour copier un tableau?

Vous créez un nouveau tableau et y répartissez tous les éléments du tableau original : const copie = [...tableauOriginal]. C'est l'équivalent de const copie = tableauOriginal.slice().

Peut-on ajouter des éléments supplémentaires en combinant des tableaux avec l'opérateur de diffusion?

Oui, c'est l'un des avantages majeurs. Vous pouvez facilement insérer des éléments entre ou après les tableaux : const combined = [...first, nouvelElement, ...second].