Heim > Web-Frontend > js-Tutorial > Beherrschen von Array-Funktionen in JavaScript: Slice, Splice und forEach

Beherrschen von Array-Funktionen in JavaScript: Slice, Splice und forEach

DDD
Freigeben: 2024-12-25 13:44:11
Original
463 Leute haben es durchsucht

Mastering Array Functions in JavaScript: slice, splice, and forEach

Array-Funktionen in JavaScript: Slice, Splice und forEach

JavaScript-Arrays verfügen über eine Reihe integrierter Methoden, die Ihnen bei der Bearbeitung und Interaktion mit Array-Elementen helfen. Drei häufig verwendete Array-Methoden sind slice, splice und forEach. Diese Methoden können Ihre Fähigkeit, sauber und effizient mit Arrays zu arbeiten, erheblich verbessern.

1. slice()-Methode

Die Methode „slice()“ wird verwendet, um einen Teil eines Arrays zu extrahieren, ohne das ursprüngliche Array zu ändern. Es erstellt eine flache Kopie eines Teils des Arrays und gibt ein neues Array zurück.

Syntax:

array.slice(start, end);
Nach dem Login kopieren
Nach dem Login kopieren
  • Start: Der Index, bei dem mit der Extraktion begonnen werden soll. Das Element an diesem Index ist enthalten.
  • Ende: Der Index, an dem die Extraktion beendet werden soll (nicht enthalten). Wenn es weggelassen wird, wird bis zum Ende des Arrays geschnitten.

Beispiele:

const arr = [1, 2, 3, 4, 5];

// Slice from index 1 to index 3 (excluding index 3)
const newArr = arr.slice(1, 3);

console.log(newArr);  // Output: [2, 3]
Nach dem Login kopieren
Nach dem Login kopieren
  • In diesem Beispiel gibt arr.slice(1, 3) ein neues Array zurück, das bei Index 1 beginnt und kurz vor Index 3 endet.

Wenn das Endargument weggelassen wird, kopiert Slice() alles vom Startindex bis zum Ende des Arrays:

const arr = [1, 2, 3, 4, 5];

// Slice from index 2 to the end
const newArr = arr.slice(2);

console.log(newArr);  // Output: [3, 4, 5]
Nach dem Login kopieren
Nach dem Login kopieren

Negative Indizes:

Sie können auch negative Indizes verwenden, um vom Ende des Arrays abzuschneiden:

const arr = [1, 2, 3, 4, 5];

// Slice from index -3 to the end
const newArr = arr.slice(-3);

console.log(newArr);  // Output: [3, 4, 5]
Nach dem Login kopieren
Nach dem Login kopieren

2. splice()-Methode

Die splice()-Methode wird verwendet, um ein Array durch Hinzufügen oder Entfernen von Elementen zu ändern. Es ändert das ursprüngliche Array und kann zum Einfügen oder Entfernen von Elementen an einem bestimmten Index verwendet werden.

Syntax:

array.splice(start, deleteCount, item1, item2, ..., itemN);
Nach dem Login kopieren
Nach dem Login kopieren
  • Start: Der Index, an dem mit der Änderung des Arrays begonnen werden soll.
  • deleteCount: Die Anzahl der Elemente, die ab dem Startindex entfernt werden sollen.
  • item1, item2, ..., itemN: Elemente, die dem Array beginnend mit dem Startindex hinzugefügt werden sollen.

Beispiele:

const arr = [1, 2, 3, 4, 5];

// Remove 2 elements from index 2
const removedElements = arr.splice(2, 2);

console.log(arr);  // Output: [1, 2, 5]
console.log(removedElements);  // Output: [3, 4]
Nach dem Login kopieren
  • In diesem Beispiel entfernt arr.splice(2, 2) 2 Elemente beginnend bei Index 2 (3 und 4).

Sie können splice() auch verwenden, um Elemente hinzuzufügen zum Array:

const arr = [1, 2, 3, 4, 5];

// Insert 6 and 7 at index 2
arr.splice(2, 0, 6, 7);

