Schleifen und Arrays in JavaScript

Eine Schleife wiederholt einen Codeblock. Jede Ausführung ihres Rumpfs ist ein Schleifendurchlauf. Du kannst ändern, wie oft die Arbeit wiederholt wird, indem du den Zähler und die Bedingung der Schleife änderst, ohne den Rumpf zu kopieren.

Lies die drei Teile

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

Die Klammern enthalten eine Initialisierung, eine Bedingung und eine Aktualisierung, getrennt durch Semikolons. let i = 1 wird einmal ausgeführt. JavaScript prüft dann i <= 5. Ist die Bedingung wahr, gibt der Rumpf i aus, die Aktualisierung i++ addiert 1 und JavaScript prüft die Bedingung erneut. Eine falsche Bedingung beendet die Schleife, bevor der Rumpf erneut ausgeführt wird.

Es gibt fünf Schleifendurchläufe, aber sechs Prüfungen der Bedingung. Bei der letzten, fehlgeschlagenen Prüfung wird der Rumpf nicht ausgeführt. Eine Schleife, deren Bedingung zu Beginn falsch ist, hat keinen Schleifendurchlauf.

Wähle die Endpunkte und die Schrittweite

for (let i = 0; i < 10; i++) besucht 0 bis 9. Ein Start bei 1 mit i <= 10 besucht 1 bis 10. Beide laufen zehnmal durch. Bei einer Schrittweite von 1 von a in Richtung b ergibt < b genau b - a Schleifendurchläufe und <= b genau b - a + 1, wenn b mindestens so groß wie a ist.

Die Aktualisierung kann größere Schritte machen: for (let i = 0; i <= 20; i += 5) besucht 0, 5, 10, 15, 20. Zum Rückwärtszählen brauchst du sowohl eine abnehmende Aktualisierung als auch eine passende Bedingung: for (let i = 3; i >= 1; i--) besucht 3, 2, 1. Schreibe den ersten und letzten vorgesehenen Wert auf, bevor du < oder <= wählst; so erkennst du einen Off-by-one-Fehler.

Führe eine laufende Summe

let total = 0;
for (let i = 1; i <= 100; i++) {
  total += i;
}
console.log(total); // 5050

total ist ein Akkumulator: Er trägt das Ergebnis von einem Schleifendurchlauf in den nächsten. Nach den ersten drei Durchläufen enthält er 1, dann 3, dann 6. Setze seine Deklaration vor die Schleife, damit er einmal initialisiert wird. Eine Deklaration innerhalb des Rumpfs würde ihn jedes Mal zurücksetzen und nach der Schleife wäre er nicht verfügbar.

Untersuche eine Schleife, die sich seltsam verhält

Der Zähler im Kopf verwendet let, weil i++ ihm einen neuen Wert zuweist. Ein const-Zähler erlaubt die erste Ausführung des Rumpfs, löst aber bei der Aktualisierung einen TypeError aus. Ein im Kopf deklariertes let i gehört zur Schleife; es danach zu lesen löst einen ReferenceError aus, sofern außerhalb keine andere Variable namens i existiert.

Ein Semikolon direkt nach dem Kopf gibt der Schleife einen leeren Rumpf. In for (let i = 0; i < 3; i++); { console.log("Hello"); } wird der Block nach der Schleife einmal ausgeführt. Setze die öffnende geschweifte Klammer direkt an den Kopf. Prüfe schließlich die Richtung der Aktualisierung: Ein Start bei 0 mit i < 5 und i-- entfernt sich vom Abbruchpunkt und endet nie.

Manche Aufgaben enden, wenn ein Ergebnis einen Zielwert erreicht, nicht nach einer bekannten Anzahl von Schritten. Eine while-Schleife prüft diese Abbruchbedingung vor jeder Wiederholung. Eine do...while-Schleife prüft sie nach dem Rumpf.

Prüfe zuerst mit while

let balance = 1000;
let years = 0;
while (balance < 1500) {
  balance = balance * 1.05;
  years++;
}
console.log(years); // 9

Das Guthaben wächst um 5 % pro Jahr. Beide Variablen werden vor der Schleife initialisiert. Nach acht Wiederholungen beträgt das Guthaben etwa 1477.46 und liegt damit unter dem Zielwert, sodass eine weitere Wiederholung nötig ist. Nach neun beträgt es etwa 1551.33; die nächste Prüfung ist falsch. Runde das Guthaben während der Berechnung nicht, sondern runde nur das angezeigte Ergebnis.

Ist eine while-Bedingung anfangs falsch, wird der Rumpf keinmal ausgeführt. Setze bei einer einfachen Zählschleife die Initialisierung vor while und die Aktualisierung ans Ende des Rumpfs. So bleibt das Verhalten einer for-Schleife erhalten, wenn es kein continue gibt. Bei continue musst du besonders auf die Aktualisierung achten, da sie übersprungen werden kann.

Führe den Rumpf vor der Prüfung einmal aus

let n = 4096;
let digits = 0;
do {
  n = Math.floor(n / 10);
  digits++;
} while (n > 0);
console.log(digits); // 4

Math.floor rundet ab. Hier entfernt jede Division die letzte Ziffer: 4096 wird zu 409, dann zu 40, 4 und 0. Jedes Entfernen erhöht digits. Auch bei einem Start mit 0 wird der Rumpf einmal ausgeführt und die eine Ziffer korrekt gezählt. Eine vorher geprüfte while (n > 0)-Schleife würde diesen Fall überspringen und null Ziffern melden. Diese Methode zum Zählen von Ziffern ist für nicht negative ganze Zahlen gedacht.

Bei let n = 10 wird ein do...while-Rumpf, der n ausgibt, einmal ausgeführt, selbst wenn seine Bedingung n < 5 lautet. Dieselbe vorher geprüfte Bedingung führt zu keiner Ausgabe. Das Semikolon gehört bei do...while hinter die abschließende Bedingung.

Bewege dich auf einen Ausstieg zu

Eine Endlosschleife wiederholt sich, ohne zu enden. Fehlt n++ in let n = 0; while (n < 3) { console.log(n); }, bleibt die Bedingung für immer wahr. Lange laufender Code kann einen Browser-Tab einfrieren. Verfolge, was die Bedingung verändert, und stoppe ein festhängendes Skript mit den Bedienelementen des Browsers.

Eine zusammengesetzte Bedingung wie attempts < 3 && !found läuft nur weiter, solange beide Prüfungen wahr sind. Sie stoppt, wenn drei Versuche verbraucht sind oder ein Ergebnis gefunden wurde. Bei einer nicht negativen ganzen Zahl, die bis auf null abnimmt, macht while (count > 0) einen Countdown deutlicher als while (count). Auch negative Zahlen sind truthy, sodass die Auswertung als Truthy-Wert allein nicht bedeutet, dass eine Anzahl positiv ist.

