Lassen Sie uns die Verwirrung um die Methoden Slice (), Splice () und Split () in JavaScript beseitigen

Integrierte JavaScript-Methoden helfen uns beim Programmieren sehr, sobald wir sie richtig verstanden haben. Ich möchte in diesem Artikel drei von ihnen erklären: die slice(), splice()und split()Methoden. Vielleicht, weil ihre Namen so ähnlich sind, sind sie selbst unter erfahrenen Entwicklern oft verwirrt.

Ich rate Studenten und Nachwuchsentwicklern, diesen Artikel sorgfältig zu lesen, da diese drei Methoden auch in JOB INTERVIEWS gefragt werden können.

Am Ende finden Sie eine Zusammenfassung jeder Methode. Wenn Sie möchten, können Sie auch die folgende Videoversion ansehen:

So lass uns anfangen…

JavaScript-Arrays

Zunächst müssen Sie verstehen, wie JavaScript-Arrays funktionieren. Wie in anderen Programmiersprachen verwenden wir Arrays, um mehrere Daten in JS zu speichern. Der Unterschied besteht jedoch darin, dass JS- Arrays gleichzeitig verschiedene Datentypen enthalten können.

Manchmal müssen wir Operationen an diesen Arrays ausführen. Dann verwenden wir einige JS-Methoden wie Slice () & Splice () . Im Folgenden sehen Sie, wie Sie ein Array in JavaScript deklarieren:

let arrayDefinition = [];   // Array declaration in JS

Jetzt deklarieren wir ein anderes Array mit unterschiedlichen Datentypen. Ich werde es unten in Beispielen verwenden:

let array = [1, 2, 3, "hello world", 4.12, true];

Diese Verwendung ist in JavaScript gültig . Ein Array mit verschiedenen Datentypen: Zeichenfolge, Zahlen und ein Boolescher Wert.

Scheibe ( )

Die Slice () -Methode kopiert einen bestimmten Teil eines Arrays und gibt diesen kopierten Teil als neues Array zurück. Das ursprüngliche Array wird nicht geändert.

array.slice(from, until);

  • Von: Schneiden Sie das Array ausgehend von einem Elementindex auf
  • Bis: Schneiden Sie das Array in einen anderen Elementindex

Zum Beispiel möchte ich die ersten drei Elemente aus dem obigen Array herausschneiden. Da das erste Element eines Arrays immer bei 0 indiziert ist, beginne ich, "von" 0 zu schneiden .

array.slice(0, until);

Hier ist der schwierige Teil. Als ich die ersten drei Elemente schneiden will, muss ich das geben , bis Parameter als 3. Die Methode slice () beinhaltet nicht das letzte Element gegeben.

array[0] --> 1 // included array[1] --> 2 // included array[2] --> 3 // included array[3] --> "hello world" // not included

Dies kann zu Verwirrung führen. Deshalb rufe ich den zweiten Parameter "bis" auf.

let newArray = array.slice(0, 3);   // Return value is also an array

Schließlich ordne ich das in Scheiben geschnittene Array der Variablen newArray zu . Nun sehen wir uns das Ergebnis an:

Wichtiger Hinweis: Die Slice () -Methode kann auch für Zeichenfolgen verwendet werden.

Spleißen ()

Der Name dieser Funktion ist Slice () sehr ähnlich . Diese Namensähnlichkeit verwirrt Entwickler oft. Die splice () -Methode ändert ein Array, indem Elemente hinzugefügt oder daraus entfernt werden. Mal sehen, wie man Elemente mit splice ( ) hinzufügt und entfernt :

Elemente entfernen

Zum Entfernen von Elementen müssen wir den Indexparameter und die Anzahl der zu entfernenden Elemente angeben:

array.splice(index, number of elements);

Der Index ist der Ausgangspunkt für das Entfernen von Elementen. Elemente mit einer kleineren Indexnummer aus dem angegebenen Index werden nicht entfernt:

array.splice(2);  // Every element starting from index 2, will be removed

