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.
Exemple
#const frontend = ['HTML', 'CSS']
const backend = ['Node.js']
const stack = [...frontend, 'JavaScript', ...backend]
console.log(stack)
const scores = [72, 95, 88]
console.log(Math.max(...scores))Définition et utilisation
#Trois points avant un tableau, une chaîne ou un autre objet itérable « déversent » ses éléments à l’endroit où une liste de valeurs est attendue : dans un nouveau tableau [...a, ...b] ou dans les arguments d’un appel Math.max(...scores).
Le spread fonctionne aussi dans les littéraux d’objets : { ...user, active: true } copie les propriétés propres et énumérables de user dans un nouvel objet. Les propriétés écrites plus tard écrasent les précédentes, ce qui permet de créer facilement une copie mise à jour ou de combiner des réglages par défaut avec les vôtres.
La copie est superficielle. Les objets et tableaux imbriqués ne sont pas copiés, seulement partagés, donc les modifier dans la copie modifie aussi l’original. Pour une copie profonde, utilisez structuredClone(). Les mêmes trois points dans les paramètres d’une fonction ou dans une déstructuration désignent l’opération inverse, c’est-à-dire rassembler le reste des éléments (rest).
Syntaxe
#const copy = [...array]
const merged = [...first, ...second]
fn(...args)
const clone = { ...object }
const updated = { ...object, key: value }Plus d’exemples
#const defaults = { theme: 'dark', sounds: true, fontSize: 16 }
const userSettings = { sounds: false }
const settings = { ...defaults, ...userSettings }
console.log(settings)
console.log(defaults)const original = { name: 'Léa', badges: ['start'] }
const copy = { ...original }
copy.name = 'Emma'
copy.badges.push('streak')
console.log(original)
console.log(copy)Le tableau badges est partagé entre les deux objets. Quand vous avez besoin d’une copie indépendante de données imbriquées, utilisez structuredClone(original).
console.log([...'Code'])
const tags = ['js', 'css', 'js', 'html', 'css']
console.log([...new Set(tags)])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 spread dans les objets ne copie que les propriétés propres et énumérables. Les méthodes du prototype ne seront pas transférées, donc la copie d’une instance de classe devient un objet ordinaire.
- L’ordre compte : dans
{ ...defaults, ...custom }, ce sont les valeurs decustomqui gagnent, et dans{ ...custom, ...defaults }, celles dedefaults. - Avec de très grands tableaux (des centaines de milliers d’éléments),
Math.max(...array)peut dépasser la limite d’arguments d’une fonction. Il est alors plus sûr d’utiliserreduce().
Entrées associées
#- DéstructurationLa déstructuration (destructuring) extrait des valeurs de tableaux et d’objets directement vers des variables séparées.
- Array.prototype.concat()Combine des tableaux et des valeurs en un nouveau tableau.
- Object.assign()Copie les propriétés d’un ou plusieurs objets vers un objet cible.
- structuredClone()Crée une copie profonde d’une valeur, y compris les objets imbriqués, les dates, les Map et les Set.
- 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ètre du reste (...rest)Rassemble tous les arguments restants d’une fonction dans un véritable tableau. Vous l’écrivez comme ...nom à la fin de la liste.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.