console.log(arr);  // Output: [1, 2, 6, 7, 3, 4, 5]
Nach dem Login kopieren
  • Hier fügt arr.splice(2, 0, 6, 7) 6 und 7 an Index 2 ein, ohne irgendwelche Elemente zu entfernen (deleteCount ist 0).

Zusammen entfernen und hinzufügen:

Sie können splice() auch verwenden, um Elemente zu entfernen und hinzuzufügen in einem Vorgang:

array.slice(start, end);
Nach dem Login kopieren
Nach dem Login kopieren

3. forEach()-Methode

Die Methode forEach() wird verwendet, um über die Elemente eines Arrays zu iterieren und auf jedes Element eine Funktion anzuwenden. Im Gegensatz zu map() oder filter() gibt forEach() kein neues Array zurück; Es führt einfach die angegebene Funktion für jedes Element aus.

Syntax:

const arr = [1, 2, 3, 4, 5];

// Slice from index 1 to index 3 (excluding index 3)
const newArr = arr.slice(1, 3);

console.log(newArr);  // Output: [2, 3]
Nach dem Login kopieren
Nach dem Login kopieren
  • Rückruf: Die Funktion, die für jedes Element ausgeführt werden soll.
    • currentValue: Das aktuelle Element, das im Array verarbeitet wird.
    • Index: Der Index des aktuellen Elements.
    • Array: Das Array, für das forEach aufgerufen wird.

Beispiel:

const arr = [1, 2, 3, 4, 5];

// Slice from index 2 to the end
const newArr = arr.slice(2);

console.log(newArr);  // Output: [3, 4, 5]
Nach dem Login kopieren
Nach dem Login kopieren

Pfeilfunktionen verwenden:

Sie können auch eine Pfeilfunktion verwenden, um den Code prägnanter zu gestalten:

const arr = [1, 2, 3, 4, 5];

// Slice from index -3 to the end
const newArr = arr.slice(-3);

console.log(newArr);  // Output: [3, 4, 5]
Nach dem Login kopieren
Nach dem Login kopieren

Array-Elemente ändern:

Beachten Sie, dass forEach() zum Ausführen von Nebeneffekten (z. B. Protokollieren oder Aktualisieren von Werten) und nicht zum Zurückgeben oder Ändern des Arrays verwendet wird. Wenn Sie ein neues Array basierend auf dem vorhandenen benötigen, sollten Sie die Verwendung von map() in Betracht ziehen.

array.splice(start, deleteCount, item1, item2, ..., itemN);
Nach dem Login kopieren
Nach dem Login kopieren

Vergleich von Slice, Splice und forEach

Method Purpose Mutates Original Array Returns Value
slice Extracts a portion of an array without modifying it No A new array (shallow copy)
splice Adds/removes elements at specific positions in array Yes The removed elements (array)
forEach Executes a function on each array element No undefined

Abschluss

  • slice() eignet sich perfekt zum Extrahieren eines Teils eines Arrays, ohne das ursprüngliche Array zu ändern.
  • splice() ermöglicht Ihnen das Entfernen, Ersetzen oder Hinzufügen von Elementen zu einem Array und ändert das ursprüngliche Array.
  • forEach() ist ideal zum Durchlaufen von Array-Elementen und zum Ausführen von Nebenwirkungen, gibt jedoch kein neues Array zurück.

Diese Methoden sind wesentliche Werkzeuge bei der Arbeit mit Arrays in JavaScript und können Ihren Code effizienter und lesbarer machen.


Hallo, ich bin Abhay Singh Kathayat!
Ich bin ein Full-Stack-Entwickler mit Fachwissen sowohl in Front-End- als auch in Back-End-Technologien. Ich arbeite mit einer Vielzahl von Programmiersprachen und Frameworks, um effiziente, skalierbare und benutzerfreundliche Anwendungen zu erstellen.
Sie können mich gerne unter meiner geschäftlichen E-Mail-Adresse erreichen: kaashshorts28@gmail.com.

Das obige ist der detaillierte Inhalt vonBeherrschen von Array-Funktionen in JavaScript: Slice, Splice und forEach. 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