So prüfen Sie, ob ein Element in einem JS-Array vorhanden ist: Geschwindigkeitsleitfaden

So prüfen Sie, ob ein Element in einem JavaScript-Array vorhanden ist? Von «funktioniert einfach» bis «fliegt»

Haben Sie jemals Code geschrieben und plötzlich innegehalten, während Sie auf ein Datenarray starrten? «Ist das, was ich brauche, hier drin?» — diese Frage quält jeden Entwickler. Auf Stack Overflow hat das Thema How do I check if an array includes a value in JavaScript Millionen von Aufrufen gesammelt. Und das zu Recht. Scheinbar eine triviale Aufgabe, aber von ihrer Lösung hängt nicht nur die Lesbarkeit des Codes ab, sondern auch die Geschwindigkeit der gesamten Anwendung.

Heute werden wir alle Methoden zur Überprüfung des Vorhandenseins eines Elements in einem JavaScript-Array durchgehen. Wir zeigen nicht nur die Methoden — wir führen eine echte Leistungsuntersuchung durch. Sie erfahren, wann Sie includes() verwenden sollten, warum indexOf() manchmal schneller ist und wie Set Ihren Code um ein Vielfaches beschleunigen kann. Los geht's!

Klassiker: Array.prototype.includes()

Die modernste und lesbarste Methode ist includes(). Sie wurde in ES2016 eingeführt und schnell zum De-facto-Standard. Warum? Weil ihr Name für sich spricht.

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

Einfach und elegant. includes() verwendet einen strikten Vergleich (===), seien Sie also vorsichtig mit Datentypen:

const numbers = [1, 2, 3];\nconsole.log(numbers.includes('1')); // false — String ist nicht gleich Zahl\n

Vorteile:

\n
• Lesbarkeit 10/10 — der Code ist selbst für Anfänger verständlich
\n
• Funktioniert mit NaN (im Gegensatz zu indexOf)
\n
• Wird von allen modernen Browsern unterstützt
\n

Nachteile:

\n
• Lineare Komplexität O(n) — durchläuft das gesamte Array
\n
• Nicht geeignet, wenn der Index des Elements benötigt wird
\n

Der Veteran: Array.prototype.indexOf()

Vor dem Erscheinen von includes() verwendeten alle indexOf(). Diese Methode gibt den Index des ersten gefundenen Elements oder -1 zurück, wenn das Element nicht vorhanden ist.

const fruits = ['apple', 'banana', 'mango'];\nconst index = fruits.indexOf('banana');\nif (index !== -1) {\n  console.log('Element an Position', index, 'gefunden');\n} else {\n  console.log('Element nicht gefunden');\n}\n

Viele sind an diese Überprüfung gewöhnt, und sie funktioniert immer noch. Aber es gibt eine wichtige Nuance: indexOf() kann NaN nicht finden.

const arr = [NaN];\nconsole.log(arr.indexOf(NaN)); // -1 — findet es nicht!\nconsole.log(arr.includes(NaN)); // true — findet es\n

Dies liegt daran, dass NaN !== NaN in JavaScript und indexOf einen strikten Vergleich verwendet. includes() hingegen verwendet den Algorithmus SameValueZero, der NaN korrekt behandelt.

Wann sollte man indexOf verwenden?

\n
• Wenn Sie den Index des Elements benötigen, nicht nur die Tatsache seines Vorhandenseins
\n
• Wenn Sie sicher sind, dass das Array kein NaN enthält
\n
• In Legacy-Code, wo ES2016+ nicht verwendet werden kann
\n

Der flexible Kämpfer: Array.prototype.find() und findIndex()

Wenn Sie nicht nur das Vorhandensein, sondern die Erfüllung einer Bedingung prüfen müssen, kommt find() zur Hilfe. Es akzeptiert eine Callback-Funktion und gibt das erste Element zurück, das die Bedingung erfüllt, oder 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// Prüfung auf Existenz\nconst exists = users.find(u => u.id === 4) !== undefined;\nconsole.log(exists); // fals