Splice JavaScript : guide complet de la méthode Array

En 12 ans de développement web, je peux affirmer que splice javascript est l’une des méthodes que j’utilise le plus au quotidien. Que ce soit pour gérer un panier e-commerce, manipuler une liste de tâches ou restructurer des données d’API, cette méthode est incontournable pour tout développeur qui travaille avec des tableaux.

Je vous propose un guide complet qui couvre tous les cas d’usage, des bases jusqu’aux patterns avancés que j’applique sur mes projets clients. Vous comprendrez exactement quand et comment utiliser splice, et surtout quand lui préférer une alternative.

Syntaxe et paramètres de splice()

La méthode Array.prototype.splice() modifie le contenu d’un tableau en supprimant ou remplaçant des éléments existants, et/ou en ajoutant de nouveaux éléments en place. Voici sa signature complète :

array.splice(start, deleteCount, item1, item2, ...itemN)

Détaillons chaque paramètre :

• start (obligatoire) : l’index à partir duquel commencer la modification. Si négatif, il compte depuis la fin du tableau (-1 désigne le dernier élément).
• deleteCount (optionnel) : le nombre d’éléments à supprimer à partir de start. Si omis ou supérieur à la longueur restante, tous les éléments depuis start sont supprimés.
• item1, item2, …itemN (optionnels) : les éléments à ajouter au tableau à partir de la position start.

const fruits = ['pomme', 'banane', 'cerise', 'datte'];
const supprimés = fruits.splice(1, 2, 'fraise', 'kiwi');

console.log(fruits);     // ['pomme', 'fraise', 'kiwi', 'datte']
console.log(supprimés);  // ['banane', 'cerise']

Ce que je trouve particulièrement élégant avec splice, c’est qu’elle retourne toujours un tableau contenant les éléments supprimés. Si aucun élément n’est supprimé, elle retourne un tableau vide. Cette valeur de retour est souvent sous-exploitée par les développeurs débutants.

Supprimer des éléments d’un tableau

C’est le cas d’usage le plus fréquent. Voici les différentes façons de supprimer des éléments avec splice :

Supprimer un élément à un index précis

const taches = ['Design', 'Intégration', 'Tests', 'Déploiement'];
taches.splice(2, 1); // Supprime 1 élément à l'index 2
console.log(taches); // ['Design', 'Intégration', 'Déploiement']

Supprimer plusieurs éléments consécutifs

const nombres = [10, 20, 30, 40, 50, 60];
nombres.splice(1, 3); // Supprime 3 éléments à partir de l'index 1
console.log(nombres); // [10, 50, 60]

Supprimer depuis la fin avec un index négatif

const couleurs = ['rouge', 'vert', 'bleu', 'jaune', 'violet'];
couleurs.splice(-2, 2); // Supprime les 2 derniers éléments
console.log(couleurs); // ['rouge', 'vert', 'bleu']

Supprimer un élément par sa valeur

En combinant indexOf() et splice, on peut supprimer un élément dont on connaît la valeur mais pas l’index :

const panier = ['chemise', 'pantalon', 'ceinture', 'chaussures'];
const index = panier.indexOf('ceinture');
if (index !== -1) {
  panier.splice(index, 1);
}
console.log(panier); // ['chemise', 'pantalon', 'chaussures']

Ce pattern est essentiel. Je l’utilise systématiquement dans mes projets WordPress avec des interfaces de gestion de listes. Pensez à toujours vérifier que l’index n’est pas -1 avant d’appeler splice, sous peine de supprimer le dernier élément par erreur. Pour mieux comprendre comment parcourir un tableau avant suppression, consultez mon guide sur la boucle for en JavaScript.

Insérer des éléments avec splice

En passant 0 comme deuxième argument (deleteCount), splice n’efface rien et se contente d’insérer les éléments fournis à la position indiquée :

const menu = ['Accueil', 'Services', 'Contact'];
menu.splice(2, 0, 'Blog', 'Portfolio');
console.log(menu); // ['Accueil', 'Services', 'Blog', 'Portfolio', 'Contact']

L’insertion se fait avant l’élément actuellement à l’index spécifié. C’est un détail qui piège beaucoup de développeurs. Dans l’exemple ci-dessus, ‘Blog’ et ‘Portfolio’ sont insérés avant ‘Contact’ (qui était à l’index 2).

Insérer au début du tableau

const liste = ['B', 'C', 'D'];
liste.splice(0, 0, 'A');
console.log(liste); // ['A', 'B', 'C', 'D']

Bien sûr, pour ce cas précis, unshift() est plus lisible. Mais splice devient indispensable quand vous devez insérer à une position calculée dynamiquement.

Insérer à la fin

