Arrays sind eine der am häufigsten verwendeten Datenstrukturen in JavaScript. Sie ermöglichen das Speichern mehrerer Werte in einer einzigen Variablen und verfügen über zahlreiche integrierte Funktionen, die die Bearbeitung und Arbeit mit Daten einfach und effizient machen. In diesem Artikel befassen wir uns im Detail mit den JavaScript-Array-Funktionen und stellen Erklärungen, Beispiele und Kommentare zur Verfügung, damit Sie diese besser beherrschen können.

Einführung in Arrays in JavaScript

Ein Array ist eine geordnete Sammlung von Elementen, die verschiedene Datentypen enthalten kann, einschließlich Zahlen, Zeichenfolgen, Objekte und sogar andere Arrays.

let fruits = ["Apple", "Banana", "Cherry"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "Apple", true, {name: "John"}, [1, 2, 3]];

Arrays erstellen

Arrays können mit Array-Literalen oder dem Array-Konstruktor erstellt werden.

let arr1 = [1, 2, 3];
let arr2 = new Array(1, 2, 3);
console.log(arr1); // Output: [1, 2, 3]
console.log(arr2); // Output: [1, 2, 3]

Array-Eigenschaften

• length: Gibt die Anzahl der Elemente in einem Array zurück.

let arr = [1, 2, 3, 4, 5];
console.log(arr.length); // Output: 5

Array-Methoden

1. push()

Fügt ein oder mehrere Elemente am Ende eines Arrays hinzu und gibt die neue Länge zurück.

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // Output: [1, 2, 3, 4]

2. pop()

Entfernt das letzte Element aus einem Array und gibt dieses Element zurück.

let arr = [1, 2, 3];
let last = arr.pop();
console.log(arr); // Output: [1, 2, 3]
console.log(last); // Output: 3

3. Shift()

Entfernt das erste Element aus einem Array und gibt dieses Element zurück.

let arr = [1, 2, 3];
let first = arr.shift();
console.log(arr); // Output: [2, 3]
console.log(first); // Output: 1

4. unshift()

Fügt ein oder mehrere Elemente am Anfang eines Arrays hinzu und gibt die neue Länge zurück.

let arr = [2, 3];
arr.unshift(1);
console.log(arr); // Output: [1, 2, 3]

5. concat()

Führt zwei oder mehr Arrays zusammen und gibt ein neues Array zurück.

let arr1 = [1, 2];
let arr2 = [3, 4];
let merged = arr1.concat(arr2);
console.log(merged); // Output: [1, 2, 3, 4]

6. beitreten()

Verbindet alle Elemente eines Arrays zu einem String.

let arr = [1, 2, 3];
let str = arr.join("-");
console.log(str); // Output: "1-2-3"

7. reverse()

Kehrt die Reihenfolge der Elemente in einem Array um.

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // Output: [3, 2, 1]

8. Slice()

Gibt eine flache Kopie eines Teils eines Arrays in ein neues Array-Objekt zurück.

let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 3);
console.log(sliced); // Output: [2, 3]

9. splice()

Ändert den Inhalt eines Arrays durch Entfernen, Ersetzen oder Hinzufügen von Elementen.

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, "a", "b");
console.log(arr); // Output: [1, "a", "b", 4, 5]

10. sort()

Sortiert die Elemente eines Arrays an Ort und Stelle und gibt das sortierte Array zurück.

let arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b);
console.log(arr); // Output: [1, 1, 3, 4, 5, 9]

11. filter()

Erstellt ein neues Array mit allen Elementen, die den von der bereitgestellten Funktion implementierten Test bestehen.

let arr = [1, 2, 3, 4, 5];
let filtered = arr.filter(x => x > 2);
console.log(filtered); // Output: [3, 4, 5]

12. Karte()

Erstellt ein neues Array mit den Ergebnissen des Aufrufs einer bereitgestellten Funktion für jedes Element im aufrufenden Array.

let arr = [1, 2, 3];
let mapped = arr.map(x => x * 2);
console.log(mapped); // Output: [2, 4, 6]

13. Reduzieren()

Wendet eine Funktion auf einen Akkumulator und jedes Element im Array an, um es auf einen einzelnen Wert zu reduzieren.

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // Output: 10

14. find()

Gibt den Wert des ersten Elements im Array zurück, das die bereitgestellte Testfunktion erfüllt.

let arr = [1, 2, 3, 4, 5];
let found = arr.find(x => x > 3);
console.log(found); // Output: 4

15. findIndex()

Gibt den Index des ersten Elements im Array zurück, das die bereitgestellte Testfunktion erfüllt.

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(x => x > 3);
console.log(index); // Output: 3

