Array.prototype.toReversed() — Methode · JavaScript-Referenz

Signatur

Array.prototype.toReversed()

Beschreibung

toReversed() erzeugt eine flache Kopie des Arrays, in der das erste Element zum letzten wird und umgekehrt. Anders als Array.prototype.reverse() bleibt das Ausgangsarray unverändert. Damit passt die Methode gut zu unveränderlichen Datenmustern, wie man sie etwa bei React-State, Redux-Reducern oder in funktionaler Programmierung verwendet.

Früher musste man dafür [...arr].reverse() oder arr.slice().reverse() schreiben. toReversed() zeigt die Absicht klarer und gehört zur Familie der mit ES2023 eingeführten „Change Array by Copy“-Methoden: toSorted(), toSpliced() und with().

Bei dünn besetzten Arrays (Arrays mit Lücken) werden die leeren Stellen im Ergebnis zu undefined. Das Ergebnis ist also immer ein dicht besetztes Array. Die Methode ist generisch: Sie funktioniert auch mit Array-ähnlichen Objekten, die eine length-Eigenschaft und Index-Schlüssel haben. Dazu ruft man sie über Array.prototype.toReversed.call() auf.

Rückgabewert

Typ

Array

Beschreibung

Ein neues Array mit denselben Elementen in umgekehrter Reihenfolge. Das Original bleibt unverändert.

Beispiele

Grundlegende Nutzung ohne Veränderung des Originals

const zahlen = [1, 2, 3, 4, 5];
const umgekehrt = zahlen.toReversed();

console.log(umgekehrt);
console.log(zahlen); // Original bleibt erhalten

[5, 4, 3, 2, 1] [1, 2, 3, 4, 5]

Unveränderlicher State – z. B. neueste Einträge zuerst anzeigen

const state = {
  nachrichten: [
    { id: 1, text: 'Hallo' },
    { id: 2, text: 'Wie geht es?' },
    { id: 3, text: 'Bis später' }
  ]
};

// Für die Anzeige umdrehen, ohne den State zu verändern
const anzeige = state.nachrichten.toReversed().map((n) => n.text);

console.log(anzeige);
console.log(state.nachrichten[0].text);

['Bis später', 'Wie geht es?', 'Hallo'] Hallo

Dünn besetzte Arrays und Array-ähnliche Objekte

// Lücken werden zu undefined
console.log([1, , 3].toReversed());

// Generischer Aufruf auf einem Array-ähnlichen Objekt
const arrayAehnlich = { length: 3, 0: 'a', 1: 'b', 2: 'c' };
console.log(Array.prototype.toReversed.call(arrayAehnlich));

[3, undefined, 1] ['c', 'b', 'a']

Flache Kopie: Objekte werden geteilt

const benutzer = [{ name: 'Anna' }, { name: 'Ben' }];
const rueckwaerts = benutzer.toReversed();

rueckwaerts[0].name = 'Bernd';

// Dasselbe Objekt wird von beiden Arrays referenziert
console.log(benutzer[1].name);
console.log(rueckwaerts === benutzer);

Bernd false

// Wichtig · Fallstricke

Nur eine flache Kopie: Objekte im Array werden nicht geklont. Änderungen an verschachtelten Objekten wirken sich auf beide Arrays aus. Für tiefe Kopien eignet sich structuredClone().
Browser-Kompatibilität: Verfügbar ab ES2023 (Chrome/Edge 110, Firefox 115, Safari 16, Node.js 20). Ältere Umgebungen brauchen ein Polyfill (z. B. core-js) oder den Ersatz [...arr].reverse().
Lücken: Anders als reverse() behält toReversed() keine Lücken bei, sondern füllt sie mit undefined.
Performance: Bei jedem Aufruf wird ein neues Array mit O(n) Speicherbedarf angelegt. Bei sehr großen Arrays in engen Schleifen kann das in-place arbeitende reverse() effizienter sein.
TypedArrays: Es gibt eine eigene Variante TypedArray.prototype.toReversed(). Sie gibt ein TypedArray desselben Typs zurück.
Die Methode steht in Array.prototype[Symbol.unscopables] und ist deshalb innerhalb von with-Blöcken nicht als Variable sichtbar.

Siehe auch

Array.prototype.reverse() Array.prototype.toSorted() Array.prototype.toSpliced() Array.prototype.with() TypedArray.prototype.toReversed() Array