Paramètres du reste (Rest parameters)

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨septembre 2016⁩.

Cette syntaxe permet de représenter un nombre indéfini d'arguments sous forme d'un tableau.

Exemple interactif

function sum(...theArgs) {  let total = 0;  for (const arg of theArgs) {    total += arg;  }  return total;}console.log(sum(1, 2, 3));// Expected output: 6console.log(sum(1, 2, 3, 4));// Expected output: 10

Syntaxe

function f(a, b, ...lesArguments) {  // ...}

Si le dernier paramètre nommé fourni à la fonction est préfixé de... (trois points), il devient un tableau dont les éléments entre0 (inclus) etlesArguments.length (exclus) sont fournis comme autres arguments à la fonction.

function maFonction(a, b, ...plusDArguments) {  console.log("a", a);  console.log("b", b);  console.log("plusDArguments", plusDArguments);}maFonction("un", "deux", "trois", "quatre", "cinq");// affichera ceci dans la console :// a, "un"// b, "deux"// plusDArguments, ["trois", "quatre", "cinq"]

Les différences entre les paramètres du reste et l'objet`arguments`

Il y a trois principales différences entre les paramètres du reste et l'objetarguments :

les paramètres du reste sont uniquement ceux qui ne possèdent pas de noms à part entière (autrement dit ceux qui ne sont pas formellement définis dans l'expression de fonction), l'objetarguments contient chaque argument passé à la fonction
l'objetarguments n'est pas, à strictement parler, un tableau. Le paramètre représentant les arguments restant est une instance d'Array à laquelle on peut appliquer directement des méthodes commesort,map,forEach oupop
l'objetarguments possède des fonctionnalités spécifiques (comme, par exemple, la propriétécallee)

Convertir`arguments` en un tableau

Ces paramètres ont été introduits afin de réduire le code passe-partout souvent induit par les arguments.

// Avant les paramètres du reste, on observait souvent ce style de code :function f(a, b) {  var args = Array.prototype.slice.call(arguments, f.length);  // ou encore  var args = [].slice.call(arguments);  // ou encore  var args = Array.from(arguments);  // et on pouvait alors écrire  var premier = args.shift(); // OK  // mais pas  var premier = arguments.shift(); // erreur car arguments n'est pas un tableau}// ce qui est l'équivalent defunction f(...args) {  var tabNormal = args;  var premier = tabNormal.shift();}

La décomposition sur les paramètres du reste

On peut également décomposer les paramètres du reste en variables distinctes :

function f(...[a, b, c]) {  return a + b + c;}f(1); // NaN (b et c valent undefined)f(1, 2, 3); // 6f(1, 2, 3, 4); // 6, le dernier paramètre n'est pas décomposé

Vous pouvez également accéder aux éléments des paramètres du reste :

function fun1(...lesArguments) {  console.log("valeur", lesArguments[0][0]);}fun1([5, 2], [5, 4]); // 5fun1([8, 2]); // 8fun1([9, 6, 7]); // 9

Exemples

S'il n'y a qu'un seul argument qui est décomposé par la syntaxe, la valeur sera toujours un tableau :

function maFonction(a, b, ...autres);  console.log(a);  console.log(b);  console.log(autres);}maFonction("un", "deux", "trois");// affichera ceci dans la console// "un"// "deux"// ["trois"]

De même, s'il n'y a pas suffisamment d'arguments, ce sera un tableau vide :

function maFonction(a, b, ...autres);  console.log(a);  console.log(b);  console.log(autres);}maFonction("un", "deux");// affichera ceci dans la console// "un"// "deux"// []

lesArguments est un tableau et dispose donc d'une propriétélength permettant de compter ses éléments :

function fun1(...lesArguments) {  console.log(lesArguments.length);}fun1(); // 0fun1(5); // 1fun1(5, 6, 7); // 3

Dans l'exemple qui suit, on utilise le paramètre Rest pour collecter les arguments après le premier pour les multiplier par le premier :

function multiplier(facteur, ...lesArguments) {  return lesArguments.map(function (element) {    return facteur * element;  });}var arr = multiplier(2, 1, 2, 3);console.log(arr); // [2, 4, 6]

L'exemple qui suit illustre comment on peut utiliser des méthodes deArray sur le paramètre Rest mais pas sur l'objetarguments :

function trierParamRest(...lesArguments) {  var argumentsTriés = lesArguments.sort();  return argumentsTriés;}console.log(trierParamRest(5, 3, 7, 1)); // shows 1,3,5,7function trierArguments() {  var argumentsTriés = arguments.sort();  return argumentsTriés; // cela ne sera jamais appelé}// renvoie une exception TypeError: arguments.sort n'est pas une functionconsole.log(trierArguments(5, 3, 7, 1));

Pour utiliser les méthodes propres aux instances d'Array sur l'objetarguments, il est nécessaire de le convertir.

function trierAguments() {  var args = Array.from(arguments);  var argumentsTriés = args.sort();  return argumentsTriés;}console.log(trierArguments(5, 3, 7, 1)); // [1, 3, 5, 7]