slice() vs splice()
slice() copie un fragment du tableau sans modifier l’original, tandis que splice() supprime, insère ou remplace des éléments en place, en mutant le tableau.
Comparaison point par point
#Modifie le tableau d’origine
Ce qu’elle renvoie
- Array.prototype.slice()
- Un nouveau tableau avec le fragment découpé
- Array.prototype.splice()
- Un tableau des éléments supprimés
Insertion de nouveaux éléments
- Array.prototype.slice()
- Impossible
- Array.prototype.splice()
- Oui, comme arguments supplémentaires
Arguments
- Array.prototype.slice()
start,end(indice de fin exclu)- Array.prototype.splice()
start,deleteCount, éléments à insérer
Indices négatifs dans start
- Array.prototype.slice()
- Comptent depuis la fin du tableau
- Array.prototype.splice()
- Comptent aussi depuis la fin du tableau
Usage typique
- Array.prototype.slice()
- Copie, pagination, extrait sans mutation
- Array.prototype.splice()
- Suppression ou insertion à un endroit précis
Exemple
#const modules = ['Introduction', 'HTML', 'CSS', 'Grid']
const copy = modules.slice(1, 3)
const removed = modules.splice(1, 1)
console.log(copy)
console.log(removed)
console.log(modules)Définition et utilisation
#Les noms se ressemblent étrangement, mais les méthodes font des choses différentes. slice(start, end) découpe un fragment du tableau et le renvoie comme un nouveau tableau, sans toucher à l’original. splice(start, deleteCount, ...items) modifie le tableau d’origine : elle supprime le nombre indiqué d’éléments à partir de start et peut en insérer de nouveaux à leur place.
slice() renvoie toujours le fragment découpé, et splice() renvoie les éléments qu’elle a supprimés (ce peut être un tableau vide quand rien n’a été supprimé). Les indices négatifs se comptent depuis la fin du tableau dans les deux méthodes. Seule splice() accepte des arguments supplémentaires avec les éléments à insérer.
Le choix dépend de si vous voulez conserver l’original. Pour copier, paginer ou découper, utilisez slice(). Pour supprimer ou insérer un élément à un endroit précis, utilisez splice(), et si vous ne voulez pas muter le tableau, utilisez son équivalent plus récent toSpliced().
Syntaxe
#array.slice(start, end)
array.splice(start, deleteCount, item1, item2, …)Plus d’exemples
#const list = ['HTML', 'CSS', 'JavaScript']
list.splice(1, 0, 'Sass')
console.log(list)
console.log(list.slice(-2))const original = ['Léa', 'Lucas']
const sliced = original.slice()
const splicedResult = original.splice(5, 2)
console.log(sliced)
console.log(splicedResult)
console.log(original)
console.log(sliced === original)splice() en dehors des limites du tableau ne supprime rien et renvoie un tableau vide. slice() sans arguments crée une copie superficielle, mais c’est un objet différent de l’original.
Bonnes pratiques
#slice()ne mute jamais, elle est donc sûre pour les copies et la pagination, même dans des fonctions qui ne devraient pas modifier les données d’entrée.- En supprimant des éléments avec
splice()dans une boucle, partez de la fin du tableau. En partant du début, les indices suivants se décalent et il est facile d’en manquer un. - Quand vous avez besoin de l’effet de
splice(), mais sans muter l’original, utiliseztoSpliced().
Entrées associées
#- Array.prototype.slice()Renvoie une copie d’une portion du tableau, sans modifier l’original.
- Array.prototype.splice()Supprime, remplace ou insère des éléments sur place, en modifiant le tableau.
- Array.prototype.toSpliced()Supprime, insère ou remplace des éléments dans une copie du tableau. L’original reste inchangé.
- Array.prototype.filter()Crée un nouveau tableau avec les éléments pour lesquels la fonction a renvoyé true.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.