Décomposition d'un tableau en séquence de valeurs

const nombres = [10, 20, 30, 40];
console.log(...nombres); // 10 20 30 40

Fusion de plusieurs tableaux

const premiers = [2, 3, 5];
const pairs = [4, 6, 8];
const impairs = [1, 3, 7];
const combine = [...premiers, ...pairs, ...impairs];
console.log(combine); // [2, 3, 5, 4, 6, 8, 1, 3, 7]

Transmission d'éléments comme arguments de fonction

const valeurs = [4, 8, 15];

function additionner(a, b) {
    console.log(a + b);
}
additionner(...valeurs); // 12

Association avec la déstructuration

L'opérateur de décomposition peut être combiné à la déstructuration, mais il doit obligatoirement figurer en dernière poistion, sous peine de déclencher une erreur de syntaxe.

const [premier, ...reste] = [1, 2, 3, 4, 5];
console.log(premier); // 1
console.log(reste);   // [2, 3, 4, 5]

const [...debut, dernier] = [1, 2, 3, 4];
// SyntaxError: Rest element must be last element

Décomposition do'bjets itérables

Avec un Set

const monSet = new Set();
monSet.add(5);
monSet.add(10);
monSet.add(10);
monSet.add(15);
console.log(monSet);              // Set { 5, 10, 15 }
console.log(Array.from(monSet));  // [5, 10, 15]
console.log(...monSet);           // 5 10 15

Avec un Map

const monMap = new Map();
monMap.set('a', 100);
monMap.set('b', 200);
monMap.set('c', 300);
console.log(Array.from(monMap)); // [["a", 100], ["b", 200], ["c", 300]]
console.log(...monMap);          // ["a", 100] ["b", 200] ["c", 300]

Utilisation d'expressions conditionnelles

const seuil = 5;
const seriesPaires = [2, 4, 6, 8];
const seriesImpaires = [1, 3, 5, 7];
const resultat = [...(seuil > 3 ? seriesImpaires : seriesPaires), "fin"];
console.log(resultat); // [1, 3, 5, 7, "fin"]

Note : l'opérateur de décomposition ne peut être placé entre parenthèses que lors d'un appel de fonction.

Copie de tableau

const source = [7, 14];
// Méthode 1 : décomposition directe
const copie1 = [...source];
// Méthode 2 : déstructuration complète
const [...copie2] = source;
console.log(source); // [7, 14]
console.log(copie1); // [7, 14]
console.log(copie2); // [7, 14]

Copie superficielle (shallow copy)

Les deux approches produisent une copie superficielle : les références d'objets ne sont pas dupliquées en profondeur.

const tableauA = [{ x: 1 }];
const tableauB = [{ y: 2 }];
const fusionConcat = tableauA.concat(tableauB);
const fusionSpread = [...tableauA, ...tableauB];
console.log(fusionConcat[0] === fusionSpread[0]); // false
// Mais au sein d'une même source :
const original = [{ val: 10 }];
const clone = [...original];
console.log(original[0] === clone[0]); // true
clone[0].val = 99;
console.log(original[0]); // { val: 99 }

Décomposition d'une chaîne de caractères

console.log([...' monde']); // [" ", "m", "o", "n", "d", "e"]
console.log([...' monde'].length); // 6

Comparaison ES5 vs ES6

Simplification du passage de paramètres

function afficherSomme(a, b, c) {
    console.log(a + b + c);
}
const params = [1, 2, 3];

// ES5
afficherSomme.apply(null, params); // 6

// ES6
afficherSomme(...params); // 6

Recherche du maximum

// ES5
console.log(Math.max.apply(null, [3, 7, 1])); // 7

// ES6
console.log(Math.max(...[3, 7, 1])); // 7

// Équivalent direct
console.log(Math.max(3, 7, 1)); // 7

Ajout d'un tableau à la fin d'un autre

let liste1 = [1, 2, 3];
const liste2 = [4, 5, 6];

// ES5 - apply
Array.prototype.push.apply(liste1, liste2);
console.log(liste1); // [1, 2, 3, 4, 5, 6]

// ES6 - spread
liste1 = [1, 2, 3];
liste1.push(...liste2);
console.log(liste1); // [1, 2, 3, 4, 5, 6]

// Alternative avec concat
liste1 = [1, 2, 3];
const fusion = liste1.concat(liste2);
console.log(fusion); // [1, 2, 3, 4, 5, 6]

Instanciation d'un objet Date avec un tableau

// ES5
const dateES5 = new (Date.bind.apply(Date, [null, 2015, 1, 1]));
console.log(dateES5); // Sun Feb 01 2015 00:00:00 GMT+0800

// ES6
const dateES6 = new Date(...[2015, 1, 1]);
console.log(dateES6); // Sun Feb 01 2015 00:00:00 GMT+0800