array.splice () – Elemente einfügen, löschen, ersetzen

Am beliebiger Position einfügen, ersetzen oder löschen

splice () fügt Elemente an einer beliebigen Position des Arrays ein oder ersetzt sie oder löscht eine Anzahl von Elementen ab einer beliebigen Position.

Javascript array.splice(start, c [, e]) fügt c Elemente, die als Parameter e1, e2, … ec aufgeführt sind, in das Array ab Position start ein und überschreibt dabei vorhandene Elemente.

//              ┌───────┬───────┐
//              0       1       2      3       4       5
let colors = ["rot", "grün", "blau", "gelb", "oliv", "grau"];

let out = colors.splice(0, 3, "lila", "braun", "ocker");

console.log ("out " + out);       // rot,grün,blau
console.log ("colors " + colors); // lila,braun,ocker,gelb,oliv,grau

colors.splice(0, 3, "lila", "braun", "ocker"); schneidet ab Position 0 drei Elemente aus colors und setzt drei neue Elemente lila, braun und ocker hinzu. Also enthält das Array colors am Ende der Anweisung lila, braun, ocker, gelb, oliv, grau.

Die Methode verändert das Array. Alles was aus dem Array herausgeschnitten wurde, kann einer Variablen übergeben werden.

[Log]  out rot,grün,blau 
[Log]  colors lila,braun,ocker,gelb,oliv,grau 

Werden die optionalen Argumente e nicht benutzt, löscht splice(start, delcount) delcount Elemente ab Position start. Die folgenden Elemente werden neu durchnummeriert – mit splice(start, delcount) entstehen keine Lücken oder Löcher im Array.

colors.splice(1, 3); schneidet ab Position 1 drei Elemente aus colors aus, so dass "lila", "olive" und "grau" bleiben.

//     0      1       2       3      4      5
//     |      |       |       |      |      |
//	"lila","braun","ocker","gelb","oliv","grau"

[Log]  colors lila,olive,grau

array.splice(): Element einfügen

Mit dem dritten Argument fügt array.splice() ein neues Element in ein Array ein.

// Das Original-Array
let myarray = ["EINS", "ZWEI", "VIER"];
// splice(position, numberOfItemsToRemove, item)
myarray.splice(2, 0, "DREI");
console.log (myarray);

[LOG] myarray EINS,ZWEI,DREI,VIER

Die Methode array.insert() zum Array-Prototype hinzufügen:

Array.prototype.insert = function (index, item) {
  this.splice(index, 0, item);
};

Helferfunktion: array.copyWithin () – Element kopieren

copyWithin () kopiert Elemente des Arrays auf eine andere Position im Array und überschreibt dabei die vorhandenen Elemente. copyWithin fügt dem Array also keine neuen Elemente hinzu, ist aber destruktiv: Das Array wird geändert.

Genauso wie splice() arbeitet copyWithin() indexbasiert und verändert das Original-Array. copyWithin ist allerdings reines Überschreiben innerhalb desselben Arrays.

//               0      1     2     3     4
const fruits = ["🍋", "🌶", "🍎", "🍒", "🍐"];
fruits.copyWithin(2, 0);
                  |  |
             ziel +  +-- start

kopiert die Elemente von Startplatz 0 des Arrays auf die Zielposition ab Platz 2.

//                0      1     2     3     4     5
const animals = ["🐈", "🐋", "🐖", "🐙", "🐟", "🐿"];
animals.copyWithin(2, 0, 2);
                   |  |  |
          ziel  ---+  |  +--- ende
                      +
                    start

Mit drei Parametern:

array.fill() – Array mit vordefinierten Werten füllen

array.fill() füllt das Array mit Werten und überschreibt dabei vorhandene Elemente – ist also destruktiv. Die Methode wird in erster Linie verwendet, um das Array mit vordefinierten Werten zu initialisieren.

Das folgende Beispiel erzeugt ein Array mit 10 Elementen und setzt die Elemente auf allen Indizes direkt auf 0.

const starter = new Array(10).fill(0);

Das erzeugt ein Array mit 10 Elementen und setzt die Elemente auf allen Indizes direkt auf 0.

Im folgenden Beispiel füllt der erste Aufruf von fill das Array auf allen Stellen mit den angegebenen Wert. Der zweite Aufruf von fill setzt einen anderen Wert auf die Plätze von (inklusiv) 2 bis (exklusiv) 4.

const cloth = ["👗", "👚", "👠", "👢"];
cloth.fill("👠");
cloth.fill("👗", 2, 4);

copyWithin, fill, splice

copyWithin, fill, splice gehören zur selben Familie und unterscheiden sich, wie stark sie jeweils in die Struktur des Arrays eingreifen.

Alle drei Methoden mutieren das Original-Array, arbeiten indexbasiert und sich speicherorientiert. array.copyWidthin() und array.fill() sind schneller, array.splice() ist flexibler, aber auch komplizierter.

delete – Array-Element an Position löschen

Auch delete arr[idx] löscht den Wert eines Array-Elements – und zwar an einem Index. Dabei rutschen die folgenden Array-Elemente nicht vor, sondern das gelöschte Array-Element hinterläßt eine Lücke. So entstehen sparse arrays.

const a = [10, 20, 30];
delete a[1];

console.log(a);        // [10, <empty>, 30]
console.log(a.length); // 3

Sparse Arrays sorgen schon mal für Kopfzerbrechen und Ärger, aber trotzdem kann es auch erwünscht sein, dass alle Array-Elemente an ihrem Index bleiben und die Länge des Arrays nicht geändert wird.

Array.splice vs Array.slice

slice() und splice() klingt zwar ähnlich und sieht auch ähnlich aus, aber slice und splice haben unterschiedliche Funktionen:

splice () entfernt Elemente oder fügt neue in das Array ein und verändert das Original. Array.slice hingegen verändert das Original-Array nicht, sondern liefert einen Ausschnitt des Originals zurück.