Javascript Array slice (), splice ()

Elemente in ein anderes Array kopieren / löschen und ersetzen

array.slice() kopiert Elemente von einem Startindex bis zu einem Endindex in ein neues Array. slice zieht sozusagen ein »Scheibchen« aus dem Originalarray.

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

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

array.slice()

slice eignet sich zum Kopieren eines vollständigen Arrays, um Teile eines Arrays in ein neues Array zu kopieren und um Array-ähnliche Objekte in ein Array umzuwandeln.

Javascript slice(start[, end]) kopiert einen Bereich eines Arrays in ein anderes Array. start ist die Anfangsposition und end die Position nach dem ausgeschnittenen Bereich. Wenn eine der beiden Zahlen negativ ist, wird vom Ende des Arrays aus gezählt.

Das Original-Array bleibt erhalten – die Methode array.slice() ist nicht destruktiv.

slice ohne Parameter

Ohne Parameter kopiert slice das komplette Array. Damit liegen zwei Arrays mit gleichen Elementen vor.

                   0     1     2     3      4     5     6
const vehicle = ["🚂", "🚐", "🚋", "🚒", "🚜", "🚗", "🚚"];
const clone = vehicle.slice ();
console.log ("clone", clone);		// ["🚂", "🚐", "🚋", "🚒", "🚜", "🚗", "🚚"]

slice mit einem Parameter

Mit nur einem Parameter idx kopiert slice die Elemente vom Index idx bis zum Ende des Arrays.

const auszug = vehicle.slice (3);
console.log ("auszug", auszug);		//  ["🚒", "🚜", "🚗", "🚚"]

slice mit zwei Parametern

Mit zwei Parametern (from, to) kopiert slice die Elemente von einschließlich from bis to, aber ohne to selber aufzunehmen.

const auszug2 = vehicle.slice (2, 5);
console.log ("auszug2", auszug2); 	//  ["🚋", "🚒", "🚜"]

slice mit negativem Index

Am Ende kann slice mit einem negativen Index aufgerufen werden. Dann zählt slice vom Ende des Arrays an.

const backwards = vehicle.slice (-3);
console.log ("backwards", backwards);	// ["🚜", "🚗", "🚚"]

slice (-1) liefert also das letzte Element des Arrays.

arr.slice()
kopiert das vollständige Array.
arr.slice(4)
schneidet das Element mit dem Index 4 aus. Wenn im Aufruf nur der Startindex angegeben ist, setzt slice() die Länge des Arrays als zweites Argument.
arr.slice(0,3)
schneidet die Elemente vom Index 0 bis zum Index vor 3 aus. Das Resultat ist ein Javascript Array der Länge 3: Der letzte Index ist ein leerer Platz oder Loch (sparse Arrays).
arr.slice(0, -2);
schneidet die Elemente vom Index 0 bis zum Index -2 + 5 = 3 aus. Wenn also einer der Indexwerte negativ ist, wird die Länge des Arrays addiert.

Ein leeres Element im Array? array.filter() mit einer Callback-Funktion aufrufen, die alle Werte auf "null"/"undefined" prüft.

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

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

Die Anweisung 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 Parameter 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 insert

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