Angular

Appearance

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]
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]
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 }
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
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.