Heim > Web-Frontend > js-Tutorial > Array.slice vs. Array.splice: Klärung der Verwirrung

Array.slice vs. Array.splice: Klärung der Verwirrung

PHPz
Freigeben: 2024-08-09 14:33:07
Original
311 Leute haben es durchsucht

Array.slice vs. Array.splice: Clearing Up the Confusion

Einführung

Als JavaScript-Entwickler fand ich es oft etwas schwierig, zwei Array-Methoden vollständig zu verstehen

  1. Array.slice
  2. Array.splice.

Also habe ich beschlossen, tiefer einzutauchen und diese Methoden anhand klarer Beispiele aufzuschlüsseln.

Wenn ich die Syntax neu schreibe

Array.slice

returns the deleted elements in a form of Array = Array.prototype.slice(startIndex, endIndex-1);
Nach dem Login kopieren

Array.splice (P für Permanent – ​​Immer im Gedächtnis behalten)

Die Splice-Methode in JavaScript ändert den Inhalt eines Arrays durch Entfernen oder Ersetzen vorhandener Elemente und/oder Hinzufügen neuer Elemente an Ort und Stelle

Elementsyntax entfernen

returns the deleted elements in a form of Array = Array.prototype.splice(startIndex, endIndex-1); // permanent 

Nach dem Login kopieren

Elementsyntax hinzufügen

array.splice(startIndex, 0, item1, item2, ..., itemX);
Nach dem Login kopieren

HINWEIS:-

  1. Es ändert das ursprüngliche Array und gibt das gelöschte Array zurück.

  2. Wenn es sich wie ein Add-Vorgang verhält, gibt es [] zurück, da nichts entfernt wird.

Sehen wir uns einige Beispiele an:-

Q1. Übung 1 – Slice verwenden, um einen Teil eines Arrays abzurufen: Erstellen Sie ein Array mit Zahlen von 1 bis 10. Verwenden Sie die Slice-Methode, um ein neues Array zu erhalten, das Zahlen von 4 bis 8 enthält.

const arr = Array.from(Array(10), (_, i) => i+1);
console.log('Array --> ', arr);
console.log('get a new array that includes numbers from 4 to 8 --> ', arr.slice(3, 8)); // Array.prototype.slice(startIndex, endIndex-1);

// [ 4, 5, 6, 7, 8 ]
Nach dem Login kopieren

Q2. Übung 2 – Verwenden von Splice zum Entfernen von Elementen aus einem Array: Erstellen Sie ein Array von Früchten. Verwenden Sie die Spleißmethode, um „Apfel“ und „Banane“ aus dem Array zu entfernen.

const fruits = ['apple', 'banana', 'orange', 'mango', 'kiwi'];

fruits.splice(0, 2)// permanent

console.log('splice method to remove "apple" and "banana" from the array. --> ', fruits);

// [ 'orange', 'mango', 'kiwi' ]
Nach dem Login kopieren

Q3. Übung 3 – Verwenden von Splice zum Hinzufügen von Elementen zu einem Array: Erstellen Sie ein Array mit Farben. Verwenden Sie die Spleißmethode, um nach „Rot“ „Rosa“ und „Lila“ hinzuzufügen.

const colors = ['red', 'green', 'blue'];

const y = colors.splice(1, 0, "pink", "purple"); /
console.log(y); // [] see above to see why.
console.log('splice method to add "pink" and "purple" after "red" --> ', colors)

// [ 'red', 'pink', 'purple', 'green', 'blue' ]
Nach dem Login kopieren

Q4. Übung 4 – Gemeinsames Verwenden von „Slice“ und „Splice“: Erstellen Sie ein Array aus Buchstaben von „a“ bis „e“. Verwenden Sie Slice, um ein neues Array der ersten drei Buchstaben zu erhalten. Verwenden Sie dann Splice auf dem ursprünglichen Array, um diese Buchstaben zu entfernen.

const letters = ['a', 'b', 'c', 'd', 'e'];
const newSlice = letters.slice(0, 3);
const x = letters.splice(0, 3);
console.log(x);
console.log('slice to get a new array of the first three letters --> ', newSlice) // [ 'a', 'b', 'c' ]

console.log('Then use splice on the original array to remove these letters --> ', letters)[ 'd', 'e' ]
Nach dem Login kopieren

Wenn Sie Fragen/Bedenken haben, können Sie sich gerne an mich wenden.

Das obige ist der detaillierte Inhalt vonArray.slice vs. Array.splice: Klärung der Verwirrung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage