Einfügen eines Elements in ein Array an einem Index: Wie es unter der Haube in JS funktioniert

Einleitung: Warum ist die Frage nach dem Einfügen eines Elements in ein Array so beliebt?

Stellen Sie sich vor: Sie schreiben Code und müssen eine neue Aufgabe in die Mitte einer To-Do-Liste einfügen oder einen Benutzer alphabetisch in ein sortiertes Array einfügen. Was könnte daran schon schwer sein? Aber wenn Sie ein Anfänger in JavaScript sind, ist der erste Gedanke, push() oder unshift() zu verwenden. Diese fügen jedoch nur am Ende oder am Anfang ein Element hinzu. Was aber, wenn Sie einen bestimmten Index benötigen?

Genau diese Frage hat auf Stack Overflow tausende Aufrufe gesammelt. In diesem Artikel geben wir nicht nur eine fertige Antwort, sondern schauen unter die Haube der JavaScript-Engine und analysieren, wie das Einfügen eines Elements in ein Array tatsächlich funktioniert. Sie lernen nicht nur die Magie der splice()-Methode, sondern verstehen auch, welche Prozesse im Speicher ablaufen. Los geht's!

Direkte Antwort: Wie man ein Element an einem Index einfügt

Der einfachste und korrekteste Weg ist die Verwendung der splice()-Methode. Diese Methode ändert den Inhalt eines Arrays, indem sie Elemente entfernt, ersetzt oder hinzufügt. So sieht eine klassische Einfügung aus:

let fruits = ['apple', 'banana', 'cherry'];\nlet index = 1; // Einfügen nach 'apple'\nlet itemToInsert = 'orange';\n\nfruits.splice(index, 0, itemToInsert);\nconsole.log(fruits); // ['apple', 'orange', 'banana', 'cherry']

Lassen Sie uns die Syntax analysieren:

\n
• Erstes Argument (index) — Der Index, ab dem das Array geändert wird.
\n
• Zweites Argument (0) — Die Anzahl der zu entfernenden Elemente. Null bedeutet, dass wir nichts entfernen, sondern nur einfügen.
\n
• Drittes und folgende Argumente — Die Elemente, die hinzugefügt werden sollen. Es können mehrere Werte übergeben werden.
\n

Diese Methode ist das universelle Schweizer Taschenmesser für die Arbeit mit Arrays. Aber wie funktioniert sie intern? Lassen Sie uns das analysieren.

Unter der Haube: Wie splice() Elemente verschiebt

Wenn Sie splice() aufrufen, führt die JavaScript-Engine (z. B. V8 in Chrome oder SpiderMonkey in Firefox) mehrere Schritte aus:

1. Überprüfung von Grenzen und Typ

Die Engine prüft, ob der Index eine Zahl ist und innerhalb der Array-Länge liegt. Wenn der Index negativ ist, wird er in length + index umgewandelt. Wenn Sie keine Zahl übergeben, erfolgt eine Umwandlung in eine Zahl (oft zu 0 oder NaN).

2. Erstellen eines "Lochs" im Array

Angenommen, wir haben ein Array [A, B, C] und fügen X an Position 1 ein. Die Engine muss Platz schaffen. Sie überschreibt nicht einfach B mit X. Stattdessen verschiebt sie alle Elemente ab Index 1 um eine Position nach rechts. Das heißt, B wird zu C, C wird zur neuen Position (Index 3). Dies wird als Verschiebung bezeichnet.

3. Optimierung: Kontinuierliches Array vs. sparse array

JavaScript-Arrays sind nicht einfach eine Sequenz von Speicherzellen wie in C. Sie sind Objekte mit speziellem Verhalten. Die Engine versucht, Daten in einem kontinuierlichen Puffer zu speichern (wie in typisierten Arrays). Wenn Elemente in die Mitte eingefügt werden, muss die Engine Speicher neu zuweisen: einen neuen, größeren Block reservieren und alle Elemente dorthin kopieren. Dies ist eine O(n)-Operation (lineare Komplexität). Je größer das Array, desto länger dauert das Einfügen.

Wenn das Array sparse (lückenhaft) ist, also "Löcher" hat (z. B. [1, , 3]), wechselt die Engine zur Speicherung als Hash-Tabelle. Das Einfügen in ein solches Array kann schneller sein, verbraucht aber mehr Speicher.

4. Aktualisierung der Länge

Nach der Verschiebung und dem Einfügen aktualisiert die Engine die length-Eigenschaft des Arrays. Wenn Sie ein Element eingefügt haben, erhöht sich die Länge um 1.

Hier ist eine vereinfachte Visualisierung des Prozesses:

// Ursprüngliches Array im Speicher: [A, B, C]\n// Wir fügen X an Index 1 ein\n// Schritt 1: Verschiebung: [A, B, C, undefined] (Platz schaffen)\n// Schritt 2: Kopieren: [A, B, B, C] (B und C verschieben)\n// Schritt 3: Einfügen: [A, X, B, C]\n// Schritt 4: Aktualisierung der Länge