Methoden zur Erstellung von Arrays

JavaScript bietet verschiedene Möglichkeiten, Arrays zu erstellen. Jede Methode hat ihre eigenen Vor- und Nachteile.

1. Array-Literal-Notation

Die einfachste und am häufigsten verwendete Methode ist die Literal-Notation mit eckigen Klammern:

const früchte = ["Apfel", "Banane", "Kirsche"];
const leeresArray = []; // Ein leeres Array

Diese Methode ist leicht zu lesen, zu schreiben und wird von den meisten JavaScript-Entwicklern bevorzugt.

2. Der Array-Konstruktor

JavaScript bietet auch einen Konstruktor namens Array(), mit dem neue Arrays erstellt werden können:

// Erstellung eines leeren Arrays
const leeresArray = new Array();

// Erstellung eines Arrays mit festgelegter Länge
const fünfPlätze = new Array(5);

// Erstellung eines Arrays mit Werten
const früchte = new Array("Apfel", "Banane", "Kirsche");

Gefahren des Array-Konstruktors

Der Array-Konstruktor bringt einige Besonderheiten mit sich, die leicht zu Verwirrung führen können:

// Diese beiden Aufrufe verhalten sich UNTERSCHIEDLICH:
const zahlen1 = new Array(3);       // Erstellt ein Array mit 3 leeren Plätzen
const zahlen2 = new Array(1, 2, 3); // Erstellt ein Array mit den Werten 1, 2, 3

console.log(zahlen1.length); // Ausgabe: 3
console.log(zahlen1[0]);     // Ausgabe: undefined
console.log(zahlen2);        // Ausgabe: [1, 2, 3]

Die Hauptgefahr liegt in der unterschiedlichen Interpretation:

• Mit einem einzigen numerischen Argument wird ein leeres Array der angegebenen Länge erzeugt
• Mit mehreren Argumenten oder einem nicht-numerischen Argument werden diese als Elemente des Arrays verwendet

Diese Zweideutigkeit kann zu schwer auffindbaren Fehlern führen, besonders wenn die Arrayerstellung auf dynamischen Werten basiert.

3. Array.of() – Eine klarere Alternative

Um die Zweideutigkeit des Array-Konstruktors zu vermeiden, wurde in neueren JavaScript-Versionen die Methode Array.of() eingeführt:

const zahlen1 = Array.of(3);       // Erstellt [3]
const zahlen2 = Array.of(1, 2, 3); // Erstellt [1, 2, 3]

Mit Array.of() werden alle Argumente unabhängig von ihrer Anzahl oder ihrem Typ als Elemente des Arrays behandelt.

4. Array.from() – Arrays aus anderen Sammlungen

Die Methode Array.from() erstellt Arrays aus array-ähnlichen oder iterierbaren Objekten:

// Ein Array aus einer Zeichenkette erstellen
const buchstaben = Array.from("Hallo");
console.log(buchstaben); // Ausgabe: ["H", "a", "l", "l", "o"]

// Ein Array aus einem Set erstellen
const einzigartig = Array.from(new Set([1, 2, 2, 3, 1]));
console.log(einzigartig); // Ausgabe: [1, 2, 3]

// Ein Array mit Zahlen von 1 bis 5 erstellen
const zahlenreihe = Array.from({length: 5}, (_, i) => i + 1);
console.log(zahlenreihe); // Ausgabe: [1, 2, 3, 4, 5]

Array.from() ist besonders nützlich für die Umwandlung von DOM-Ergebnissen, Zeichenketten und anderen Strukturen in echte Arrays.

Die Grenzen von Arrays: Assoziative Arrays werden nicht unterstützt

Ein häufiges Missverständnis bei Anfängern ist der Versuch, „assoziative Arrays“ zu erstellen – also Arrays, bei denen statt Zahlen Texte als Indizes verwendet werden. JavaScript unterstützt diese Struktur NICHT im eigentlichen Sinne:

const scheinbaresAssoziativesArray = [];
scheinbaresAssoziativesArray["name"] = "Max";
scheinbaresAssoziativesArray["alter"] = 30;

console.log(scheinbaresAssoziativesArray.length); // Ausgabe: 0 (!)
console.log(scheinbaresAssoziativesArray[0]);     // Ausgabe: undefined

Was hier passiert: JavaScript verwandelt die Array-Instanz nicht in ein assoziatives Array, sondern fügt dem Array-Objekt einfach Eigenschaften hinzu. Diese Eigenschaften beeinflussen nicht die Länge des Arrays und verhalten sich nicht wie Array-Elemente.

Die richtige Alternative: Objekte verwenden

Für Datenstrukturen mit benannten Einträgen solltest Du stattdessen Objekte verwenden:

