Array.
Supprime, insère ou remplace des éléments dans une copie du tableau. L’original reste inchangé.
- Renvoie
- Un nouveau tableau après les changements.
- Modifie l’original
- Non
Exemple
#const plan = ['HTML', 'CSS', 'PHP', 'JavaScript']
const updated = plan.toSpliced(2, 1, 'Sass')
console.log(updated)
console.log(plan)Définition et utilisation
#La méthode toSpliced(start, skipCount, ...items) fonctionne comme splice(), mais au lieu de modifier le tableau, elle renvoie un nouveau tableau déjà transformé. À partir de l’indice start, elle ignore skipCount éléments et insère à leur place les valeurs données. Le tableau d’origine ne change pas.
Une différence importante porte sur le résultat : splice() renvoie le tableau des éléments supprimés, tandis que toSpliced() renvoie tout le nouveau tableau. Si vous avez aussi besoin des éléments supprimés, lisez-les d’abord avec slice().
En un seul appel, vous pouvez supprimer un élément (toSpliced(i, 1)), en insérer un nouveau sans rien supprimer (toSpliced(i, 0, x)), ou remplacer une portion par d’autres valeurs. Un start négatif compte la position depuis la fin. La méthode appartient à la famille des méthodes « copiantes », avec toSorted(), toReversed() et with().
Syntaxe
#array.toSpliced(start)
array.toSpliced(start, skipCount)
array.toSpliced(start, skipCount, item1, item2, …)Paramètres
#start
nombre
Indice à partir duquel les changements commencent. Un indice négatif compte depuis la fin.skipCount
optionnel
Nombre d’éléments qui ne seront pas repris dans la copie. Omis, cela signifie tout depuisstartjusqu’à la fin.item1…itemN
optionnels
Éléments insérés dans la copie à la positionstart.
Plus d’exemples
#const queue = ['Léa', 'Lucas', 'Emma']
console.log(queue.toSpliced(1, 1))
console.log(queue.toSpliced(1, 0, 'Chloé'))
console.log(queue.toSpliced(-1))const tasks = ['Quiz', 'Projet', 'Test']
const copy = tasks.toSpliced(0, 1)
const removed = tasks.splice(0, 1)
console.log(copy)
console.log(removed)
console.log(tasks)toSpliced() a renvoyé un nouveau tableau sans toucher à tasks. C’est seulement splice() qui a modifié l’original et renvoyé ce qu’il en a supprimé.
Compatibilité des navigateurs
#Largement disponible · depuis 2023
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Pour supprimer un élément par indice, par exemple dans l’état d’un composant React,
items.toSpliced(index, 1)suffit. Pas besoin de copier avec le spread ni d’unfilter()comparant les indices. - Ne confondez pas les résultats :
toSpliced()renvoie un nouveau tableau,splice()le tableau des éléments supprimés.
Entrées associées
#- Array.prototype.splice()Supprime, remplace ou insère des éléments sur place, en modifiant le tableau.
- Array.prototype.slice()Renvoie une copie d’une portion du tableau, sans modifier l’original.
- Array.prototype.with()Renvoie une copie du tableau dans laquelle l’élément à l’indice donné a une nouvelle valeur.
- Array.prototype.toReversed()Renvoie un nouveau tableau avec les éléments dans l’ordre inverse, sans modifier l’original.
- Array.prototype.toSorted()Renvoie une copie triée du tableau, sans modifier l’original.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.