const items = ['un', 'deux', 'trois'];
items.splice(items.length, 0, 'quatre');
console.log(items); // ['un', 'deux', 'trois', 'quatre']

Pour vérifier la propriété length d’un tableau JavaScript, n’hésitez pas à consulter mon article dédié.

Remplacer des éléments dans un tableau

La véritable puissance de splice réside dans sa capacité à combiner suppression et insertion en une seule opération :

const equipe = ['Alice', 'Bob', 'Charlie', 'David'];
// Remplacer Bob et Charlie par Eve et Frank
equipe.splice(1, 2, 'Eve', 'Frank');
console.log(equipe); // ['Alice', 'Eve', 'Frank', 'David']

Remplacer par un nombre différent d’éléments

Contrairement à une affectation directe par index, splice permet de remplacer N éléments par M éléments, le tableau s’ajustant automatiquement :

const etapes = ['Analyse', 'Maquette', 'Dev', 'Recette'];
// Remplacer 'Dev' par trois sous-étapes
etapes.splice(2, 1, 'Dev Front', 'Dev Back', 'Intégration API');
console.Quand un utilisateur réorganise des champs, splice gère les déplacements de manière atomique.




Différence entre splice() et slice()

C'est la question que me posent le plus souvent les développeurs juniors que j'accompagne. Ces deux méthodes ont des noms quasi identiques mais des comportements fondamentalement différents :




Critère
splice()
slice()


Mutation
Modifie le tableau original
Crée une copie partielle
Retour
Tableau des éléments supprimés
Nouveau tableau (sous-ensemble)
Paramètres
start, deleteCount, ...items
start, end (non inclus)
Insertion possible
Oui
Non
Cas d'usage principal
Modifier un tableau en place
Extraire une portion sans modifier l'original
Performance sur grands tableaux
O(n) : décalage des éléments
O(k) : copie de k éléments




Voici un exemple comparatif pour bien ancrer la différence :

const original = [1, 2, 3, 4, 5];

// slice : ne modifie pas original
const extrait = original.slice(1, 3);
console.log(extrait);  // [2, 3]
console.log(original); // [1, 2, 3, 4, 5] — intact

// splice : modifie original
const supprimé = original.splice(1, 2);
console.log(supprimé); // [2, 3]
console.log(original); // [1, 4, 5] — modifié !

Ma règle en production : si je veux extraire sans effets de bord, j'utilise slice. Si je veux modifier le tableau source, j'utilise splice. Cette distinction est cruciale dans les architectures réactives (React, Vue) où la mutation directe peut poser des problèmes de détection de changements.

Splice vs les autres méthodes de manipulation

JavaScript offre plusieurs méthodes pour manipuler les tableaux. Voici comment splice se positionne par rapport à ses alternatives :

Splice vs delete

L'opérateur delete supprime la valeur mais laisse un "trou" dans le tableau (un élément undefined qui conserve l'index). Splice, lui, referme le tableau après suppression :

const arr1 = ['a', 'b', 'c', 'd'];
delete arr1[1];
console.log(arr1);        // ['a', empty, 'c', 'd']
console.log(arr1.length); // 4 — la longueur ne change pas

const arr2 = ['a', 'b', 'c', 'd'];
arr2.splice(1, 1);
console.log(arr2);        // ['a', 'c', 'd']
console.log(arr2.length); // 3 — la longueur est mise à jour

En pratique, n'utilisez jamais delete sur un tableau. C'est une source de bugs silencieux que j'ai rencontrée des dizaines de fois en audit de code.

Splice vs pop et shift

pop() retire le dernier élément, shift() retire le premier. Ce sont des cas particuliers de splice(). Si vous devez supprimer à un index arbitraire, splice est votre seule option parmi les méthodes mutantes. Pour comprendre en détail le fonctionnement de pop, pensez à explorer les méthodes complémentaires de manipulation de tableaux.

Splice vs filter

filter() crée un nouveau tableau en conservant les éléments qui passent un test. C'est l'approche immuable par excellence :

// Avec filter (immuable)
const nombres = [1, 2, 3, 4, 5];
const pairs = nombres.filter(n => n % 2 === 0);
// nombres reste [1, 2, 3, 4, 5]
// pairs vaut [2, 4]

// Avec splice (mutable) — supprime les impairs
const nombres2 = [1, 2, 3, 4, 5];
for (let i = nombres2.length - 1; i >= 0; i--) {
  if (nombres2[i] % 2 !== 0) nombres2.splice(i, 1);
}
// nombres2 vaut [2, 4]

Notez l'itération en sens inverse quand on utilise splice dans une boucle. C'est un pattern critique : si vous itérez de gauche à droite, les index sont décalés après chaque suppression, et vous sautez des éléments.

toSpliced() : l'alternative immutable ES2023

