📢 Je vous présente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structuré en trois niveaux : débutant, intermédiaire et avancé
  • 3) traite des pratiques les plus récentes d'Angular, comme les signaux, les vues différées, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

Opérateur Spread

L'opérateur spread (...) est une fonctionnalité introduite dans ES6 (ECMAScript 2015), qui permet d'étaler, ou de « décomposer » les éléments d'un itérable (comme un tableau) en éléments individuels. Cet opérateur est très utile pour plusieurs cas d'utilisation en JavaScript, notamment pour la copie de tableaux, la fusion de tableaux ou d'objets, et le passage d'arguments à une fonction. Voici quelques exemples illustrant ces utilisations :

1. Copie de Tableaux

Vous pouvez utiliser l'opérateur spread pour créer une copie d'un tableau. Cela est particulièrement utile pour éviter la modification du tableau original.

javascript
let original = [1, 2, 3];
let copie = [...original];

// Modifier la copie ne change pas l'original
copie.push(4);
console.log(original); // [1, 2, 3]
console.log(copie);    // [1, 2, 3, 4]

2. Fusion de Tableaux

L'opérateur spread peut être utilisé pour fusionner plusieurs tableaux en un seul.

javascript
let premiers = [1, 2, 3];
let suivants = [4, 5, 6];

let combines = [...premiers, ...suivants];
console.log(combines); // [1, 2, 3, 4, 5, 6]

3. Combinaison d'Objets

De même, l'opérateur spread peut être utilisé pour combiner ou étendre des objets.

javascript
let objetA = { a: 1, b: 2 };
let objetB = { b: 3, c: 4 };

let combine = { ...objetA, ...objetB };
console.log(combine); // { a: 1, b: 3, c: 4 }

Dans cet exemple, la propriété b de objetB écrase la valeur de b dans objetA.

4. Passage d'Arguments dans les Fonctions

L'opérateur spread peut également être utilisé pour passer les éléments d'un tableau comme arguments distincts à une fonction.

javascript
function somme(x, y, z) {
    return x + y + z;
}

let nombres = [1, 2, 3];
console.log(somme(...nombres)); // 6

Remarques

  • Immutabilité : Très utile dans la programmation fonctionnelle pour créer des copies de tableaux ou d'objets sans modifier les originaux.
  • Lisibilité et Maintenance : Permet d'écrire un code plus concis et plus lisible, notamment lors de la manipulation de structures de données complexes.
  • Flexibilité : Facilite le passage de paramètres et la combinaison de données, rendant le code plus flexible et adaptable.

Chaque mois, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !