Comment obtenir la dernière valeur correspondante d'un tableau en JavaScript

Vous devez trouver le dernier élément d’un tableau qui correspond à une condition. Il peut s’agir du journal d’erreur le plus récent, de la dernière saisie de formulaire valide ou du dernier utilisateur actif. Avant ES2023, cela nécessitait des solutions de contournement maladroites : inverser les tableaux, tout filtrer ou écrire des boucles manuelles. Il existe désormais une méthode plus élégante.

La solution moderne : Array.prototype.findLast()

Array.prototype.findLast() parcourt un tableau en sens inverse et renvoie le premier élément qui satisfait votre prédicat. C’est le miroir de find(), qui effectue une recherche depuis le début.

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' }

Si aucun élément ne correspond, findLast() renvoie undefined. Cela permet de l’utiliser en toute sécurité avec le chaînage optionnel :

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

findLast vs findLastIndex : quand vous avez besoin de la position

Parfois, vous avez besoin de l’index, pas de la valeur. C’est ce que fournit findLastIndex(). Elle renvoie l’index du dernier élément correspondant, ou -1 si rien ne correspond.

const numbers = [1, 5, 3, 8, 2, 9, 4]
const lastLargeIndex = numbers.findLastIndex(n => n > 7)
// 5 (l'index de 9)

Utilisez findLastIndex() lorsque vous devez effectuer un splice, découper à partir de cette position ou référencer des éléments voisins.

Compatibilité des navigateurs et solutions de secours

findLast() et findLastIndex() font partie d’ES2023 et bénéficient d’une large prise en charge dans les navigateurs modernes et les versions récentes de Node.js. Cependant, les environnements plus anciens peuvent ne pas les inclure.

Si TypeScript se plaint de ces méthodes, votre tsconfig.json a probablement besoin de "lib": ["ES2023"] ou plus récent dans les options du compilateur.

Pour les environnements sans prise en charge native, voici une solution de secours élégante qui ne modifie pas le tableau d’origine :

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

Cette boucle inverse est efficace : elle s’arrête à la première correspondance et évite de créer des tableaux intermédiaires.

Pièges courants à éviter

N’inversez pas le tableau pour utiliser find() :

// ❌ Modifie le tableau d'origine !
const last = arr.reverse().find(x => x > 5)

// ✅ Utilisez findLast à la place
const last = arr.findLast(x => x > 5)

L’appel de reverse() modifie votre tableau sur place. Cela crée des bugs subtils qui sont difficiles à déboguer.

Ne confondez pas les valeurs de retour :

• findLast() renvoie l’élément ou undefined
• findLastIndex() renvoie l’index ou -1

La vérification de la véracité fonctionne pour findLast(), mais avec findLastIndex() vous devez explicitement vérifier -1 :

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

Attention aux correspondances fausses (falsy) :

Si votre tableau contient 0, false ou des chaînes vides, assurez-vous que votre prédicat les gère correctement :

const values = [1, 2, 0, false, 'last']
values.findLast(x => x)        // 'last' (ignore les valeurs falsy)
values.findLast(() => true)    // 'last' (obtient le véritable dernier élément)

Quand choisir chaque approche

Conclusion

Pour obtenir la dernière valeur correspondante d’un tableau en JavaScript, privilégiez d’abord findLast(). Elle est lisible, ne modifie pas vos données et s’arrête dès qu’elle trouve une correspondance. Lorsque vous avez besoin de la position plutôt que de la valeur, utilisez findLastIndex(). Pour les environnements plus anciens, une simple boucle inverse fournit une solution de secours fiable sans les risques de mutation de reverse(). Gardez vos prédicats explicites et retenez les différentes valeurs de retour—undefined versus -1—pour éviter les échecs silencieux.

FAQ

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.