Les nouveautés d'Angular 19 en 4 minutes

Angular 19 vient de sortir, et il y a beaucoup de nouveautés intéressantes : hydratation incrémentale, linkedSignal, l'API des ressources, et plein d'autres choses. Venez découvrir tout ça en moins de 4 minutes !

Skip to content

Vous souhaitez recevoir de l'aide sur ce sujet ? rejoignez la communauté Angular.fr sur Discord.

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 !