Skip to content

JavaScript Array-Methoden Cheat Sheet

Diese Seite bietet einen detaillierten Leitfaden zu JavaScript-Array-Methoden, einschließlich gängiger Operationen, neuer ES6-Funktionen, Leistungsoptimierung und mehr.

Erstellung von Arrays

JavaScript bietet mehrere Möglichkeiten, Arrays zu erstellen:

Verwendung von Array-Literalen 

let arr = [1, 2, 3];

Verwendung des Konstruktors 

let arr = new Array(1, 2, 3);

Verwendung der Methode Array.of 

let arr = Array.of(1, 2, 3);

Verwendung der Methode Array.from 

let arr = Array.from('123'); // ['1', '2', '3']

Array-Operationen

Arrays bieten eine Vielzahl von Methoden zum Hinzufügen, Löschen, Ändern und Abfragen von Daten:

Elemente hinzufügen

  • push: Fügen Sie ein oder mehrere Elemente am Ende des Arrays hinzu
  • unshift: Fügen Sie ein oder mehrere Elemente am Anfang des Arrays hinzu

Elemente löschen

  • pop: Löschen Sie das letzte Element des Arrays
  • shift: Löschen Sie das erste Element des Arrays
  • splice: Löschen Sie eine beliebige Anzahl von Elementen basierend auf dem Index

Elemente finden

  • indexOf: Finden Sie den Index eines Elements im Array
  • includes: Bestimmen Sie, ob das Array ein bestimmtes Element enthält

Über Arrays iterieren

  • forEach: Führen Sie eine Callback-Funktion einmal für jedes Element des Arrays aus
  • map: Erstellen Sie ein neues Array mit den Ergebnissen des Aufrufs einer bereitgestellten Funktion für jedes Element im aufrufenden Array
  • filter: Erstellen Sie ein neues Array mit allen Elementen, die den vom bereitgestellten Funktion implementierten Test bestehen

Array-Transformation

  • join: Verbinden Sie alle Elemente eines Arrays zu einem String
  • slice: Geben Sie eine flache Kopie eines Teils eines Arrays zurück
  • concat: Führen Sie zwei oder mehr Arrays zusammen

ES6 Neue Funktionen

ES6 hat viele Erweiterungen für Array-Operationen eingeführt:

Spread-Operator 

let arr = [1, 2, 3];
let arr2 = [...arr, 4, 5]; // [1, 2, 3, 4, 5]

Array.prototype.find 

let result = arr.find(item => item > 2); // 3

Array.prototype.findIndex 

let index = arr.findIndex(item => item > 2); // 2

Array.prototype.fill 

arr.fill(0); // [0, 0, 0]

Array.prototype.includes 

arr.includes(2); // true

Leistungsoptimierung

Beim Umgang mit großen Arrays ist die Leistungsoptimierung besonders wichtig:

  • Versuchen Sie, native Methoden wie map und filter zu verwenden, die normalerweise in C++ implementiert sind und schneller als JavaScript-Schleifen sind.
  • Erwägen Sie bei häufig manipulierten Arrays die Verwendung von Typed Arrays.
  • Vermeiden Sie DOM-Operationen innerhalb von Schleifen; sammeln Sie stattdessen die zu manipulierenden DOM-Knoten und führen Sie die Operation alle auf einmal aus.

Fazit

Durch diesen Leitfaden sollten Sie ein tieferes Verständnis für JavaScript-Array-Operationen haben. Weitere Informationen finden Sie in den MDN Web Docs.