Paramètre du reste (.
Rassemble tous les arguments restants d’une fonction dans un véritable tableau. Vous l’écrivez comme ...nom à la fin de la liste.
Exemple
#function totalPoints(...scores) {
return scores.reduce((sum, score) => sum + score, 0)
}
console.log(totalPoints(10, 20, 30))
console.log(totalPoints(5))
console.log(totalPoints())Définition et utilisation
#Vous écrivez le paramètre du reste comme trois points avant le nom du dernier paramètre : function sum(...numbers). Tous les arguments qui ne sont pas allés dans les paramètres précédents y atterrissent comme un tableau normal. Quand il n’y a pas de tels arguments, le tableau est vide, et non undefined.
Cela permet d’écrire facilement une fonction qui accepte un nombre quelconque de valeurs : additionner des points, assembler des noms de classes CSS ou enregistrer un événement avec des données supplémentaires. C’est un véritable tableau, donc vous disposez immédiatement de map(), reduce() et length.
Le paramètre du reste doit être le dernier et il ne peut y en avoir qu’un seul. Il remplace l’ancien objet arguments, qui n’est pas un tableau et n’existe pas dans les fonctions fléchées. Les mêmes trois points lors de l’appel d’une fonction, fn(...array), désignent le spread, c’est-à-dire l’opération inverse : décomposer un tableau en arguments séparés.
Syntaxe
#function name(...rest) {}
function name(first, second, ...rest) {}
const fn = (...args) => {}Plus d’exemples
#function logEvent(type, ...details) {
console.log(type, details.length, details)
}
logEvent('leçon', 'CSS', 'Grid')
logEvent('connexion')function maxScore(...scores) {
return Math.max(...scores)
}
const results = [72, 95, 88]
console.log(maxScore(...results))
console.log(maxScore(40, 60))Dans la définition, ...scores rassemble les arguments dans un tableau (rest), et dans l’appel, Math.max(...scores) décompose le tableau en arguments séparés (spread).
function oldStyle() {
console.log(Array.isArray(arguments), arguments.length)
}
function newStyle(...args) {
console.log(Array.isArray(args), args.length)
}
oldStyle('a', 'b')
newStyle('a', 'b')Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Le paramètre du reste est toujours à la fin. L’écriture
function fn(...items, last)est une erreur de syntaxe. - N’utilisez pas
argumentsdans du nouveau code. Le paramètre du reste donne un véritable tableau et fonctionne aussi dans les fonctions fléchées. - Quand une fonction accepte de nombreux réglages optionnels de types différents, un seul objet d’options avec déstructuration est plus lisible qu’une longue liste d’arguments.
Entrées associées
#- Spread (...)La syntaxe spread décompose un tableau, une chaîne ou un objet en éléments individuels : pour copier, fusionner et passer des arguments.
- functionDéclare une fonction nommée : un bloc de code avec des paramètres, que vous pouvez appeler autant de fois que vous voulez et qui peut renvoyer un résultat.
- Paramètres par défautLes valeurs qu’un paramètre de fonction reçoit quand l’argument n’est pas fourni ou vaut undefined.
- DéstructurationLa déstructuration (destructuring) extrait des valeurs de tableaux et d’objets directement vers des variables séparées.
- () => {}Fonction fléchée (arrow function) : une syntaxe de fonction plus courte, sans this propre, avec un return implicite pour une seule expression.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.