Insertion d'un élément dans un tableau par index : comment ça fonctionne sous le capot en JS

Introduction : Pourquoi la question de l'insertion d'un élément dans un tableau est-elle si populaire ?

Imaginez : vous écrivez du code et vous devez ajouter une nouvelle tâche au milieu d'une liste de choses à faire, ou insérer un utilisateur dans un tableau trié par ordre alphabétique. Cela semble simple, non ? Mais si vous êtes débutant en JavaScript, la première pensée est d'utiliser push() ou unshift(). Cependant, ils ajoutent un élément uniquement à la fin ou au début. Que faire si vous avez besoin d'un index spécifique ?

C'est précisément cette question qui a recueilli des milliers de vues sur Stack Overflow. Dans cet article, nous ne donnerons pas seulement une réponse toute faite, mais nous regarderons sous le capot du moteur JavaScript et analyserons comment fonctionne réellement l'insertion d'un élément dans un tableau. Vous découvrirez non seulement la magie de la méthode splice(), mais vous comprendrez également les processus qui se déroulent en mémoire. C'est parti !

Réponse directe : comment insérer un élément par index

La manière la plus simple et la plus correcte est d'utiliser la méthode splice(). Cette méthode modifie le contenu d'un tableau en supprimant, remplaçant ou ajoutant des éléments. Voici à quoi ressemble une insertion classique :

let fruits = ['apple', 'banana', 'cherry'];\nlet index = 1; // On insère après 'apple'\nlet itemToInsert = 'orange';\n\nfruits.splice(index, 0, itemToInsert);\nconsole.log(fruits); // ['apple', 'orange', 'banana', 'cherry']

Analysons la syntaxe :

\n
• Premier argument (index) — l'index à partir duquel on modifie le tableau.
\n
• Deuxième argument (0) — le nombre d'éléments à supprimer. Zéro signifie que nous ne supprimons rien, nous insérons seulement.
\n
• Troisième argument et suivants — les éléments à ajouter. Vous pouvez passer plusieurs valeurs.
\n

Cette méthode est un couteau suisse universel pour travailler avec les tableaux. Mais comment fonctionne-t-elle en interne ? Analysons cela.

Sous le capot : comment splice() déplace les éléments

Lorsque vous appelez splice(), le moteur JavaScript (par exemple, V8 dans Chrome ou SpiderMonkey dans Firefox) effectue plusieurs étapes :

1. Vérification des limites et du type

Le moteur vérifie si l'index est un nombre et s'il se trouve dans les limites de la longueur du tableau. Si l'index est négatif, il est converti en length + index. Si vous passez autre chose qu'un nombre, une conversion en nombre est effectuée (souvent vers 0 ou NaN).

2. Création d'un "trou" dans le tableau

Supposons que nous ayons un tableau [A, B, C] et que nous insérions X à la position 1. Le moteur doit libérer de l'espace. Il ne se contente pas d'"écrire" X à la place de B. Au lieu de cela, il décale tous les éléments à partir de l'index 1 d'une position vers la droite. Ainsi, B prend la place de C, et C prend une nouvelle position (index 3). C'est ce qu'on appelle le décalage.

3. Optimisation : tableau continu vs. tableau sparse

Les tableaux JavaScript ne sont pas simplement une séquence de cellules mémoire, comme en C. Ce sont des objets avec un comportement particulier. Le moteur essaie de stocker les données dans un buffer continu (comme dans les tableaux typés). Si vous insérez des éléments au milieu, le moteur est obligé de réallouer la mémoire : allouer un nouveau bloc plus grand et y copier tous les éléments. C'est une opération en O(n) (complexité linéaire). Plus le tableau est grand, plus l'insertion est longue.

Si le tableau est sparse (clairsemé), c'est-à-dire qu'il a des "trous" (par exemple, [1, , 3]), le moteur passe à un stockage sous forme de table de hachage. L'insertion dans un tel tableau peut être plus rapide, mais consomme plus de mémoire.

4. Mise à jour de la longueur

Après le décalage et l'insertion, le moteur met à jour la propriété length du tableau. Si vous avez inséré un élément, la longueur augmente de 1.

Voici une visualisation simplifiée du processus :

// Tableau initial en mémoire : [A, B, C]\n// On insère X à l'index 1\n// Étape 1 : Décalage : [A, B, C, undefined] (on alloue de l'espace)\n// Étape 2 : Copie : [A, B, B, C] (on décale B et C)\n// Étape 3 : Insertion : [A, X, B, C]\n// Étape 4 : Mise à jour de la longueur