Array 1…N in JavaScript: Geheimnisse der Geschwindigkeit und Leistung

Array 1…N in JavaScript: Vom Einfachen zum Leistungsstarken

Hallo, Entwicklerkollege! Wenn du jemals vor der Aufgabe standest, "ein Array von Zahlen von 1 bis N zu erstellen" – bist du nicht allein. Dies ist eine so beliebte Frage auf Stack Overflow, dass sie tausende Aufrufe und Dutzende Antwortvarianten gesammelt hat. Man sollte meinen, was könnte einfacher sein? Aber der Teufel steckt, wie immer, im Detail: Leistung, Lesbarkeit und Vielseitigkeit des Codes.

Heute werden wir alle grundlegenden Methoden zur Erstellung eines Arrays [1, 2, 3, ..., N] in JavaScript durchgehen, sie hinsichtlich Geschwindigkeit, Eleganz und Anwendungsbereich vergleichen. Du wirst erfahren, welche Methode du für ein normales Projekt wählen solltest und welche, wenn jede Millisekunde zählt. Los geht's!

Warum ist das wichtig? Kontext der Aufgabe

Stell dir vor: Du schreibst einen Sortieralgorithmus, generierst Testdaten, erstellst ein Raster für ein Spiel oder möchtest einfach schnell eine Zahlenfolge erhalten. In all diesen Fällen wird ein Array von 1 bis N benötigt. Man sollte meinen – eine for-Schleife und los. Aber modernes JavaScript bietet so viel syntaktischen Zucker, dass man leicht den Überblick verlieren kann.

Wir werden 5 Hauptansätze betrachten, von der Klassik bis zu modernen Einzeilern, und sie unter realen Bedingungen auf Herz und Nieren prüfen. Mach dich bereit für die Browserkonsole und deinen Lieblingseditor – es wird heiß hergehen!

Methode 1: Die klassische for-Schleife

Eine grundlegende, aber zuverlässige Methode, die jeder Anfänger kennt:

function createArrayLoop(n) {\n  const arr = [];\n  for (let i = 1; i <= n; i++) {\n    arr.push(i);\n  }\n  return arr;\n}\n\nconsole.log(createArrayLoop(5)); // [1, 2, 3, 4, 5]

Vorteile:

\n
• Maximale Lesbarkeit – verständlich selbst für diejenigen, die gerade erst mit JS beginnen.
\n
• Keine versteckten Aufrufe oder Magie.
\n
• Funktioniert in allen Umgebungen, einschließlich sehr alter Browser.
\n

Nachteile:

\n
• Langsamer als einige Alternativen (aber für kleine N nicht kritisch).
\n
• Viel Code für eine einfache Aufgabe.
\n

Methode 2: Array.from() mit map-Funktion

Ein eleganter moderner Ansatz, der in ES6 eingeführt wurde:

const createArrayFrom = n => Array.from({ length: n }, (_, i) => i + 1);\n\nconsole.log(createArrayFrom(5)); // [1, 2, 3, 4, 5]

Hier erstellen wir ein Array mit einer bestimmten Länge und füllen es sofort über eine map-Funktion. Das zweite Argument von Array.from ist genau die Mapper-Funktion, die den aktuellen Index i erhält und i + 1 zurückgibt.

Vorteile:

\n
• Sehr kurz und ausdrucksstark.
\n
• Erfordert keine vorherige Erstellung eines leeren Arrays.
\n
• Gute Leistung.
\n

Nachteile:

\n
• Kann für Anfänger weniger offensichtlich sein.
\n
• Erstellt ein Zwischenobjekt { length: n }.
\n

Methode 3: Spread-Operator + keys()

Einer der beliebtesten Einzeiler auf Stack Overflow:

const createArraySpread = n => [...Array(n).keys()].map(i => i + 1);\n\nconsole.log(createArraySpread(5)); // [1, 2, 3, 4, 5]

Wie funktioniert das? Array(n) erstellt ein lückenhaftes Array aus n leeren Elementen. .keys() gibt einen Iterator der Indizes zurück (0, 1, 2...). Der Spread-Operator entpackt ihn in ein normales Array, und dann verschiebt map die Werte um +1.

Vorteile:

\n
• Sehr prägnant (ein Aufruf).
\n
• Sieht "magisch" aus – überrascht Kollegen im Code-Review angenehm.
\n

Nachteile:

\n
• Die langsamste aller Methoden für große N (aufgrund des doppelten Durchlaufs und der Erstellung von Zwischenarrays).
\n
• Für Anfänger schwerer zu verstehen.
\n
• Verbraucht mehr Speicher.
\n

Methode 4: Array.fill() + map()

Eine weitere beliebte Variante:

const createArrayFill = n => Array(n).fill().ma