Vermeide Gleichheit als Abbruchprüfung bei Dezimalzahlen. Zehn Additionen von 0.1 ergeben in JavaScript 0.9999999999999999, sodass while (x !== 1) den vorgesehenen Endpunkt dauerhaft überschreiten kann. Ein Vergleich wie x < 1 erlaubt das Überschreiten der Schranke; ein ganzzahliger Zähler ist besser, wenn genau zehn Schritte nötig sind. Berechne jeden Dezimalwert aus diesem Zähler.

Eine Schleife kann verlassen werden, bevor ihre Bedingung falsch wird, oder Arbeit für nur ein Element überspringen. Mit verschachtelten Schleifen kannst du eine Folge innerhalb einer anderen wiederholen, etwa beim Besuchen von Zeilen und Spalten.

Abbrechen oder fortsetzen

break verlässt seine Schleife sofort. Um das erste Vielfache von 7 über 50 zu finden:

for (let n = 51; n <= 100; n++) {
  if (n % 7 === 0) {
    console.log(n); // 56
    break;
  }
}

Nach der Ausgabe von 56 wird die Ausführung nach der Schleife fortgesetzt. Die Werte 57 bis 100 werden nie geprüft. while (true) kann dasselbe Muster verwenden, wenn sich der Ausstieg am einfachsten innerhalb des Rumpfs prüfen lässt; ein erreichbares break muss den Ausstieg ermöglichen.

continue überspringt den Rest des aktuellen Schleifendurchlaufs. In einer for-Schleife führt es trotzdem die Aktualisierung im Kopf aus, bevor die Bedingung erneut geprüft wird:

for (let i = 1; i <= 9; i++) {
  if (i % 2 === 0) continue;
  console.log(i);
}

Die geraden Werte überspringen die Ausgabe, sodass 1, 3, 5, 7, 9 ausgegeben werden. Würde continue durch break ersetzt, würde die Schleife bei 2 enden und nur 1 ausgegeben.

In einer while-Schleife springt continue direkt zur Bedingung. Eine später im Rumpf platzierte Aktualisierung wird übersprungen. Ist i gleich 2 und beginnt der Rumpf mit if (i === 2) continue;, kann dieser Wert für immer hängen bleiben. Setze die nötige Aktualisierung vor diesen Sprung oder drücke das Zählen mit for aus.

Wiederhole eine innere Schleife für jede Zeile

for (let row = 1; row <= 3; row++) {
  let line = "";
  for (let col = 1; col <= 4; col++) {
    line = line + (row * col) + " ";
  }
  console.log(line.trim());
}

Für row = 1 besucht die innere Schleife die Spalten 1 bis 4 und erstellt den Text „1 2 3 4“. Für Zeile 2 beginnt sie erneut bei Spalte 1 und erzeugt „2 4 6 8“. Zeile 3 erzeugt „3 6 9 12“. Der innere Rumpf läuft zwölfmal: vier Spalten für jede der drei Zeilen. Deklariere line innerhalb des äußeren Rumpfs, damit jede Zeile mit einer leeren Zeichenkette beginnt.

Verwende unterschiedliche Namen für die Zähler. Ein inneres let i verdeckt ein äußeres i, sodass sich beide Positionen schwer lesen lassen.

Besuche jedes unterschiedliche Paar einmal

Beginne bei vier Personen mit den Nummern 0 bis 3 den inneren Zähler bei i + 1:

for (let i = 0; i < 4; i++) {
  for (let j = i + 1; j < 4; j++) {
    console.log(i, j);
  }
}

Die Paare sind 0–1, 0–2, 0–3, 1–2, 1–3, 2–3: sechs Besuche. Würde j bei 0 beginnen, gäbe es sechzehn Besuche, darunter Paare mit sich selbst und umgekehrte Duplikate.

Ein gewöhnliches break verlässt nur die innerste Schleife. Um eine verschachtelte Suche vollständig zu beenden, gib der äußeren Schleife eine Marke, zum Beispiel outer: for (...), und verwende beim Treffer break outer;. Die Marke benennt die Schleife, die verlassen werden soll; sie ändert nicht die Reihenfolge, in der die Paare geprüft werden.

Ein Array speichert eine geordnete Liste unter einem Namen. Seine Werte heißen Elemente. Ein Arrayliteral verwendet eckige Klammern und Kommas: const temps = [18, 21, 19, 24];. Das Literal [] erstellt ein leeres Array.

Zähle Positionen ab null

const colors = ["red", "green", "blue"];
console.log(colors[0]); // "red"
console.log(colors[2]); // "blue"
console.log(colors.length); // 3

Der Index eines Elements ist seine Position, gezählt ab null. Das dritte Element hat den Index 2. length zählt indizierte Stellen einschließlich aller leeren Stellen. Bei diesem lückenlosen Array ist das auch die Anzahl der Elemente. Der letzte Index ist colors.length - 1, sodass colors[colors.length - 1] „blue“ liest.

Das Lesen von colors[colors.length] fragt nach Index 3, einer Stelle hinter dem Ende, und ergibt undefined. Ein fehlender Index löst nicht allein deshalb einen Fehler aus, weil er fehlt. Auch colors[5] ergibt undefined.

Lies vom Ende aus

colors.at(-1) liest das letzte Element und colors.at(-2) das Element davor. Nicht negative Indizes funktionieren wie üblich: colors.at(0) liest „red“. Eine negative Zahl in eckigen Klammern hat eine andere Bedeutung: colors[-1] zählt nicht vom Ende zurück und ergibt für dieses Array undefined.

Lies eine Liste innerhalb einer Liste

Ein Element kann selbst ein Array sein:

const grid = [[1, 2, 3], [4, 5, 6]];
console.log(grid[1]); // [4, 5, 6]
console.log(grid[1][0]); // 4

Der erste Index wählt eine Zeile. Der zweite wählt einen Wert innerhalb dieser Zeile. grid.length ist 2, während grid[0].length gleich 3 ist. Diese Längen beschreiben unterschiedliche Arrays. Zeilen in einem verschachtelten Array können unterschiedliche Längen haben.

Arrays können Typen mischen, wie in [42, "km", true]. Eine Liste mit einer Datenart, etwa Temperaturen, ist leichter zu verarbeiten, weil jedes Element auf dieselbe Weise behandelt werden kann.

Erkenne ein Array und vermeide Überraschungen durch leere Stellen

typeof [1, 2] gibt „object“ zurück und ist daher keine spezifische Prüfung auf ein Array. Verwende Array.isArray(value): Es gibt true für [1, 2] und false für „12“ zurück.

new Array(3) erstellt drei leere Stellen; es speichert nicht die einzelne Zahl 3. Verwende [3] für ein Element oder [0, 0, 0] für drei ausdrücklich angegebene Nullen. Eine leere Stelle ergibt beim Lesen undefined, ist aber eine Lücke und kein ausdrücklich gespeicherter Wert. Arrayliterale zeigen den beabsichtigten Inhalt deutlich.

Lies Zeichenketten, ohne sie direkt verändern zu wollen

Zeichenketten unterstützen ebenfalls Indizierung, length und at(). "hello"[1] ist „e“ und "hello".at(-1) ist „o“. Zeichenketten sind unveränderlich: Eine Zuweisung an eine Zeichenposition ersetzt das Zeichen nicht. Im strikten Modus, auch in JavaScript-Modulen, löst diese Zuweisung einen TypeError aus. Erstelle eine neue Zeichenkette, wenn Text geändert werden muss.

Das Verändern eines bestehenden Arrays heißt Mutation. Manche Methoden verändern das Array; andere geben ein neues Array zurück. Der Rückgabewert einer Methode kann auch eine Länge oder ein entferntes Element sein, prüfe daher sowohl das Array als auch das Ergebnis des Aufrufs.

Ersetze Elemente und verändere die Enden

const scores = [70, 80, 90];
scores[1] = 85;
console.log(scores); // [70, 85, 90]

const sorgt dafür, dass scores auf dasselbe Array verweist. Der Inhalt des Arrays wird dadurch nicht eingefroren. Die Zuweisung scores = [] würde einen TypeError auslösen, eine Indexzuweisung ist aber erlaubt.

Bei const queue = ["Ana", "Ben"]; gibt queue.push("Cleo") den Wert 3 zurück. Das Array wird zu ["Ana", "Ben", "Cleo"]. Danach gibt queue.pop() „Cleo“ zurück und lässt die ersten beiden Namen übrig. Speicherst du das Ergebnis eines Aufrufs von push, speicherst du die Länge als Zahl und nicht das aktualisierte Array. pop und shift geben bei einem leeren Array undefined zurück. Das Hinzufügen oder Entfernen am Anfang verschiebt auch die anderen Indizes, was bei langen Arrays mehr Arbeit bedeuten kann.

Füge in der Mitte ein und entferne dort

splice(start, deleteCount, ...items) verändert das Array und gibt ein Array der entfernten Elemente zurück:

const days = ["Mon", "Tue", "Thu", "Fri"];
const removed = days.splice(2, 0, "Wed");
// days: ["Mon", "Tue", "Wed", "Thu", "Fri"]
// removed: []
const nextRemoved = days.splice(1, 2);
// days: ["Mon", "Thu", "Fri"]
// nextRemoved: ["Tue", "Wed"]

Der erste Aufruf beginnt bei Index 2, löscht keine Elemente und fügt dort „Wed“ ein. Der zweite beginnt bei Index 1 und entfernt zwei Elemente. Sein zweites Argument ist eine Anzahl, kein Endindex. Elemente nach einer Einfügung oder Entfernung erhalten neue Indizes.

Kopiere einen Bereich mit slice

slice(start, end) gibt ein neues Array zurück und schließt den Endindex aus. Bei const t = [10, 20, 30, 40, 50]; ergibt t.slice(1, 3) den Wert [20, 30] und lässt t unverändert. t.slice(-2) kopiert die letzten beiden Elemente, [40, 50]. Ohne Argumente kopiert t.slice() das ganze Array. Der zusätzliche Buchstabe in splice kennzeichnet eine andere Operation: Die Methode bearbeitet das Original; slice kopiert einen Bereich.

Halte die Liste frei von versehentlichen Lücken

Schreiben hinter das Ende erzeugt leere Stellen. Nach const a = [1, 2]; a[4] = 5; ist die Länge 5 und die Indizes 2 und 3 sind Lücken. Auch delete a[i] hinterlässt eine Lücke und erhält die Länge. Verwende push zum Anhängen und splice(i, 1), um ein Element zu entfernen und die Lücke zu schließen.

Die Zuweisung einer kleineren length entfernt Elemente vom Ende. a.length = 0 leert das Array. Die entfernten Elemente erscheinen nicht wieder, wenn die Länge später erhöht wird.

Auch sort und reverse verändern Arrays. Zu den kopierenden Methoden gehören slice, concat, map, filter, toSorted, toReversed, toSpliced und with. Wenn eine Methode ein neues Array zurückgibt, speichere oder verwende dieses Ergebnis; das Original enthält weiterhin seinen früheren Inhalt.

Eine Suche kann ein Ja-Nein-Ergebnis oder die Position eines Elements benötigen. Die Textumwandlung hat einen anderen Zweck: Sie ändert die Form der Daten, damit eine Liste gelesen, gespeichert oder verarbeitet werden kann.

Frage, ob oder wo

includes(value) gibt einen booleschen Wert zurück. ["tea", "coffee"].includes("tea") ist true; änderst du die Suche zu „Tea“, ergibt sie false. Beim Textabgleich wird die Groß- und Kleinschreibung beachtet und die Typen sind wichtig: [5].includes("5") ist false.

indexOf(value) gibt den ersten passenden Index zurück oder -1, wenn kein Wert passt. lastIndexOf sucht vom Ende aus. Bei [3, 7, 3, 9] steht die erste 3 an Index 0 und die letzte an Index 2. Die Suche nach 5 gibt -1 zurück.

Schreibe nicht if (arr.indexOf(x)). Index 0 ist falsy, während -1 truthy ist: Diese Prüfung lehnt einen Treffer am Anfang ab und akzeptiert einen fehlenden Wert. Verwende arr.indexOf(x) !== -1 oder includes, wenn die Position nicht benötigt wird.

Bei gewöhnlichen Werten verlangen beide Methoden denselben Typ und Wert, wie bei strikter Gleichheit. Der Umgang mit NaN unterscheidet sich: [1, NaN].includes(NaN) ist true, aber [1, NaN].indexOf(NaN) ist -1. Nach der von includes verwendeten Gleichheitsregel kann NaN mit sich selbst übereinstimmen.

Vergleiche Inhalte gezielt

Zwei getrennt erstellte Arrays sind unterschiedliche Arrays, auch wenn ihre Elemente übereinstimmen. [1, 2] === [1, 2] ist false; auch == vergleicht die Arrayidentität. Um denselben Inhalt in derselben Reihenfolge zu prüfen, vergleiche die Längen und dann die Werte an jedem entsprechenden Index. Eine bloße Ja-Nein-Prüfung auf Zugehörigkeit würde weder dieselbe Reihenfolge noch dieselbe Anzahl von Wiederholungen nachweisen.

Füge Elemente zu einer Zeichenkette zusammen

const dateParts = ["2026", "03", "15"];
console.log(dateParts.join("-")); // "2026-03-15"
console.log([1, 2, 3].join()); // "1,2,3"
console.log([1, 2, 3].join("")); // "123"

join setzt sein Trennzeichen zwischen die Elemente, niemals hinter das letzte. Das Standardtrennzeichen ist ein Komma ohne Leerzeichen. Elemente mit null und undefined tragen leeren Text bei. Wähle das Trennzeichen für eine lesbare Ausgabe ausdrücklich.

Auch + mit einer Zeichenkette wandelt ein Array in Text um, verwendet dabei aber Kommas: "List: " + [1, 2] wird zu „List: 1,2“. Die verschachtelte Struktur geht in diesem Text verloren: String([1, [2, 3]]) ergibt „1,2,3“. Gib das Array selbst in der Konsole aus, um seine Struktur zu untersuchen.

Zerlege Text in Teile

"red,green,blue".split(",") gibt ["red", "green", "blue"] zurück. Das Trennzeichen muss genau passen. Wird „red, green“ nur am Komma getrennt, bleibt das Leerzeichen am Anfang von „ green“ erhalten; die Trennung an „, “ entfernt das Komma und dieses Leerzeichen.

"4,8,15".split(",") gibt Zeichenketten zurück, keine Zahlen. Wandle jeden Teil um, bevor du Zahlenwerte addierst. Andernfalls kann der Operator + Text verketten, statt eine Summe zu bilden.

Bei einfachem Text aus Buchstaben erzeugt "stressed".split("").reverse().join("") den Wert „desserts“. Das Zerlegen erstellt ein neues Array, das Umkehren verändert dieses Array und das Zusammenfügen erstellt wieder eine Zeichenkette. Ein leeres Trennzeichen zerlegt UTF-16-Codeeinheiten; manche Symbole verwenden mehr als eine Einheit, daher ist dies keine allgemeine Methode, um jeden lesbaren Text umzukehren.

Eine Schleife kann Arraypositionen besuchen oder die Werte direkt übernehmen. Wähle die Form, die die vom Rumpf benötigten Informationen bereitstellt. Denke beim Einfügen oder Entfernen von Elementen daran, dass sich die Indizes des Arrays ändern.

Verwende Indizes für Positionen und Richtung

