So erhalten Sie den letzten übereinstimmenden Array-Wert in JavaScript

Sie müssen das letzte Element in einem Array finden, das eine Bedingung erfüllt. Vielleicht ist es der neueste Fehlerlog-Eintrag, die letzte gültige Formulareingabe oder der letzte aktive Benutzer. Vor ES2023 bedeutete dies umständliche Workarounds – Arrays umkehren, alles filtern oder manuelle Schleifen schreiben. Jetzt gibt es einen saubereren Weg.

Die moderne Lösung: Array.prototype.findLast()

Array.prototype.findLast() iteriert rückwärts durch ein Array und gibt das erste Element zurück, das Ihr Prädikat erfüllt. Es ist das Gegenstück zu find(), das vom Anfang aus sucht.

const logs = [
  { type: 'info', message: 'Started' },
  { type: 'error', message: 'Connection failed' },
  { type: 'info', message: 'Retrying' },
  { type: 'error', message: 'Timeout' }
]

const lastError = logs.findLast(log => log.type === 'error')
// { type: 'error', message: 'Timeout' }

Wenn kein Element übereinstimmt, gibt findLast() undefined zurück. Dies macht es sicher in Verbindung mit Optional Chaining:

const lastError = logs.findLast(log => log.type === 'critical')?.message ?? 'No critical errors'

findLast vs. findLastIndex: Wenn Sie die Position benötigen

Manchmal benötigen Sie den Index, nicht den Wert. Dafür gibt es findLastIndex(). Es gibt den Index des letzten übereinstimmenden Elements zurück oder -1, wenn nichts übereinstimmt.

const numbers = [1, 5, 3, 8, 2, 9, 4]
const lastLargeIndex = numbers.findLastIndex(n => n > 7)
// 5 (der Index von 9)

Verwenden Sie findLastIndex(), wenn Sie an dieser Position splicing oder slicing durchführen oder auf benachbarte Elemente zugreifen müssen.

Browser-Kompatibilität und Fallbacks

Sowohl findLast() als auch findLastIndex() sind Teil von ES2023 und werden in modernen Browsern und aktuellen Node.js-Versionen weitgehend unterstützt. Ältere Umgebungen enthalten sie jedoch möglicherweise nicht.

Wenn TypeScript sich über diese Methoden beschwert, benötigt Ihre tsconfig.json wahrscheinlich "lib": ["ES2023"] oder neuer in den Compiler-Optionen.

Für Umgebungen ohne native Unterstützung gibt es hier ein sauberes Fallback, das das ursprüngliche Array nicht verändert:

function findLast(arr, predicate) {
  for (let i = arr.length - 1; i >= 0; i--) {
    if (predicate(arr[i], i, arr)) {
      return arr[i]
    }
  }
  return undefined
}

Diese Rückwärtsschleife ist effizient – sie stoppt bei der ersten Übereinstimmung und vermeidet die Erstellung von Zwischen-Arrays.

Häufige Fallstricke, die Sie vermeiden sollten

Kehren Sie das Array nicht um, um find() zu verwenden:

// ❌ Verändert das ursprüngliche Array!
const last = arr.reverse().find(x => x > 5)

// ✅ Verwenden Sie stattdessen findLast
const last = arr.findLast(x => x > 5)

Der Aufruf von reverse() modifiziert Ihr Array direkt. Dies führt zu subtilen Fehlern, die schwer zu debuggen sind.

Verwechseln Sie nicht die Rückgabewerte:

• findLast() gibt das Element oder undefined zurück
• findLastIndex() gibt den Index oder -1 zurück

Die Prüfung auf Wahrhaftigkeit funktioniert bei findLast(), aber bei findLastIndex() müssen Sie explizit auf -1 prüfen:

const index = arr.findLastIndex(x => x > 100)
if (index !== -1) {
  // Gefunden
}

Achten Sie auf falsy-Übereinstimmungen:

Wenn Ihr Array 0, false oder leere Strings enthält, stellen Sie sicher, dass Ihr Prädikat diese korrekt behandelt:

const values = [1, 2, 0, false, 'last']
values.findLast(x => x)        // 'last' (überspringt falsy-Werte)
values.findLast(() => true)    // 'last' (erhält tatsächlich letztes Element)

Wann welchen Ansatz wählen

Fazit

Um den letzten übereinstimmenden Array-Wert in JavaScript zu erhalten, greifen Sie zuerst zu findLast(). Es ist lesbar, verändert Ihre Daten nicht und stoppt, sobald es eine Übereinstimmung findet. Wenn Sie die Position statt des Werts benötigen, verwenden Sie findLastIndex(). Für ältere Umgebungen bietet eine einfache Rückwärtsschleife ein zuverlässiges Fallback ohne die Mutationsrisiken von reverse(). Halten Sie Ihre Prädikate explizit und beachten Sie die unterschiedlichen Rückgabewerte – undefined versus -1 –, um stille Fehler zu vermeiden.

Häufig gestellte Fragen

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.