Wenn wir den zweiten Parameter nicht definieren, wird jedes Element, das mit dem angegebenen Index beginnt, aus dem Array entfernt:

Als zweites Beispiel gebe ich den zweiten Parameter als 1 an, sodass Elemente ab Index 2 jedes Mal einzeln entfernt werden, wenn wir die splice () -Methode aufrufen :

array.splice(2, 1);

Nach dem ersten Anruf:

Nach dem 2. Anruf:

Dies kann fortgesetzt werden, bis kein Index 2 mehr vorhanden ist.

Elemente hinzufügen

Zum Hinzufügen von Elementen müssen wir sie als 3., 4., 5. Parameter (abhängig davon, wie viele hinzugefügt werden sollen) zur splice () -Methode angeben :

array.splice (Index, Anzahl der Elemente, Element, Element);

Als Beispiel füge ich a und b ganz am Anfang des Arrays hinzu und entferne nichts:

array.splice(0, 0, 'a', 'b');

Teilt ( )

Die Methoden Slice () und Splice () gelten für Arrays. Die split () -Methode wird für Zeichenfolgen verwendet . Es unterteilt eine Zeichenfolge in Teilzeichenfolgen und gibt sie als Array zurück. Es werden 2 Parameter benötigt, und beide sind optional.

string.split(separator, limit);

  • Trennzeichen: Definiert, wie eine Zeichenfolge geteilt wird… durch ein Komma, ein Zeichen usw.
  • Limit: Begrenzt die Anzahl der Teilungen mit einer bestimmten Anzahl

Die split () -Methode funktioniert nicht direkt für Arrays . Wir können jedoch zuerst die Elemente unseres Arrays in einen String konvertieren und dann die split () -Methode verwenden.

Mal sehen, wie es funktioniert.

Zunächst konvertieren wir unser Array mit der Methode toString () in einen String :

let myString = array.toString();

Teilen wir nun myString durch Kommas auf, beschränken sie auf drei Teilzeichenfolgen und geben sie als Array zurück:

let newArray = myString.split(",", 3);

Wie wir sehen können, wird myString durch Kommas getrennt. Da wir die Aufteilung auf 3 beschränken, werden nur die ersten 3 Elemente zurückgegeben.

HINWEIS: Wenn wir eine Verwendung wie diese haben,array.split("");wird jedes Zeichen der Zeichenfolge als Teilzeichenfolge unterteilt:

Zusammenfassung:

Scheibe ( )

  • Kopiert Elemente aus einem Array
  • Gibt sie als neues Array zurück
  • Ändert das ursprüngliche Array nicht
  • Startet das Schneiden von… bis zum angegebenen Index: array.slice (von, bis)
  • Slice enthält keinen Indexparameter "bis"
  • Kann sowohl für Arrays als auch für Strings verwendet werden

Spleißen ()

  • Wird zum Hinzufügen / Entfernen von Elementen zum Array verwendet
  • Gibt ein Array entfernter Elemente zurück
  • Ändert das Array
  • Zum Hinzufügen von Elementen: array.splice (Index, Anzahl der Elemente, Element)
  • Zum Entfernen von Elementen: array.splice (Index, Anzahl der Elemente)
  • Kann nur für Arrays verwendet werden

Teilt ( )

  • Teilt einen String in Teilzeichenfolgen
  • Gibt sie in einem Array zurück
  • Nimmt 2 Parameter, beide sind optional: string.split (Trennzeichen, Limit)
  • Ändert die ursprüngliche Zeichenfolge nicht
  • Kann nur für Zeichenfolgen verwendet werden

Es gibt viele andere integrierte Methoden für JavaScript-Arrays und -Strings, die die Arbeit mit der JavaScript-Programmierung erleichtern. Als nächstes können Sie meinen neuen Artikel über JavaScript-Teilstring-Methoden lesen.

Wenn Sie mehr über Webentwicklung erfahren möchten, folgen Sie mir auf Youtube !

Danke fürs Lesen!