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

Dec 25, 2024 pm 01:44 PM

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!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße? Was soll ich tun, wenn ich auf den Codendruck auf Kleidungsstücke für Front-End-Thermalpapier-Quittungen stoße? Apr 04, 2025 pm 02:42 PM

Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...

Entmystifizieren JavaScript: Was es tut und warum es wichtig ist Entmystifizieren JavaScript: Was es tut und warum es wichtig ist Apr 09, 2025 am 12:07 AM

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Wer bekommt mehr Python oder JavaScript bezahlt? Wer bekommt mehr Python oder JavaScript bezahlt? Apr 04, 2025 am 12:09 AM

Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.

Wie kann man Parallax -Scrolling- und Element -Animationseffekte wie die offizielle Website von Shiseido erzielen?
oder:
Wie können wir den Animationseffekt erzielen, der von der Seite mit der Seite mit der offiziellen Website von Shiseido begleitet wird? Wie kann man Parallax -Scrolling- und Element -Animationseffekte wie die offizielle Website von Shiseido erzielen? oder: Wie können wir den Animationseffekt erzielen, der von der Seite mit der Seite mit der offiziellen Website von Shiseido begleitet wird? Apr 04, 2025 pm 05:36 PM

Diskussion über die Realisierung von Parallaxe -Scrolling- und Elementanimationseffekten in diesem Artikel wird untersuchen, wie die offizielle Website der Shiseeido -Website (https://www.shiseeido.co.jp/sb/wonderland/) ähnlich ist ...

Die Entwicklung von JavaScript: Aktuelle Trends und Zukunftsaussichten Die Entwicklung von JavaScript: Aktuelle Trends und Zukunftsaussichten Apr 10, 2025 am 09:33 AM

Zu den neuesten Trends im JavaScript gehören der Aufstieg von Typenkripten, die Popularität moderner Frameworks und Bibliotheken und die Anwendung der WebAssembly. Zukunftsaussichten umfassen leistungsfähigere Typsysteme, die Entwicklung des serverseitigen JavaScript, die Erweiterung der künstlichen Intelligenz und des maschinellen Lernens sowie das Potenzial von IoT und Edge Computing.

Ist JavaScript schwer zu lernen? Ist JavaScript schwer zu lernen? Apr 03, 2025 am 12:20 AM

JavaScript zu lernen ist nicht schwierig, aber es ist schwierig. 1) Verstehen Sie grundlegende Konzepte wie Variablen, Datentypen, Funktionen usw. 2) Beherrschen Sie die asynchrone Programmierung und implementieren Sie sie durch Ereignisschleifen. 3) Verwenden Sie DOM -Operationen und versprechen Sie, asynchrone Anfragen zu bearbeiten. 4) Vermeiden Sie häufige Fehler und verwenden Sie Debugging -Techniken. 5) Die Leistung optimieren und Best Practices befolgen.

Wie fusioniere ich Arrayelemente mit derselben ID mit JavaScript in ein Objekt? Wie fusioniere ich Arrayelemente mit derselben ID mit JavaScript in ein Objekt? Apr 04, 2025 pm 05:09 PM

Wie fusioniere ich Array -Elemente mit derselben ID in ein Objekt in JavaScript? Bei der Verarbeitung von Daten begegnen wir häufig die Notwendigkeit, dieselbe ID zu haben ...

So implementieren Sie die Funktion des Ziell- und Drop-Einstellungsfunktion, ähnlich wie bei VSCODE in der Front-End-Entwicklung? So implementieren Sie die Funktion des Ziell- und Drop-Einstellungsfunktion, ähnlich wie bei VSCODE in der Front-End-Entwicklung? Apr 04, 2025 pm 02:06 PM

Erforschen Sie die Implementierung der Funktion des Bedien- und Drop-Einstellungsfunktion der Panel ähnlich wie VSCODE im Front-End. In der Front-End-Entwicklung wird VSCODE ähnlich wie VSCODE implementiert ...

See all articles