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

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

PHPz
PHPzOriginal
2024-08-09 14:33:07289Durchsuche

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);

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 

Elementsyntax hinzufügen

array.splice(startIndex, 0, item1, item2, ..., itemX);

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 ]

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' ]

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' ]

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' ]

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!

Stellungnahme:
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