Depuis ES2023, JavaScript propose toSpliced(), qui fonctionne exactement comme splice mais retourne un nouveau tableau sans modifier l'original. C'est la réponse officielle au besoin d'immutabilité :

const original = ['a', 'b', 'c', 'd', 'e'];
const modifié = original.toSpliced(1, 2, 'x', 'y');

console.log(original); // ['a', 'b', 'c', 'd', 'e'] — intact
console.log(modifié);  // ['a', 'x', 'y', 'd', 'e'] — nouvelle copie

Cette méthode est supportée par tous les navigateurs modernes depuis début 2024 (Chrome 110+, Firefox 115+, Safari 16+). Selon la documentation MDN sur toSpliced(), elle fait partie du groupe des méthodes "copying" aux côtés de toSorted() et toReversed().

En pratique, j'utilise toSpliced() dans mes composants React et Vue où l'immutabilité garantit une bonne détection des changements d'état. Pour les traitements de données purs où la performance prime, splice reste plus efficace car elle évite la copie mémoire.

Cas pratiques en production

Voici des patterns que j'utilise régulièrement dans mes projets WordPress et applications sur mesure :

Déplacer un élément dans un tableau (drag and drop)

function déplacer(tableau, deIndex, versIndex) {
  const [élément] = tableau.splice(deIndex, 1);
  tableau.splice(versIndex, 0, élément);
  return tableau;
}

const liste = ['Intro', 'Chapitre 1', 'Chapitre 2', 'Conclusion'];
déplacer(liste, 3, 1);
console.log(liste); // ['Intro', 'Conclusion', 'Chapitre 1', 'Chapitre 2']

Ce pattern en deux appels splice est le standard pour implémenter le glisser-déposer dans les interfaces d'administration que je développe.

Pagination côté client

function paginer(données, page, parPage) {
  const copie = [...données];
  const début = (page - 1) * parPage;
  return copie.splice(début, parPage);
}

const articles = Array.from({length: 50}, (_, i) => `Article ${i + 1}`);
const page2 = paginer(articles, 2, 10);
// ['Article 11', 'Article 12', ... 'Article 20']

Gestion d'un historique avec limite

const MAX_HISTORIQUE = 20;
const historique = [];

function ajouterAction(action) {
  historique.splice(0, 0, action); // Insère au début
  if (historique.length > MAX_HISTORIQUE) {
    historique.splice(MAX_HISTORIQUE); // Tronque l'excédent
  }
}

Pour nettoyer les chaînes avant de les stocker dans ce type de structure, je recommande de consulter mon article sur trimEnd en JavaScript.



Suppression conditionnelle dans un tableau d'objets

const utilisateurs = [
  { id: 1, nom: 'Alice', actif: true },
  { id: 2, nom: 'Bob', actif: false },
  { id: 3, nom: 'Charlie', actif: true },
  { id: 4, nom: 'David', actif: false }
];

// Supprimer tous les utilisateurs inactifs
for (let i = utilisateurs.length - 1; i >= 0; i--) {
  if (!utilisateurs[i].actif) {
    utilisateurs.splice(i, 1);
  }
}
console.log(utilisateurs);
// [{ id: 1, nom: 'Alice', actif: true }, { id: 3, nom: 'Charlie', actif: true }]

Erreurs courantes et bonnes pratiques

Après des années de revue de code, voici les pièges les plus fréquents que je constate avec splice :

Erreur 1 : oublier que splice mute le tableau

// ❌ Bug classique en React
const [items, setItems] = useState(['a', 'b', 'c']);
function supprimer(index) {
  items.splice(index, 1); // Mute l'état directement !
  setItems(items); // React ne détecte pas le changement
}

// ✅ Correction avec toSpliced ou copie
function supprimer(index) {
  setItems(prev => prev.toSpliced(index, 1));
}

Erreur 2 : itérer de gauche à droite en supprimant

// ❌ Saute des éléments
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  if (arr[i] % 2 === 0) arr.splice(i, 1);
}
console.log(arr); // [1, 3, 5] — fonctionne ici par chance

// Mais avec [2, 4, 6, 8] :
const arr2 = [2, 4, 6, 8];
for (let i = 0; i < arr2.length; i++) {
  if (arr2[i] % 2 === 0) arr2.splice(i, 1);
}
console.log(arr2); // [4, 8] — BUG ! Des éléments sont sautés

// ✅ Toujours itérer en sens inverse
const arr3 = [2, 4, 6, 8];
for (let i = arr3.length - 1; i >= 0; i--) {
  if (arr3[i] % 2 === 0) arr3.splice(i, 1);
}
console.log(arr3); // [] — correct

Erreur 3 : confondre la valeur de retour

// ❌ splice retourne les éléments SUPPRIMÉS, pas le tableau modifié
const résultat = [1, 2, 3, 4].splice(0, 0, 'nouveau');
console.log(résultat); // [] — tableau vide car rien n'a été supprimé

Bonnes pratiques que j'applique systématiquement


Toujours vérifier le résultat de indexOf() avant splice (≠ -1)
Préférer filter() quand la condition de suppression est complexe
Utiliser toSpliced() dans les frameworks réactifs
Documenter l'intention quand splice est utilisé pour insérer (le code n'est pas évident)
Ne jamais utiliser splice dans un reduce ou un map sur le même tableau


Pour optimiser le rendu visuel de vos applications après ces manipulations de données, vous pouvez vous intéresser aux techniques de paint en JavaScript qui permettent de contrôler le rafraîchissement de l'affichage.

Selon la spécification ECMAScript officielle, splice est définie de manière à garantir un comportement cohérent sur tous les moteurs JavaScript conformes, ce qui en fait une méthode fiable pour la production.

À retenir


Utilisez splice(index, 1) pour supprimer un élément à une position connue
Passez 0 en deleteCount pour insérer sans supprimer : splice(index, 0, ...éléments)
Itérez toujours en sens inverse (from length-1 to 0) quand vous supprimez dans une boucle
Préférez toSpliced() dans React, Vue ou tout contexte exigeant l'immutabilité
Vérifiez que indexOf() retourne un index ≠ -1 avant toute suppression par valeur



Questions fréquentes
Comment utiliser la fonction splice() en JavaScript ?
La méthode splice() s'appelle sur un tableau avec la syntaxe array.splice(start, deleteCount, ...items). Le premier argument est l'index de départ, le deuxième le nombre d'éléments à supprimer, et les suivants sont les éléments à insérer. Par exemple, fruits.splice(1, 2, 'kiwi') supprime 2 éléments à partir de l'index 1 et insère 'kiwi' à leur place. La méthode retourne un tableau contenant les éléments supprimés.
Quels sont les 3 types en JavaScript ?
JavaScript distingue les types primitifs et les types objets. Les trois catégories fondamentales sont : les types primitifs simples (number, string, boolean), les types primitifs spéciaux (null, undefined, symbol, bigint) et les types objets (Object, Array, Function, Date, etc.). Les tableaux sur lesquels on utilise splice sont du type Object (Array étant un sous-type d'Object). Cette distinction est importante car splice ne fonctionne que sur les tableaux, pas sur les chaînes de caractères qui sont des primitifs immuables.
JS Splice est-il en place ?
Oui, splice() est une méthode in-place (en place) : elle modifie directement le tableau original sans créer de copie. C'est sa caractéristique principale et ce qui la distingue de slice() ou toSpliced(). Après un appel à splice, le tableau sur lequel elle a été appelée est définitivement modifié : sa longueur change et ses éléments sont réorganisés. Si vous avez besoin d'une version non-mutante, utilisez toSpliced() disponible depuis ES2023.
Qu'est-ce que la méthode slice() en JavaScript ?
La méthode slice() extrait une portion d'un tableau et la retourne dans un nouveau tableau, sans modifier l'original. Sa syntaxe est array.slice(début, fin) où fin est exclu. Par exemple, [1,2,3,4,5].slice(1,3) retourne [2,3]. Contrairement à splice, slice ne supprime rien, n'insère rien et ne mute jamais le tableau source. Elle est idéale pour créer des copies partielles ou extraire des sous-ensembles de données.
Quelle est la différence de performance entre splice et filter ?
Pour supprimer un seul élément à un index connu, splice est nettement plus rapide que filter car elle ne crée pas de nouveau tableau. En revanche, pour des suppressions multiples basées sur une condition, filter peut être plus performant car splice dans une boucle a une complexité O(n²) (chaque splice décale les éléments restants). Sur un tableau de 10 000 éléments avec 50% à supprimer, filter est environ 3 à 5 fois plus rapide que splice en boucle inverse.
Comment annuler un splice en JavaScript ?
Splice étant destructive, il n'existe pas de méthode "undo" native. Pour pouvoir revenir en arrière, conservez la valeur de retour de splice (les éléments supprimés) et l'index de départ. Vous pouvez ensuite réinsérer avec array.splice(index, 0, ...élémentsSupprimés). Alternativement, créez une copie du tableau avant la modification avec const sauvegarde = [...tableau] ou utilisez toSpliced() qui ne modifie pas l'original.


Nathan Morel
Nathan Morel est développeur web freelance depuis 12 ans dans la Loire. Spécialisé WordPress et solutions sur mesure, il a accompagné plus de 200 PME et partage son expérience technique et entrepreneuriale sur NA Web.
Un projet web ? Discutons-en.
Diagnostic gratuit et devis sous 24h.
Me contacter