Une seule méthode couvre trois gestes que l'on croit séparés : retirer un élément au milieu d'un tableau, en insérer un sans écraser ses voisins, et remplacer une portion par une autre.
Le prix à payer est important : splice modifie le tableau d'origine, ce qui en fait la méthode de tableau la plus utile et la plus risquée à la fois.
Définition
splice(debut, nombre, ...ajouts) agit sur place. Le premier argument est la position, le deuxième le nombre d'éléments à retirer, les suivants les éléments à insérer à cet endroit. La méthode rend le tableau des éléments retirés, pas le tableau modifié.
const taches = ["écrire", "relire", "publier"];
const retirees = taches.splice(1, 1);
console.log(retirees); // [ 'relire' ]
console.log(taches); // [ 'écrire', 'publier' ]Cette valeur de retour est la source d'un contresens fréquent : const liste = taches.splice(1, 1) ne contient pas la liste, mais uniquement ce qui vient d'en être arraché.
Les trois usages
const etapes = ["écrire", "publier"];
// Insérer sans rien retirer : deuxième argument à zéro
etapes.splice(1, 0, "corriger");
console.log(etapes); // [ 'écrire', 'corriger', 'publier' ]
// Remplacer : retirer un élément et en poser un autre
etapes.splice(0, 1, "rédiger");
console.log(etapes); // [ 'rédiger', 'corriger', 'publier' ]
// Tout retirer à partir d'une position : omettre le deuxième argument
const fin = etapes.splice(1);
console.log(etapes); // [ 'rédiger' ]
console.log(fin); // [ 'corriger', 'publier' ]Un début négatif se compte depuis la fin, comme pour slice() : splice(-1, 1) retire le dernier élément.
Quand ne pas s'en servir
Modifier un tableau sur place pose problème dès que ce tableau est affiché ailleurs, notamment dans un état d'interface. La bibliothèque ne voit aucune nouvelle valeur, donc rien ne se réaffiche.
| Le besoin | La méthode qui modifie | L'équivalent qui copie |
|---|---|---|
| Retirer un élément | splice(i, 1) | Array.filter() |
| Ajouter à la fin | Array.push() | [...liste, element] |
| Extraire une portion | splice(i, n) | slice() |
Le tableau se lit en trois colonnes : le besoin, la méthode qui touche à l'original, et la forme qui construit une nouvelle valeur. La colonne de droite est celle à privilégier partout où l'Immuabilité compte.
Questions fréquentes
Comment retirer un élément dont on ignore la position ?
En la cherchant d'abord, avec indexOf() pour une valeur simple ou findIndex pour un objet, puis en vérifiant que le résultat n'est pas -1 avant d'appeler splice. Sans cette vérification, splice(-1, 1) retire le dernier élément du tableau, ce qui n'était pas la demande.
Que rend splice quand il ne retire rien ?
Un tableau vide. Une insertion pure rend donc [], ce qui est cohérent mais rarement utile. Pour connaître la nouvelle taille du tableau après l'opération, lisez length sur le tableau lui-même.
Existe-t-il une version qui ne modifie rien ?
Oui, toSpliced prend les mêmes arguments et rend un nouveau tableau en laissant l'original intact. La méthode est récente, donc vérifiez la compatibilité de vos navigateurs cibles ou reconstruisez le tableau avec Spread (...) et slice().