const person = {
    name: "Max",
    alter: 30
};

console.log(person.name);  // Ausgabe: "Max"
console.log(person.alter); // Ausgabe: 30

Objekte sind für diese Art von Datenstruktur optimiert und bieten bessere Leistung und klarere Semantik.

Leistungsaspekte bei der Array-Erstellung

Die Leistung bei der Erstellung und Verwendung von Arrays kann je nach Methode und Anwendungsfall variieren.

Vorab deklarierte Größe vs. dynamisches Wachstum

Wenn Du die endgültige Größe eines Arrays im Voraus kennst, kann es leistungstechnisch vorteilhaft sein, diese Größe beim Erstellen anzugeben:

// Ineffizient bei sehr großen Arrays
const langsam = [];
for (let i = 0; i < 10000; i++) {
    langsam.push(i);
}

// Effizienter bei sehr großen Arrays
const schneller = new Array(10000);
for (let i = 0; i < 10000; i++) {
    schneller[i] = i;
}

Bei sehr großen Arrays kann das dynamische Wachstum zu wiederholten Speicherumverteilungen führen, was die Leistung beeinträchtigt.

Literal vs. Konstruktor

In den meisten Fällen ist die Leistung zwischen Literal-Notation und Konstruktor vergleichbar, aber die Literal-Notation wird aufgrund ihrer Klarheit bevorzugt:

// Diese beiden Methoden sind leistungstechnisch ähnlich
const mitLiteral = ["a", "b", "c"];
const mitKonstruktor = new Array("a", "b", "c");

Nur in speziellen Fällen mit sehr großen, vorab dimensionierten Arrays kann der Konstruktor leichte Vorteile bieten.

Vergleichstabelle: Methoden zur Array-Erstellung

Methode	Syntax	Vorteile	Nachteile	Empfohlen für
Literal-Notation	const arr = [1, 2, 3]	Einfach, klar, kompakt, allgemein bevorzugt	Keine direkten Nachteile	Die meisten Anwendungsfälle, lesbare Codegestaltung
Array-Konstruktor	const arr = new Array(1, 2, 3)	Kann Arrays mit festgelegter Größe erstellen	Verwirrende Dualität (Länge vs. Elemente), umständlichere Syntax	Spezielle Fälle, wo ein Array mit vorgegebener Länge benötigt wird
Array.of()	const arr = Array.of(3)	Klares Verhalten, keine Zweideutigkeit	Weniger bekannt, leicht längere Syntax	Code, in dem Eindeutigkeit wichtiger ist als Kürze
Array.from()	const arr = Array.from("Hallo")	Vielseitig, kann array-ähnliche Objekte konvertieren	Leistung kann bei komplexen Umwandlungen leiden	Umwandlung von anderen Datenstrukturen, funktionale Programmierung
Vordefinierte Größe + Zuweisung	const arr = new Array(1000); for(...){...}	Leistungsvorteil bei sehr großen Arrays	Umständlicher Code	Leistungskritische Anwendungen mit großen Arrays
Dynamisches Wachstum mit push()	const arr = []; arr.push(1); arr.push(2);	Flexibel, leicht verständlich	Potenzielle Leistungseinbußen bei sehr großen Arrays	Fälle, in denen die endgültige Größe unbekannt ist

Praktische Empfehlungen

Basierend auf den bisherigen Erkenntnissen, hier einige konkrete Empfehlungen:

1. Verwende in den meisten Fällen die Literal-Notation:

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

2. Nutze Array.from() für Umwandlungen:

const buttons = Array.from(document.querySelectorAll('button'));

3. Verwende Objekte statt „assoziativer Arrays“:

// Nicht so:
const falsch = [];
falsch["schlüssel"] = "wert";

// Sondern so:
const richtig = {
    schlüssel: "wert"
};

4. Vermeide lückenhafte Arrays:

// Nicht so:
const lückenhaft = [];
lückenhaft[0] = "eins";
lückenhaft[2] = "drei";

// Sondern so:
const vollständig = ["eins", "zwei", "drei"];

5. Für sehr große Arrays mit bekannter Größe, reserviere den Speicherplatz:

const großesArray = new Array(1000000);
for (let i = 0; i < großesArray.length; i++) {
    großesArray[i] = i * 2;
}

Fazit

Die Erstellung von Arrays in JavaScript bietet verschiedene Ansätze, jeder mit seinen eigenen Vor- und Nachteilen. Für die meisten Anwendungsfälle ist die Literal-Notation ([]) die beste Wahl aufgrund ihrer Klarheit und Einfachheit. In speziellen Situationen können der Konstruktor oder Methoden wie Array.of() und Array.from() nützlich sein.