16. jeder()

Testet, ob alle Elemente im Array den von der bereitgestellten Funktion implementierten Test bestehen.

let arr = [1, 2, 3, 4, 5];
let allBelowTen = arr.every(x => x 




  
  
  17. einige()


Testet, ob mindestens ein Element im Array den von der bereitgestellten Funktion implementierten Test besteht.



let arr = [1, 2, 3, 4, 5];
let anyAboveThree = arr.some(x => x > 3);
console.log(anyAboveThree); // Output: true





  
  
  18. Includes()


Bestimmt, ob ein Array einen bestimmten Wert in seinen Einträgen enthält.



let arr = [1, 2, 3, 4, 5];
let hasThree = arr.includes(3);
console.log(hasThree); // Output: true





  
  
  19. indexOf()


Gibt den ersten Index zurück, an dem ein bestimmtes Element im Array gefunden werden kann, oder -1, wenn es nicht vorhanden ist.



let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);
console.log(index); // Output: 2





  
  
  20. lastIndexOf()


Gibt den letzten Index zurück, an dem ein bestimmtes Element im Array gefunden werden kann, oder -1, wenn es nicht vorhanden ist.



let arr = [1, 2, 3, 4, 5, 3];
let index = arr.lastIndexOf(3);
console.log(index); // Output: 5





  
  
  21. flach()


Erstellt ein neues Array, in dem alle Unterarray-Elemente rekursiv bis zur angegebenen Tiefe verkettet sind.



let arr = [1, [2, [3, [4]]]];
let flattened = arr.flat(2);
console.log(flattened); // Output: [1, 2, 3, [4]]





  
  
  22. flatMap()


Zuerst jedes Element mithilfe einer Zuordnungsfunktion zuordnen und dann das Ergebnis in ein neues Array reduzieren.



let arr = [1, 2, 3];
let flatMapped = arr.flatMap(x => [x, x * 2]);
console.log(flatMapped); // Output: [1, 2, 2, 4, 3, 6]





  
  
  23. from()


Erstellt eine neue, flach kopierte Array-Instanz aus einem Array-ähnlichen oder iterierbaren Objekt.



let str = "Hello";
let arr = Array.from(str);
console.log(arr); // Output: ["H", "e", "l", "l", "o"]





  
  
  24. isArray()


Bestimmt, ob der übergebene Wert ein Array ist.



console.log(Array.isArray([1, 2, 3])); // Output: true
console.log(Array.isArray("Hello")); // Output: false





  
  
  25. von()


Erstellt ein

neue Array-Instanz mit einer variablen Anzahl von Argumenten, unabhängig von Anzahl oder Typ der Argumente.



let arr = Array.of(1, 2, 3);
console.log(arr); // Output: [1, 2, 3]





  
  
  Praxisbeispiele



  
  
  Beispiel 1: Duplikate aus einem Array entfernen




let arr = [1, 2, 3, 3, 4, 4, 5];
let unique = [...new Set(arr)];
console.log(unique); // Output: [1, 2, 3, 4, 5]





  
  
  Beispiel 2: Summieren aller Werte in einem Array




let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // Output: 15





  
  
  Beispiel 3: Reduzieren eines tief verschachtelten Arrays




let arr = [1, [2, [3, [4, [5]]]]];
let flattened = arr.flat(Infinity);
console.log(flattened); // Output: [1, 2, 3, 4, 5]





  
  
  Beispiel 4: Ermitteln des Maximalwerts in einem Array




let arr = [1, 2, 3, 4, 5];
let max = Math.max(...arr);
console.log(max); // Output: 5





  
  
  Beispiel 5: Erstellen eines Arrays von Schlüssel-Wert-Paaren




let obj = { a: 1, b: 2, c: 3 };
let entries = Object.entries(obj);
console.log(entries); // Output: [["a", 1], ["b", 2], ["c", 3]]





  
  
  Abschluss


Arrays sind ein wesentlicher Bestandteil von JavaScript und bieten eine leistungsstarke Möglichkeit, Datensammlungen zu verwalten. Durch die Beherrschung von Array-Funktionen können Sie problemlos komplexe Datenmanipulationen durchführen und effizienteren und lesbareren Code schreiben. Dieser umfassende Leitfaden behandelt die wichtigsten Array-Funktionen in JavaScript, komplett mit detaillierten Beispielen und Erklärungen. Üben Sie die Verwendung dieser Funktionen und experimentieren Sie mit verschiedenen Anwendungsfällen, um Ihr Verständnis zu vertiefen und Ihre Programmierfähigkeiten zu verbessern.