Comment vérifier si un élément est présent dans un tableau JS : guide de performance

Comment vérifier si un élément est présent dans un tableau JavaScript ? De « ça marche » à « ça vole »

Avez-vous déjà écrit du code et soudainement figé, en regardant un tableau de données ? « Est-ce que ce que je cherche est ici ? » — cette question tourmente chaque développeur. Sur Stack Overflow, le sujet How do I check if an array includes a value in JavaScript a rassemblé des millions de vues. Et ce n’est pas pour rien. Une tâche apparemment triviale, mais dont la solution affecte non seulement la lisibilité du code, mais aussi la vitesse de toute l’application.

Aujourd’hui, nous allons analyser toutes les façons de vérifier la présence d’un élément dans un tableau JavaScript. Nous ne nous contenterons pas de montrer les méthodes — nous mènerons une véritable enquête de performance. Vous découvrirez quand utiliser includes(), pourquoi indexOf() est parfois plus rapide, et comment Set peut accélérer votre code des dizaines de fois. C’est parti !

Le classique : Array.prototype.includes()

La méthode la plus moderne et lisible est includes(). Elle est apparue avec ES2016 et est rapidement devenue le standard de facto. Pourquoi ? Parce que son nom parle de lui-même.

const fruits = ['apple', 'banana', 'mango', 'orange'];\nconst hasBanana = fruits.includes('banana');\nconsole.log(hasBanana); // true\n\nconst hasGrape = fruits.includes('grape');\nconsole.log(hasGrape); // false\n

Tout est simple et élégant. includes() utilise une comparaison stricte (===), soyez donc attentifs aux types de données :

const numbers = [1, 2, 3];\nconsole.log(numbers.includes('1')); // false — la chaîne n’est pas égale au nombre\n

Avantages :

\n
• Lisibilité 10/10 — le code est compréhensible même pour un débutant
\n
• Fonctionne avec NaN (contrairement à indexOf)
\n
• Supporté par tous les navigateurs modernes
\n

Inconvénients :

\n
• Complexité linéaire O(n) — parcourt tout le tableau
\n
• Ne convient pas si vous devez trouver l’index de l’élément
\n

Le vétéran : Array.prototype.indexOf()

Avant l’arrivée de includes(), tout le monde utilisait indexOf(). Cette méthode retourne l’index du premier élément trouvé ou -1 si l’élément est absent.

const fruits = ['apple', 'banana', 'mango'];\nconst index = fruits.indexOf('banana');\nif (index !== -1) {\n  console.log('Élément trouvé à la position', index);\n} else {\n  console.log('Élément non trouvé');\n}\n

Beaucoup sont habitués à cette vérification, et elle fonctionne toujours. Mais il y a une nuance importante : indexOf() ne peut pas trouver NaN.

const arr = [NaN];\nconsole.log(arr.indexOf(NaN)); // -1 — ne trouve pas !\nconsole.log(arr.includes(NaN)); // true — trouve\n

Cela est dû au fait que NaN !== NaN en JavaScript, et indexOf utilise une comparaison stricte. includes() utilise quant à elle l’algorithme SameValueZero, qui gère correctement NaN.

Quand utiliser indexOf ?

\n
• Si vous avez besoin de l’index de l’élément, et non seulement de sa présence
\n
• Si vous êtes sûr qu’il n’y a pas de NaN dans le tableau
\n
• Dans du code legacy où ES2016+ ne peut pas être utilisé
\n

Le combattant flexible : Array.prototype.find() et findIndex()

Lorsque vous devez vérifier non seulement la présence, mais aussi la satisfaction d’une condition, find() vient à la rescousse. Il prend une fonction de rappel et retourne le premier élément qui satisfait la condition, ou undefined.

const users = [\n  { id: 1, name: 'Alice', age: 25 },\n  { id: 2, name: 'Bob', age: 30 },\n  { id: 3, name: 'Charlie', age: 35 }\n];\n\nconst user = users.find(u => u.age > 28);\nconsole.log(user); // { id: 2, name: 'Bob', age: 30 }\n\n// Vérification d’existence\nconst exists = users.find(u => u.id === 4) !== undefined;\nconsole.log(exists); // false