Lassen Sie uns Slice (), Splice () und Spread Syntax (…) in JavaScript untersuchen

Ich bin auf diese freeCodeCamp-Herausforderung gestoßen und habe einige Zeit darüber nachgedacht, wie ich einen Weg finden könnte, sie zu lösen. Sie haben bereits das Lösen mit Slice & Splice erwähnt. Ich war damals verwirrt, wann ich Slice und wann Splice verwenden sollte.

Hier werde ich erzählen, wie ich es mit diesen Methoden gelöst habe.

Sowohl Slice als auch Splice werden zum Bearbeiten von Arrays verwendet. Mal sehen, wie sie es machen.

Scheibe:

Die Slice-Methode akzeptiert 2 Argumente.

1. Argument : Gibt an, von wo aus die Auswahl gestartet werden soll.

Zum Beispiel:

var arr1 = [1,5,8,9]; arr1.slice(1); // [5,8,9]

Ab dem ersten Index (5) werden die Elemente zurückgegeben.

2. Argument : Gibt an, auf welcher Ebene der Endpunkt liegen soll. Wenn Sie dies beim Aufrufen der Slice-Methode nicht in Klammern gesetzt haben, werden die Elemente vom Startindex bis zum Ende des Arrays zurückgegeben.

var arr1 = [1,5,8,9]; console.log(arr1.slice(1,3)); //[ 5, 8 ]

Wenn Sie beim Aufrufen eine negative Nummer eingeben, wird die Auswahl am Ende des Arrays ausgewählt.

var arr1 = [1,5,8,9]; console.log(arr1.slice(-2)); //[ 8, 9 ]

Hinweis: Slice gibt immer die ausgewählten Elemente aus dem Array zurück.

Slice ändert das Array nicht. Das Array bleibt erhalten. Siehe das folgende Beispiel:

var arr1 = [1,5,8,9]; arr1.slice(2); console.log(arr1); // [ 1, 5, 8, 9 ]

Selbst wenn Sie einige Änderungen am Array vorgenommen haben, hat dies keine Auswirkungen. Das ursprüngliche Array wird wie zu Beginn zurückgegeben.

Spleißen:

Es kann mehrere Argumente annehmen.

Das bedeutet,

1. Argument : Gibt an, an welcher Position ein neues oder vorhandenes Element hinzugefügt / entfernt werden soll. Wenn der Wert negativ ist, wird die Position ab dem Ende des Arrays gezählt.

2. Argument : Die Anzahl der Elemente, die von der Startposition entfernt werden sollen. Wenn es 0 ist, werden keine Elemente entfernt. Wenn es nicht übergeben wird, werden alle Elemente von der Startposition gelöscht.

var arr1 = [1,5,8,9]; console.log(arr1.splice(1,2)); // [ 5, 8 ]

3. Argument -> n-tes Argument : Der Wert der Elemente, die Sie dem Array hinzufügen möchten.

var arr1 = [1,5,8,9]; console.log(arr1.splice(1,2,'Hi','Medium')); // [5,8]

Sie denken vielleicht, dass wir dem Array 'Hi', 'Medium' hinzugefügt haben, aber es wird hier nicht angezeigt…. Richtig?

Ja, wir haben die arr1.splice (1,2, 'Hi', 'Medium') getröstet .

Hinweis:

  • Splice gibt nur entfernte Elemente aus dem Array zurück.
  • Splice ändert das ursprüngliche Array
var arr1 = [1,5,8,9]; arr1.splice(1,2,'Hi','Medium'); console.log(arr1); // [ 1, 'Hi', 'Medium', 9 ]

Spread-Syntax:

Definition : Ermöglicht das Erweitern einer Iteration wie eines Array-Ausdrucks oder einer Zeichenfolge an Stellen, an denen null oder mehr Argumente (für Funktionsaufrufe) oder Elemente (für Array-Literale) erwartet werden, oder das Erweitern eines Objektausdrucks an Stellen, an denen null oder mehr vorhanden sind Schlüssel-Wert-Paare (für Objektliterale) werden erwartet.

Lassen Sie uns ein Beispiel dafür haben:

var arr1 = [1,3,6,7]; var arr2 = [5,arr1,8,9]; console.log(arr2); // [ 5, [ 1, 3, 6, 7 ], 8, 9 ]

Ich möchte, dass dies in einem einzelnen Array wie [5, 1, 3, 6, 7, 8, 9] erfolgt.

Ich kann diese Spread-Syntax verwenden, um dies zu lösen:

var arr1 = [1,3,6,7]; var arr2 = [5,...arr1,8,9]; console.log(arr2); //[ 5, 1, 3, 6, 7, 8, 9 ]

Eine weitere Hauptanwendung der Spread-Syntax ist das Kopieren eines Arrays:

var arr = [1, 2, 3]; var arr2 = arr; arr2.push(4); console.log(arr2); // [ 1, 2, 3, 4 ] console.log(arr); // [ 1, 2, 3, 4 ]

Ich habe nur arr2 mit „ 4versehen . Aber es hat auch die Änderung zu arr gemacht.

Wir können dies mit der Spread-Syntax wie folgt lösen ...

var arr = [1, 2, 3]; var arr2 = [...arr]; // like arr.slice() arr2.push(4); console.log(arr2); // [ 1, 2, 3, 4 ] console.log(arr); // [ 1, 2, 3]

Weitere Informationen zur Spread-Syntax finden Sie in der MDN-Dokumentation.

Schauen wir uns also die Herausforderung an.

function frankenSplice(arr1, arr2, n) { // It's alive. It's alive! let array2Copy = [...arr2]; array2Copy.splice(n,0, ...arr1); //console.log(array2Copy); return array2Copy; } frankenSplice([1, 2, 3], [4, 5, 6], 1);

Die Hauptbedingung dieser Herausforderung ist "sollte arr1 / arr2 nach Ausführung der Funktion nicht ändern".

So erstellt eine Kopie Array von arr2, und unter Verwendung der Spleiß - Methode die arr1 innerhalb der Kopie des arr2 hinzufügen , die als Namen array2Copy.

Schlußfolgerung:

-> Slice-Methode wird

  • Geben Sie die ausgewählten Elemente aus dem Array zurück
  • nimm 2 Argumente
  • Ändern Sie nicht das ursprüngliche Array

-> Spleißmethode wird

  • Geben Sie die entfernten Elemente des Arrays zurück
  • nimm mehrere Argumente
  • ändert das ursprüngliche Array

Dies ist mein erstes Tutorial zum Thema Codierung - danke fürs Lesen! Ihr Feedback wird mir helfen, meine Codierungs- und Schreibfähigkeiten zu verbessern.

Viel Spaß beim Codieren…!

Verbinde dich mit mir über Twitter