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 Original. 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() kopiert »ein Scheibchen« eines Arrays in ein neues Array, array.splice hingegen entfernt Elemente, fügt neue Elemente in das Array und verändert so das Original.

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

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.