Array.splice und Array.slice in JavaScript

Hallo habr Ich präsentiere Ihnen die Übersetzung des Artikels „Array.splice und Array.slice in JavaScript“ von Kunal Tandon.

Sie müssen einfach die oben genannten Funktionen verwenden, die im JavaScript-Array-Prototyp verfügbar sind. Aber sie sehen sich so ähnlich, dass man manchmal zwischen ihnen verwechseln kann.

Hauptunterschiede

Array.splice ändert das ursprüngliche Array und gibt ein Array mit den gelöschten Elementen zurück.

Array.slice ändert das ursprüngliche Array nicht. Es wird einfach ein neues Array von Elementen zurückgegeben, bei dem es sich um eine Teilmenge des ursprünglichen Arrays handelt.

Array.splice

Splice wird verwendet, um den Inhalt eines Arrays zu ändern. Dazu gehört das Löschen von Elementen, das Ersetzen vorhandener Elemente oder sogar das Hinzufügen neuer Elemente zu diesem Array.

Bei Verwendung der Spleißfunktion wird das ursprüngliche Array aktualisiert.

Betrachten Sie das folgende Array:

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

Array.splice mit Syntax

arr.splice (fromIndex, itemsToDelete, item1ToAdd, item2ToAdd, ...);

Elemente löschen

Um Elemente aus einem Array zu entfernen, schreiben wir:

 var deleItems = arr.splice (3, 2); 

Dadurch werden die beiden Elemente ab Index 3 entfernt und das Remote-Array zurückgegeben. Als Ergebnis erhalten wir:

 deleItems // [3, 4] arr // [0, 1, 2, 5, 6, 7, 8] 

Hinzufügen neuer Elemente

Um dem Array neue Elemente hinzuzufügen, schreiben wir:

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; var arr2 = arr.splice (2, 0, 100, 101); 

Ab dem zweiten Element des Arrays werden die Zahlen 100 und 101 hinzugefügt. Die endgültigen Werte lauten wie folgt:

 arr2 // [],         arr // [0, 1, 100, 101, 2, 3, 4, 5, 6, 7, 8] 

Ändern Sie ein vorhandenes Element

Wir können ein vorhandenes Element im Array mit einem Spleiß knifflig modifizieren, um das Element anhand seiner Indexnummer zu entfernen und an seiner Stelle ein neues Element einzufügen.

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

Um 3 durch 100 zu ersetzen, schreiben wir:

 var arr2 = arr.splice (3, 1, 100); //   -   3  1    100 

Wir erhalten die folgenden Werte für arr und arr2, nachdem wir das obige Code-Snippet ausgeführt haben:

 arr2 // [3]      3   arr arr // [0, 1, 2, 100, 4, 5, 6, 7, 8] // 3   100   arr 

Array.slice

Während Splice auch Array-Elemente einfügen und aktualisieren kann, werden mit der Slice-Funktion nur Elemente aus dem Array entfernt.
Wir können Elemente nur mit der Slice-Funktion aus dem Array entfernen

Array.slice-Syntax

arr.slice (startIndex, endIndex);

startIndex - der Startindex des Elements für das neue Array, das wir im neuen Array erhalten sollen
startIndex.endIndex (optional) - Der endgültige Index, für den das Slicing ausgeführt werden soll, ohne dieses Element.

Betrachten Sie das folgende Array:

 const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 

Um einen Teil des Arrays aus den Werten [2, 3, 4, 5] zu erhalten, schreiben wir:

 var slicedArr = arr.slice (2, 6); 

Bitte beachten Sie, dass wir hier das zweite Argument 6 und nicht 5 angegeben haben. Nach dem Ausführen des obigen Codes erhalten wir das folgende Array:

 arr // [0, 1, 2, 3, 4, 5, 6, 7, 8] slicedArr // [2, 3, 4, 5] 

Die arr-Variable bleibt nach der Ausführung der slice-Anweisung unverändert, während die splice-Anweisung das ursprüngliche Array aktualisiert.

Wenn wir also das ursprüngliche Array aktualisieren möchten, verwenden wir die Splice-Funktion. Wenn wir jedoch nur einen Teil des Arrays benötigen, verwenden wir Slice.