const fruits = ["apple", "pear", "plum"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Die Indizes sind 0, 1, 2. Die Prüfung lautet < fruits.length, weil Index 3 hinter dem Ende liegt. Mit <= würde ein zusätzlicher Schleifendurchlauf undefined lesen. Indexbasierte Schleifen können auch rückwärts laufen, beginnend bei fruits.length - 1 und fortgesetzt, solange i >= 0 gilt, oder mit i += 2 jedes zweite Element besuchen.

Verwende for...of für Werte

for (const fruit of fruits) {
  console.log(fruit.toUpperCase());
}

Dies gibt „APPLE“, „PEAR“ und „PLUM“ aus. fruit enthält pro Schleifendurchlauf einen Wert. const funktioniert, weil jeder Schleifendurchlauf eine neue Bindung erstellt; die Schleife weist nicht einem gemeinsam genutzten Zähler neue Werte zu. for...of funktioniert auch bei Zeichenketten. Eine Schleife über „banana“ kann Vokale zählen, indem sie für jedes ch "aeiou".includes(ch) prüft.

Das Ändern einer lokalen Zahl schreibt nicht in das Array. Nach for (let n of nums) { n = n * 2; } sind die numerischen Elemente von nums unverändert. Um sie zu verändern, weise über nums[i] zu oder erstelle ein neues Array verdoppelter Zahlen.

Ermittle Werte und Indizes zusammen

entries() liefert Paare, die einen Index und einen Wert enthalten. Eckige Klammern im Schleifenkopf entpacken jedes Paar:

for (const [i, fruit] of fruits.entries()) {
  console.log((i + 1) + ". " + fruit);
}

Die Ausgabe lautet „1. apple“, „2. pear“, „3. plum“. Arrayindizes beginnen weiterhin bei null; i + 1 ändert nur die angezeigte Nummerierung.

for...in besucht Eigenschaftsnamen. Bei Arrays sind seine Indizes Zeichenketten und es kann zusätzliche Eigenschaften enthalten. Verwende die obigen Array-Schleifenformen, um Elemente zu verarbeiten.

Vermeide das Überspringen verschobener Elemente

const nums = [2, 4, 5, 6];
for (let i = 0; i < nums.length; i++) {
  if (nums[i] % 2 === 0) nums.splice(i, 1);
}
// nums is [4, 5]

An Index 0 verschiebt das Entfernen von 2 die 4 auf Index 0. Die Aktualisierung setzt i auf 1, sodass 4 übersprungen wird. Die Schleife sieht dann 5 und entfernt 6. Das Ergebnis enthält weiterhin eine gerade Zahl.

Wenn du anhand des Index entfernst, durchlaufe das Array vom Ende aus rückwärts. Das Entfernen eines Elements verschiebt dann nur bereits besuchte Positionen. Du kannst auch ein neues Array mit den zu behaltenden Werten erstellen. Vermeide es, Elemente zu demselben Array hinzuzufügen, während die Abbruchprüfung einer Schleife von seiner Länge abhängt; der Endpunkt kann sich immer weiter verschieben.

Viele Aufgaben mit Arrays nutzen dieselben einfachen Schleifenmuster. Entscheide, welches Ergebnis du brauchst, wähle seinen Anfangswert und aktualisiere es einmal für jedes relevante Element. Eine Ablaufverfolgung zeigt, was das Ergebnis nach jedem Schritt bedeutet.

Bilde eine Summe und zähle Treffer

const temps = [18, 21, 19, 24];
let sum = 0;
let warm = 0;
for (const t of temps) {
  sum += t;
  if (t > 20) warm++;
}

sum addiert jede Temperatur; warm erhöht sich nur bei einer Temperatur über 20 °C um eins. Die Variablen erfassen unterschiedliche Größen. Eine Ablaufverfolgung macht diesen Unterschied sichtbar:

Der Durchschnitt ist sum / temps.length, also 20,5 °C. Prüfe die Länge vor der Division: Ein leeres Array ergibt 0 / 0, also NaN, keinen aussagekräftigen Durchschnitt.

Halte den größten oder kleinsten Wert fest

Initialisiere bei einem nicht leeren Array das Maximum mit seinem ersten Element. Ersetze es dann nur, wenn ein größerer Wert gefunden wird:

const values = [-3, -7, -1, -5];
let max = values[0];
for (const n of values) {
  if (n > max) max = n;
}
// max is -1

Bei einer Liste aus ausschließlich negativen Werten würde ein Start bei null fälschlich null beibehalten. Auch ein Start mit -Infinity funktioniert für ein Maximum, bei einer leeren Eingabe bleibt dann aber dieser Anfangswert stehen. Für ein Minimum kehre den Vergleich um und wähle das erste Element oder Infinity als Anfangswert.

Finde einen ersten Treffer oder prüfe eine ganze Liste

Eine Suche speichert einen Treffer und verlässt die Schleife mit break. Mit let firstWarm; kann die Schleife beim ersten t > 20 den Wert mit firstWarm = t zuweisen und abbrechen. Sie findet 21 und lässt spätere Elemente ungeprüft. Passt nichts, bleibt die Variable undefined.

Für eine „alle“-Prüfung initialisierst du ein Flag mit true und setzt es beim ersten Fehlschlag auf false. Für eine „mindestens eines“-Prüfung beginnst du mit false und setzt es beim ersten Erfolg auf true. Wenn Punktzahlen ab 50 als bestanden gelten, besteht [72, 85, 49] die Alle-bestanden-Prüfung bei 49 nicht. Bei einer leeren Liste bleibt der Anfangswert des Flags unverändert.

Erstelle veränderte Werte und vergleiche Nachbarn

const km = [1.5, 3, 0.25];
const meters = [];
for (const d of km) {
  meters.push(d * 1000);
}
// meters is [1500, 3000, 250]

Das neue Array beginnt leer und erhält pro Schleifendurchlauf eine umgerechnete Entfernung. Setze eine Bedingung vor push, wenn nur bestimmte Werte ins Ergebnis gehören.

Beginne für die Veränderungen von Tag zu Tag bei Index 1, weil es zu Index 0 keinen vorherigen Tag gibt:

const changes = [];
for (let i = 1; i < temps.length; i++) {
  changes.push(temps[i] - temps[i - 1]);
}
// changes is [3, -2, 5]

Es gibt eine Differenz weniger als Messwerte. Eine Subtraktion in umgekehrter Reihenfolge würde jedes Vorzeichen umkehren. Dieselben Ergebnisformen erscheinen bei Arraymethoden: map erstellt umgewandelte Werte, filter behält Treffer, find sucht, some und every prüfen und reduce sammelt Ergebnisse. Eine Schleife bleibt nützlich, wenn ein Durchlauf mehrere Ergebnisse liefern soll, wie bei sum und warm.

Eine Funktion nimmt Eingaben entgegen, führt Code aus und kann ein Ergebnis zurückgeben. Ein Callback ist eine Funktion, die einer anderen Funktion zum Aufrufen übergeben wird. Arraymethoden verwenden Callbacks, um die Arbeit für jedes Element zu beschreiben.

Schreibe eine kurze Pfeilfunktion

n => n * 2 nimmt einen Parameter namens n entgegen und gibt seinen verdoppelten Wert zurück. Der Pfeil trennt die Eingaben vom Rumpf. Bei einem einzelnen Parameter können die Klammern entfallen. Bei keinem oder mehreren Parametern sind sie nötig: () => 0 und (a, b) => a - b.

const double = n => n * 2;
const doubled = [1, 2, 3].map(double);
// doubled is [2, 4, 6]

double benennt die Funktion selbst. Die Methode ruft sie für jede Zahl auf. map(double()) würde sie sofort aufrufen und statt der Funktion das Ergebnis übergeben. Verwende bei einer benannten Prüfung wie function isEven(n) { return n % 2 === 0; } den Aufruf filter(isEven), damit die Methode jedes Element übergibt.

Gib aus einem Blockrumpf einen Wert zurück

Ein Ausdruck nach dem Pfeil wird automatisch zurückgegeben. Geschweifte Klammern erzeugen einen Block, daher braucht ein Ergebnis ein ausdrückliches return:

const double = n => {
  const doubled = n * 2;
  return doubled;
};

Ohne return gibt die Funktion undefined zurück. [1, 2, 3].map(n => { n * 2; }) erzeugt daher [undefined, undefined, undefined]. Die Multiplikation wird ausgeführt, aber ihr Wert wird nie zum Ergebnis des Callbacks.

Lies Callback-Argumente anhand ihrer Position

Methoden wie map, filter und forEach übergeben zuerst das Element, zweitens seinen nullbasierten Index und drittens das gesamte Array. In (name, i) => ... kannst du die Namen frei wählen; ihre Position bestimmt, was sie erhalten. Lass ungenutzte Parameter am Ende weg. Andere Methoden haben andere Signaturen: reduce erhält zusätzlich einen Akkumulator und ein Sortier-Callback erhält zwei zu vergleichende Werte.

Verwende forEach für Aktionen

const letters = ["a", "b"];
const result = letters.forEach((letter, i) => {
  console.log(i + ": " + letter);
});
// Prints "0: a" and "1: b".
// result is undefined.

Die Ausgabe ist ein Seiteneffekt: eine Aktion, die während der Ausführung des Callbacks stattfindet. forEach verwirft die Rückgabewerte des Callbacks und gibt selbst undefined zurück. Verwende map, wenn ein neues Array mit Ergebnissen benötigt wird. Gibt ein forEach-Callback einen Wert zurück, ändert das nichts an dieser Regel.

Ein return in diesem Callback beendet nur den aktuellen Aufruf; die Methode fährt mit dem nächsten Element fort. break kann innerhalb eines Callbacks nicht verwendet werden, um forEach zu verlassen. Wähle for...of mit break oder eine Suchmethode wie find oder some, wenn die weitere Arbeit bei einem Treffer stoppen soll.

Diese Callback-Methoden verändern das ursprüngliche Array nicht selbst. Der Callback kann es dennoch verändern, zum Beispiel durch eine Indexzuweisung oder push. Wenn sich Callbacks auf ihren Rückgabewert oder die beabsichtigte Aktion beschränken, lässt sich leichter nachvollziehen, was das ursprüngliche Array danach enthält.

Wähle eine Arraymethode nach der Form des Ergebnisses. map erzeugt für jedes vorhandene Element einen Wert. filter behält die ursprünglichen Elemente, die eine Prüfung bestehen. Beide geben neue Arrays zurück.

Transformiere mit map

const km = [1.5, 3, 0.25];
const meters = km.map(d => d * 1000);
// meters is [1500, 3000, 250]; km is unchanged.

Der Rückgabewert des Callbacks wird zum Element an der entsprechenden Position. Bei einer lückenlosen Eingabe wird der Callback einmal pro Element aufgerufen und das Ergebnis hat dieselbe Länge. Auch das Umwandeln von Zeichenkettenelementen funktioniert: ["ana", "ben"].map(s => s.toUpperCase()) ergibt ["ANA", "BEN"].

Der zweite Callback-Parameter liefert den Index. ["Ana", "Ben"].map((name, i) => (i + 1) + ". " + name) erstellt ["1. Ana", "2. Ben"]. Hat der Callback einen Blockrumpf, gib den zu speichernden Wert ausdrücklich zurück.

Wähle mit filter aus

const temps = [18, 21, 19, 24];
const warm = temps.filter(t => t > 20);
// warm is [21, 24]

filter behält ein Element, wenn der Callback ein Truthy-Ergebnis zurückgibt. Es behält das Element selbst, nicht den booleschen Wert des Callbacks. Die behaltenen Werte bleiben in ihrer ursprünglichen Reihenfolge. Das Ergebnis kann alle, einige oder keine Elemente enthalten; temps.filter(t => t > 30) ist [].

Gib nicht das Element selbst zurück, wenn null ein gültiger Datenwert ist. [0, 5, 0, 3].filter(n => n) verwirft beide Nullen, weil sie falsy sind. Eine Bedingung wie n !== null entfernt fehlende Messwerte, die durch null dargestellt werden, und behält dabei null. Gib die tatsächliche Regel zum Behalten eines Elements an.

Wenn du map mit einer Bedingung verwendest, die für abgelehnte Elemente undefined zurückgibt, werden diese nicht entfernt. Die undefined-Ergebnisse belegen weiterhin Positionen im neuen Array.

Lies eine Kette von links nach rechts

[12, 7, 30, 4].filter(n => n >= 10).map(n => n / 2) erstellt zuerst [12, 30], dann [6, 15]. Der zweite Callback erhält nur die behaltenen Elemente. Vor dem Transformieren zu filtern ist passend, wenn sich die Prüfung auf die ursprünglichen Werte bezieht. Eine andere Reihenfolge kann ändern, was die Prüfung sieht.

Wandle Zahlentext gezielt um

const numbers = "4,8,15".split(",").map(Number);
// numbers is [4, 8, 15]

Number erhält jeden Textteil und erzeugt eine Zahl. parseInt direkt zu übergeben ist eine Falle: Sein zweites Argument ist eine Zahlenbasis, während map an dieser Stelle den Index übergibt. ["10", "10", "10"].map(parseInt) ergibt [10, NaN, 2]. Verwende map(s => parseInt(s, 10)), um die Zahlenbasis festzulegen, oder map(Number) für diese ganzzahligen Zeichenketten.

Weder map noch filter ersetzt das Original. temps.map(t => t + 1); allein verwirft das neu berechnete Array. Speichere es, gib es aus einer Funktion zurück oder verwende es in einer Kette.

Manche Fragen benötigen einen Wert, andere eine Position oder eine Ja-Nein-Antwort. Suchmethoden können stoppen, sobald diese Antwort bekannt ist. Der passende Rückgabetyp erleichtert es, spätere Bedingungen richtig zu schreiben.

Wähle einen Wert oder einen Index

const temps = [18, 21, 19, 24];
console.log(temps.find(t => t > 20)); // 21
console.log(temps.findIndex(t => t > 20)); // 1
console.log(temps.findLast(t => t > 20)); // 24
console.log(temps.findLastIndex(t => t > 20)); // 3

find sucht vom Anfang aus und gibt das erste passende Element zurück. findIndex gibt dessen Index zurück. Die Varianten mit Last suchen rückwärts. Alle vier stoppen, wenn sie den gesuchten Treffer finden.

temps.find(t => t > 30) gibt undefined zurück; temps.findIndex(t => t > 30) gibt -1 zurück. Prüfe i !== -1, bevor du einen gefundenen Index an splice übergibst. Andernfalls entfernt splice(-1, 1) das letzte Element, obwohl kein Treffer gefunden wurde.

Berücksichtige Falsy-Treffer

[3, 0, 5].find(n => n < 1) gibt 0 zurück, einen erfolgreichen Treffer. if (result) behandelt ihn fälschlich als Fehlschlag, weil null falsy ist. Bei numerischen Daten unterscheidet result !== undefined null von einem fehlenden Treffer. Kann ein Array selbst undefined als passenden Wert enthalten, verwende findIndex und vergleiche das Ergebnis mit -1; der Wert allein kann diese Fälle nicht unterscheiden.

filter ist passend, wenn alle Treffer benötigt werden. [5, 12, 8, 130].filter(n => n > 10) ergibt [12, 130]; find gibt nur 12 zurück. Bei filter(...)[0] wird das gesamte Array der Treffer berechnet, bevor sein erster Wert gelesen wird.

Prüfe auf mindestens eines oder alle

const scores = [72, 85, 49];
const anyFailed = scores.some(s => s < 50); // true
const allPassed = scores.every(s => s >= 50); // false

some stoppt beim ersten Erfolg. every stoppt beim ersten Fehlschlag. Ihre Antworten sind boolesche Werte, keine Elemente. In diesen Aufrufen führt die 49 bei some zum Erfolg und bei every zum Fehlschlag.

Bei einem leeren Array gibt some false zurück, weil nichts die Prüfung besteht. every gibt true zurück, weil nichts durchfällt. Muss eine vollständige Reihe von Ergebnissen mindestens eine Punktzahl enthalten, kombiniere die Prüfungen: scores.length > 0 && scores.every(s => s >= 50). Die Längenbedingung prüft auf eine leere Liste; every prüft die Elemente.

Wähle zwischen exakter Zugehörigkeit und eigener Prüfung

includes("ana") sucht nach genau diesem Wert. Eine Suche ohne Beachtung der Groß- und Kleinschreibung braucht einen Callback: names.some(n => n.toLowerCase() === "ana"). Dies kann sowohl „Ana“ als auch „ANA“ akzeptieren. Verwende includes für einen bekannten Wert und eine Callback-Suche, wenn jedes Element nach einer Regel geprüft werden muss.

reduce trägt einen Akkumulator von einem Element zum nächsten. Sein Callback gibt den Akkumulator für den folgenden Schritt zurück. Nach dem letzten Element gibt die Methode diesen endgültigen Wert zurück.

Verfolge eine Summe

const temps = [18, 21, 19, 24];
const total = temps.reduce((sum, t) => sum + t, 0);
// total is 82

Die 0 ist der anfängliche Akkumulator. Der Callback erhält zuerst sum und zweitens die aktuelle Temperatur t. Die zurückgegebene Summe wird zum ersten Argument des nächsten Aufrufs.

Dies ist dieselbe laufende Summe wie bei einer Schleife mit let sum = 0. Ein Callback erhält nach Akkumulator und Element optional auch Index und Array als Argumente. Die Parameternamen sind frei wählbar, ihre Reihenfolge ist jedoch festgelegt.

Gib einen geeigneten Anfangswert an

Mit einem Anfangswert beginnt die Reduktion beim ersten Element. Ohne Anfangswert wird das erste vorhandene Element zum Akkumulator und die Callback-Aufrufe beginnen beim nächsten vorhandenen Element. Bei einem leeren Array löst das Weglassen des Anfangswerts einen TypeError aus. [].reduce((sum, n) => sum + n, 0) gibt zuverlässig 0 zurück, weil kein Callback-Aufruf nötig ist.

Der Anfangswert legt auch die Art des Ergebnisses fest. Verwende 0 für Summen oder Anzahlen und "" für Text. ["a", "b", "c"].reduce((text, s) => text + s.toUpperCase(), "") erstellt „ABC“. Beginnt eine numerische Summe mit einer Zeichenkette, kann + versehentlich Text verketten.

Zähle und finde einen Extremwert

const scores = [72, 85, 49];
const passed = scores.reduce(
  (count, s) => s >= 50 ? count + 1 : count,
  0
);
// passed is 2

Bei Bestehen wird eins addiert; bei Nichtbestehen wird die unveränderte Anzahl zurückgegeben. Jeder Ausführungszweig liefert einen nächsten Akkumulator. Gib für ein Maximum den größeren Wert zurück: [-3, -7, -1, -5].reduce((max, n) => n > max ? n : max, -Infinity) ergibt -1. Ein Start bei null wäre für diese Liste ausschließlich negativer Werte falsch. Bei leerer Eingabe bleibt -Infinity stehen; behandle dieses Ergebnis, wenn ein tatsächliches Maximum benötigt wird.

Gib auf jedem Pfad einen Wert zurück

Ein Block-Callback braucht return. (sum, n) => { sum + n; } gibt undefined zurück, sodass das endgültige Ergebnis der Reduktion undefined ist. Ein teilweise fehlendes return ist ebenfalls gefährlich. Wird beim Zählen über [72, 49, 85] nur bei Bestehen ein Wert zurückgegeben, ergibt sich zuerst 1, dann undefined bei 49 und schließlich NaN, wenn bei 85 eins addiert wird. Gib den unveränderten Akkumulator zurück, wenn ein Element nichts beiträgt.

Kombiniere Operationen, ohne die Aufgabe zu verschleiern

Die Summe der bestandenen Punktzahlen ist scores.filter(s => s >= 50).reduce((sum, s) => sum + s, 0), was 157 ergibt. Für einen Durchschnitt brauchst du eine separate Anzahl: temps.reduce((sum, t) => sum + t, 0) / temps.length ergibt 20,5 °C. Prüfe zuerst die Länge, weil eine leere Eingabe nach der Division NaN ergibt. Wenn ein Callback mehrere Aufgaben ohne Bezug zueinander übernimmt, kann eine for...of-Schleife die veränderlichen Ergebnisse deutlicher zeigen.

Beim Sortieren wird durch den Vergleich von Elementen eine Reihenfolge gewählt. Das Umkehren dreht lediglich die vorhandene Reihenfolge um. Für beide Operationen gibt es Methoden, die ein Array bearbeiten, und Methoden, die eine Kopie erstellen.

Verstehe die Standardreihenfolge

[10, 9, 1, 100].sort() ergibt [1, 10, 100, 9]. Ohne Vergleichsfunktion vergleicht sort die Elemente als Zeichenketten, Zeichen für Zeichen anhand von UTF-16-Codeeinheiten. „100“ beginnt mit „1“, das vor „9“ steht. Die gespeicherten Elemente bleiben Zahlen; nur für den Vergleich wird ihre Textform verwendet.

Auch bei Zeichenketten kann diese Standardeinstellung Leser überraschen. ["banana", "Cherry", "apple"].sort() ergibt ["Cherry", "apple", "banana"], weil ASCII-Großbuchstaben vor Kleinbuchstaben stehen. Buchstaben mit Akzent können von den Buchstaben getrennt werden, denen Leser sie zuordnen. Verwende für eine für Menschen übliche alphabetische Reihenfolge einen sprachgerechten Vergleich.

Gib das richtige Vorzeichen zurück

Eine Vergleichsfunktion erhält zwei Elemente, a und b. Ein negativer Rückgabewert setzt a vor b; ein positiver setzt es nach b; null behandelt beide beim Sortieren als gleich.

const nums = [10, 9, 1, 100];
nums.sort((a, b) => a - b);
// nums is [1, 9, 10, 100]

Der Vergleich von 10 mit 9 ergibt die positive Zahl 1, also steht 9 vor 10. Verwende für eine absteigende numerische Reihenfolge (a, b) => b - a. Gib eine Zahl mit aussagekräftigem Vorzeichen zurück. (a, b) => a > b gibt nur true oder false zurück, die zu 1 oder 0 werden; die Funktion meldet nie, dass a vor b gehört. Eine solche Vergleichsfunktion liefert eine unzuverlässige Reihenfolge.

Die Sortierung ist stabil: Elemente, die beim Vergleich als gleich gelten, behalten ihre ursprüngliche relative Reihenfolge. ["kiwi", "fig", "pear", "plum"].sort((a, b) => a.length - b.length) ergibt ["fig", "kiwi", "pear", "plum"]. Die drei Wörter mit vier Buchstaben behalten ihre Reihenfolge.

Wähle zwischen Mutation und Kopie

const sorted = scores.sort((a, b) => a - b); gibt demselben nun sortierten Array einen zweiten Namen. Die frühere Reihenfolge bleibt nicht erhalten. Verwende für ein neues sortiertes Array scores.toSorted((a, b) => a - b) oder erstelle vor sort eine Spread-Kopie.

[3, 1, 2].toReversed() ergibt [2, 1, 3]. Das ist eine umgekehrte Folge, keine absteigende numerische Reihenfolge. Um die größten Werte zuerst zu setzen, verwende eine absteigende Vergleichsfunktion oder sortiere vor dem Umkehren aufsteigend.

Prüfe Typen vor dem Sortieren von Zahlentext

Werte aus split sind Zeichenketten. ["10", "9", "100"].sort() ergibt ["10", "100", "9"]. Eine Subtraktion in einer Vergleichsfunktion wandelt numerische Zeichenketten beim Vergleich um, lässt die Elemente aber als Zeichenketten bestehen. Wandle zuerst mit map(Number) um, wenn die Werte numerische Daten sind, und verwende dann eine numerische Vergleichsfunktion. Das bereitet die Daten auch auf spätere Additionen vor, ohne versehentlich Text zu verketten.

Menschen erwarten, dass Textreihenfolge und Zahlenformatierung den Konventionen einer Sprache folgen. Halte Werte in leicht verarbeitbaren Formen, wähle für den Textvergleich ein ausdrückliches Gebietsschema und formatiere die endgültige Ausgabe für die Leser.

Vergleiche Text nach den Regeln eines Gebietsschemas

a.localeCompare(b, locale) gibt eine negative Zahl zurück, wenn a vor b steht, eine positive Zahl, wenn es danach steht, und null, wenn beide beim Vergleich gleich sind. Garantiert ist nur das Vorzeichen, nicht genau -1 oder 1.

const names = ["Zoe", "Émile", "adam"];
const sorted = names.toSorted((a, b) => a.localeCompare(b, "en"));
// sorted is ["adam", "Émile", "Zoe"]

Ein Gebietsschema wird durch ein Sprachkürzel wie „en“, „de“ oder „sv“ angegeben. Im Deutschen steht „ä“ vor „z“, im Schwedischen dagegen nach „z“. Übergib die vorgesehene Sprache der Seite, um diese Wahl ausdrücklich zu treffen. Ohne Gebietsschema entscheiden die Standardeinstellungen der Laufzeitumgebung über die Reihenfolge.

Einfache <-Vergleiche vergleichen weiterhin Zeichencodes. Das Subtrahieren von Wörtern erzeugt NaN, was beim Sortieren wie ein Vergleich auf Gleichheit wirkt; es erzeugt keine alphabetische Reihenfolge.

Setze geeignete Vergleichsoptionen

Mit { numeric: true } werden Ziffernfolgen numerisch verglichen. Die Sortierung von ["file10", "file2", "file1"] mit (a, b) => a.localeCompare(b, "en", { numeric: true }) ergibt ["file1", "file2", "file10"]. Eine einfache Textsortierung setzt „file10“ vor „file2“.

Im Englischen behandelt { sensitivity: "base" } Varianten hinsichtlich Groß- und Kleinschreibung und Akzenten wie „a“, „A“ und „á“ als gleich. Diese Regeln hängen von der Sprache ab: Im Schwedischen gelten „a“ und „ä“ als unterschiedliche Grundbuchstaben. Verwende sowohl beim Abgleich als auch beim Sortieren das vorgesehene Gebietsschema.

Verwende für viele Vergleiche einen Collator wieder:

const collator = new Intl.Collator("en", { numeric: true });
const sorted = files.toSorted(collator.compare);

collator.compare ist bereits eine Vergleichsfunktion. Ihn einmal zu erstellen vermeidet, dieselben Optionen für das Gebietsschema bei einer großen Sortierung wiederholt einzurichten.

Sortiere Datumsangaben vor dem Formatieren

Zeichenketten im Format YYYY-MM-DD mit festen Stellenzahlen setzen das Jahr vor den Monat und den Tag. Die Textsortierung folgt dann der Datumsreihenfolge: ["2026-03-15", "2025-11-02", "2026-01-20"].sort() ergibt ["2025-11-02", "2026-01-20", "2026-03-15"].

Bei Text mit dem Tag an erster Stelle wie „15/03/2026“ und „20/01/2025“ wird zuerst der Tag verglichen, sodass das spätere Jahr zuerst stehen kann. Speichere und sortiere diese Datumsangaben im ISO-Format und erstelle den Anzeigetext erst am Ende.

Erstelle lesbare Listen und Zahlen

join(", ") verwendet überall dasselbe Trennzeichen. Intl.ListFormat fügt das abschließende Verbindungswort der Sprache hinzu:

const list = new Intl.ListFormat("en-US", {
  style: "long", type: "conjunction"
});
list.format(["Ana", "Ben", "Cleo"]);
// "Ana, Ben, and Cleo"

„en-GB“ erzeugt „Ana, Ben and Cleo“; „nl“ erzeugt „Ana, Ben en Cleo“. Eine Disjunktion verwendet im Englischen „or“. Zwei Namen ergeben „Ana and Ben“ ohne Komma.

(1234.5).toLocaleString("en-US") ergibt „1,234.5“, während „de-DE“ „1.234,5“ ergibt. Diese Ergebnisse sind Zeichenketten. Sortiere numerische Daten, bevor du toLocaleString mit map anwendest; eine vorherige Formatierung ersetzt Zahlenwerte durch Text, dessen Satzzeichen die Textsortierung beeinflussen.

Eine Arrayvariable enthält eine Referenz auf ein Array. Weist du diese Variable einem anderen Namen zu, wird das Array gemeinsam genutzt. Die Spread-Syntax kann ein neues äußeres Array erstellen, Listen kombinieren oder Elemente als separate Funktionsargumente übergeben.

Unterscheide Zuweisung und Kopieren

const a = [1, 2, 3];
const b = a;
b.push(4);
// a and b both refer to [1, 2, 3, 4].
console.log(a === b); // true

Es gibt ein Array mit zwei Namen. const verhindert nicht, dass einer der Namen verwendet wird, um es zu verändern. Für ein neues äußeres Array ist eine tatsächliche Kopieroperation nötig:

const c = [...a];
c.push(5);
// c is [1, 2, 3, 4, 5]; a stays [1, 2, 3, 4].
console.log(c === a); // false

Die drei Punkte breiten die Elemente von a innerhalb eines neuen Arrayliterals aus. Ohne sie entsteht ein anderes Ergebnis: [a] erstellt ein Array mit einem Element, dem gesamten Array a. [...a] enthält die Elemente von a einzeln.

Kombiniere und füge ein

[...[1, 2], ...[3, 4]] ergibt [1, 2, 3, 4], ebenso wie [1, 2].concat([3, 4]). [...first, 99, ...second] setzt ein zusätzliches Element zwischen zwei Listen. [...list, "new"] erstellt ein erweitertes Array, während list.push("new") das bestehende bearbeitet. Spread erhält die Reihenfolge der Elemente jeder Eingabe.

Erkenne eine flache Kopie

const grid = [[1, 2], [3, 4]];
const copy = [...grid];
copy[0].push(9);
// grid[0] and copy[0] are both [1, 2, 9].

Die äußeren Arrays sind verschieden, aber ihre Zeilenelemente verweisen weiterhin auf dieselben inneren Arrays. Das ist eine flache Kopie. Würdest du copy[0] durch eine neue Zeile ersetzen, würde sich nur das kopierte äußere Array ändern; veränderst du die bestehende Zeile, änderst du die gemeinsam genutzte Zeile. structuredClone(grid) erstellt eine unabhängige tiefe Kopie dieser verschachtelten Arrays.

Breite Werte in einem Aufruf aus

Math.max(...[3, 9, 4]) übergibt drei separate Argumente und gibt 9 zurück. Die direkte Übergabe des Arrays, Math.max([3, 9, 4]), übergibt ein Array und ergibt NaN. Leeres Spread ergibt Math.max(...[]) === -Infinity und Math.min(...[]) === Infinity.

Sehr große Arrays können die Argumentgrenze einer Engine überschreiten, wenn sie in einem Aufruf ausgebreitet werden. Es gibt keine allgemein sichere Elementanzahl. Verwende bei einer großen Eingabe eine Schleife oder reduce, um einen Extremwert zu finden. Spread in einem Arrayliteral erstellt keine Liste von Funktionsargumenten.

Breite Zeichenketten aus und aktualisiere Kopien

[..."hello"] erzeugt fünf Zeichenketten mit je einem Buchstaben. Spread durchläuft bei Zeichenketten Unicode-Codepunkte: [..."a😀"] hat zwei Elemente, während "a😀".split("") drei UTF-16-Codeeinheiten hat. Manche sichtbaren Symbole kombinieren mehrere Codepunkte, daher zählt Spread sichtbare Zeichen nicht allgemein zuverlässig. Eine Zahl ist nicht iterierbar; [...5] löst einen TypeError aus.

In einer Parameterliste verwendet function total(...nums) Rest, um Argumente in einem Array zu sammeln. Spread in einem Aufruf tut das Gegenteil: Es übergibt separate Argumente.

Für Aktualisierungen mittels Kopien ergibt [10, 20, 30].with(1, 25) den Wert [10, 25, 30] und .toSpliced(1, 1) den Wert [10, 30]. Auch toSorted und toReversed erhalten das Original. Dies sind flache Kopien, daher gilt dieselbe Regel zur gemeinsamen Nutzung innerer Arrays.