La syntaxe de décomposition permet de développer une expression lorsque plusieurs arguments ou plusieurs éléments sont nécessaires (respectivement pour les appels de fonctions et les littéraux de tableaux).
Syntaxe
Pour l'utilisation de la décomposition dans les appels de fonction :
f(...objetIterable);
Pour les littéraux de tableaux :
[...objetIterable, 4, 5, 6]
Pour la décomposition :
[a, b, ...objetIterable] = [1, 2, 3, 4, 5];
Exemples
Améliorer la fonction apply
Il arrive souvent qu'on veuille utiliser Function.prototype.apply
avec un tableau parmi les arguments de la fonction utilisée :
function f(x, y, z) { } var args = [0, 1, 2]; f.apply(null, args);
avec la décomposition, on peut désormais écrire :
function f(x, y, z) { } var args = [0, 1, 2]; f(...args);
Tout argument passé à une fonction peut être décomposé grâce à l'opérateur et l'opérateur peut être utilisé pour plusieurs arguments.
function f(v, w, x, y, z) { } var args = [0, 1]; f(-1, ...args, 2, ...[3]);
Améliorer les littéraux de tableau
À l'heure actuelle, sans la décomposition, si on a un tableau et qu'on souhaite créer un nouveau tableau composé du premier, on ne peut pas utiliser un littéral de tableau et il faut utiliser des fonctions comme push
, splice
, concat
, etc. Avec la syntaxe de décomposition, cela devient plus succinct :
var articulations = ['épaules', 'genoux']; var corps = ['têtes', ...articulations, 'bras', 'pieds']; // ["têtes", "épaules", "genoux", "bras", "pieds"]
Comme pour les fonctions, l'opérateur peut être utilisé plusieurs fois.
Utiliser apply avec l'opérateur new
Avec ES5, il n'est pas possible d'utiliser new
avec apply
(selon ES5 apply
effectue un appel [[Call]]
et pas un appel [[Construct]]
). Avec ES2015, la syntaxe de décomposition permet de le faire naturellement :
var champsDate = lireChampsDate(maBaseDeDonnées); var d = new Date(...champsDate);
Copier un tableau
var arr = [1, 2, 3]; var arr2 = [...arr]; arr2.push(4); console.log(arr2); // [1, 2, 3, 4] console.log(arr); // [1, 2, 3] (inchangé)
Note : Lorsqu'on utilise la décomposition pour copier un tableau, celle-ci ne s'applique qu'au premier niveau de profondeur. Autrement dit, lorsqu'on utilise des tableaux à plusieurs dimensions (des tableaux imbriqués dans d'autres tableaux), il faut faire attention aux résultats. Il en va de même avec Object.assign()
et avec la décomposition.
var a = [[1], [2], [3]]; var b = [...a]; // b vaut [[1], [2], [3]] b.shift().shift(); // *a* vaut désormais [[], [2], [3]];
Améliorer la fonction push
push
est souvent utilisé pour ajouter un tableau à la fin d'un autre tableau. Avec ES5, on peut utiliser le code suivant :
var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; // On ajoute tous les éléments de arr2 à la fin de arr1 Array.prototype.push.apply(arr1, arr2);
Avec ES2015 et la décomposition, on peut utiliser :
var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; arr1.push(...arr2);
Utiliser apply
pour les seuls itérables
var obj = {"clé1" : "valeur1"}; function maFonction(x) { console.log(x); // undefined } maFonction(...obj); var args = [...obj]; console.log(args, args.length) //[] 0
Spécifications
Spécification | État | Commentaires |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) | Standard | Défini dans plusieurs sections de la spécification : initialisateur de tableau, listes d'argument |
ECMAScript 2017 Draft (ECMA-262) | Projet |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Opérateur de décomposition dans les littéraux de tableaux | 46 | 16 (16) | Edge | Pas de support | 7.1 |
Opérateur de décomposition dans les appels de fonctions | 46 | 27 (27) | Edge | Pas de support | 7.1 |
Opérateur de décomposition pour la déstructuration | 49 | 34 (34) | Pas de support | ? | ? |
Fonctionnalité | Android | Webview Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome pour Android |
---|---|---|---|---|---|---|---|
Opérateur de décomposition dans les littéraux de tableaux | Pas de support | 46 | 16.0 (16) | Pas de support | Pas de support | 8 | 46 |
Opérateur de décomposition dans les appels de fonctions | Pas de support | 46 | 27.0 (27) | Pas de support | Pas de support | 8 | 46 |
Opérateur de décomposition pour la déstructuration | Pas de support | Pas de support | 34 (34) | ? | ? | ? | Pas de support |