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

Elemente einfügen, löschen und ersetzen

array.splice() löscht Elemente aus dem Array, ersetzt sie durch neue Elemente und gibt die ersetzen Elemente zurück.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Unterschied zwischen Array.slice und Array.splice

Die Methode 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.

array.slice vs array.splice Schema
array.slice vs array.splice

array.splice() – Array-Elemente einsetzen, löschen oder ersetzen

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.

//             start              
//              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);
console.log ("colors " + colors);

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);
};

delete

Auch array.delete (idx) löscht ein Array-Element – 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.

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.