JavaScript-Array-Suchmethoden erklärt: indexOf, includes, find und inArray – Leitfaden

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Einführung

JavaScript ist eine der am weitesten verbreiteten Programmiersprachen in der Webentwicklung. Insbesondere spielt die Array‑Manipulation eine entscheidende Rolle bei der Datenverwaltung und der Benutzerinteraktion.

Dieser Artikel liefert eine ausführliche Erklärung, wie man in JavaScript nach Werten in Arrays sucht. Er deckt alles von grundlegenden Suchmethoden bis hin zu fortgeschritteneren Anwendungsfällen ab und ist damit sowohl für Einsteiger als auch für fortgeschrittene Entwickler nützlich.

Zweck dieses Artikels

Durch das Lesen dieses Artikels lernen Sie Folgendes:

• Die Unterschiede zwischen den wichtigsten JavaScript‑Methoden zum Durchsuchen von Arrays verstehen.
• Die konkrete Anwendung jeder Methode anhand von Code‑Beispielen erlernen.
• Die passende Methode je nach Szenario auswählen können.

Zielgruppe

Dieser Artikel richtet sich an:

• Einsteiger, die gerade erst mit JavaScript beginnen.
• Fortgeschrittene Entwickler, die ihr Verständnis von Array‑Suche und Datenverarbeitung vertiefen möchten.
• Web‑Entwickler, die nach praktischen Code‑Beispielen suchen.

Wissen und Fähigkeiten, die Sie erwerben werden

• Grundlegende und erweiterte Nutzung von JavaScript‑Array‑Suchmethoden (indexOf(), includes(), find(), findIndex()).
• Wie man die jQuery‑Methode inArray() verwendet und worauf man achten muss.
• Verständnis von Leistungsunterschieden und praktischen Anwendungsszenarien.

Durch den Erwerb dieser Fähigkeiten können Sie die Datenmanipulation in JavaScript effizienter gestalten.

Ausblick

Im nächsten Artikel werfen wir einen genaueren Blick auf „Grundlegende JavaScript‑Array‑Suchmethoden“. Die Eigenschaften und die Anwendung jeder Methode werden anhand konkreter Beispiele erklärt – bleiben Sie also dran.

Bei Fragen oder Anregungen zu diesem Artikel können Sie sich jederzeit melden.

2. Grundlegende JavaScript‑Array‑Suchmethoden

JavaScript bietet mehrere Methoden, um Werte in Arrays zu suchen. In diesem Abschnitt erklären wir, wie jede Methode funktioniert, und zeigen klare Beispiele.

2-1. Methode indexOf()

Übersicht
Die Methode indexOf() gibt den ersten Index zurück, an dem ein bestimmter Wert in einem Array gefunden wird. Existiert der Wert nicht, wird -1 zurückgegeben.

Grundsyntax

array.indexOf(value, fromIndex)

• value : Der zu suchende Wert
• fromIndex : Die Position, ab der die Suche gestartet wird (optional, Standard ist 0)

Beispiel

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.indexOf('banana')); // Output: 1
console.log(fruits.indexOf('grape'));  // Output: -1

Wichtige Hinweise

• indexOf() verwendet den strikten Vergleich (===). Werte mit unterschiedlichen Datentypen gelten nicht als gleich.
• Sie ist nicht geeignet, um Objekte oder Arrays direkt zu vergleichen.

2-2. Methode includes()

Übersicht
Die Methode includes() gibt einen booleschen Wert (true oder false) zurück, der angibt, ob ein bestimmter Wert im Array vorhanden ist.

Grundsyntax

array.includes(value, fromIndex)

Beispiel

const colors = ['red', 'green', 'blue'];

console.log(colors.includes('green')); // Output: true
console.log(colors.includes('yellow')); // Output: false

Wichtige Hinweise

• includes() wurde in ES6 (ECMAScript 2015) eingeführt und wird in sehr alten Browsern möglicherweise nicht unterstützt.

2-3. Methode find()

Übersicht
Die Methode find() gibt das erste Element zurück, das die angegebene Bedingung erfüllt. Wird kein passendes Element gefunden, wird undefined zurückgegeben.

Beispiel

const numbers = [10, 20, 30, 40];

const result = numbers.find(num => num > 25);
console.log(result); // Output: 30

2-4. Methode findIndex()

Übersicht
Die Methode findIndex() gibt den Index des ersten Elements zurück, das die angegebene Bedingung erfüllt. Wird kein passendes Element gefunden, wird -1 zurückgegeben.

Beispiel

const numbers = [10, 20, 30, 40];

const index = numbers.findIndex(num => num > 25);
console.log(index); // Output: 2

Zusammenfassung

In diesem Abschnitt haben wir die grundlegenden JavaScript-Array-Suchmethoden behandelt: indexOf(), includes(), find() und findIndex().

Wichtige Vergleichspunkte

• Für einfache Suchen ist indexOf() oder includes() geeignet.
• Für bedingungsbasierte Suchen ist find() oder findIndex() effektiver.

3. Was ist die inArray()-Methode von jQuery?

JavaScript bietet eingebaute Array-Suchmethoden, aber jQuery stellt ebenfalls seine eigene Array-Suchmethode namens inArray() bereit. In diesem Abschnitt erklären wir die Funktionen von inArray(), wie man sie mit konkreten Beispielen verwendet und wichtige Punkte, die zu beachten sind.

3-1. Warum jQuery verwenden?

jQuery wird seit langem weit verbreitet als Bibliothek genutzt, die es ermöglicht, DOM-Manipulationen und Ereignisbehandlungen kompakter zu schreiben. Auch heute gibt es noch Situationen, in denen jQuery aus folgenden Gründen eingesetzt wird:

• Legacy-Systeme erhalten : In bestehenden Projekten und Systemen verwendet.
• Einfaches Schreiben von Code : Für Anfänger leicht zu handhaben.
• Kompatibilität sicherstellen : Unterstützung für ältere Browser.

3-2. Wie man die inArray()-Methode verwendet

Übersicht
Die inArray()-Methode gibt den Index eines angegebenen Werts zurück, wenn dieser im Array vorhanden ist. Existiert der Wert nicht, wird -1 zurückgegeben.

Grundsyntax

$.inArray(value, array, [fromIndex])

Beispiel

const fruits = ['apple', 'banana', 'orange'];

console.log($.inArray('banana', fruits)); // Output: 1
console.log($.inArray('grape', fruits));  // Output: -1

3-3. Vergleich von inArray() und nativen Methoden

Wichtige Punkte:

• In jQuery-basierten Projekten kann die Verwendung von inArray() helfen, Konsistenz zu wahren.
• Für neue Projekte wird allgemein empfohlen, native Methoden zu priorisieren.

3-4. Wichtige Hinweise bei der Verwendung

1. Abhängigkeit von der jQuery-Version
Da inArray() nur in einer jQuery-Umgebung verwendet werden kann, sollte man bei neuen Projekten vorsichtig sein.

2. Vergleichsregeln
Es führt nur strenge Vergleiche (===) durch, daher sollte man auf Unterschiede in den Datentypen achten.

3. Leistungsunterschiede
Im Vergleich zu nativen Methoden verursachen jQuery-Methoden zusätzlichen Aufwand.

Zusammenfassung

In diesem Abschnitt haben wir die inArray()-Methode von jQuery erklärt.

Wichtige Erkenntnisse:

• In jQuery-Umgebungen kann man prägnanten und konsistenten Code schreiben.
• Für neue Projekte werden allgemein native Methoden empfohlen.
• Beim Umgang mit Legacy-Systemen kann inArray() weiterhin nützlich sein.

4. Leitfaden zum Vergleich und zur Auswahl von Methoden

JavaScript und jQuery bieten mehrere Array-Suchmethoden, jede mit unterschiedlichen Merkmalen und Anwendungsfällen. In diesem Abschnitt vergleichen wir die wichtigsten Methoden und erklären, wie man die richtige auswählt.

4-1. Hauptmerkmale und Vergleich jeder Methode

Unten steht eine Vergleichstabelle der wichtigsten Array-Suchmethoden und ihrer Eigenschaften.

4-2. Empfohlene Methoden nach Szenario

1. Einfache Wertsuche
Beispiel: Wenn Sie prüfen möchten, ob ein Array einen bestimmten Wert enthält.

• Empfohlene Methoden:
• indexOf() → Wenn Sie die Indexnummer benötigen.
• includes() → Wenn Sie nur das Vorhandensein bestätigen müssen.

Beispiel:

const colors = ['red', 'green', 'blue'];

console.log(colors.indexOf('green')); // Output: 1
console.log(colors.includes('green')); // Output: true

2. Bedingungsbasierte Suche
Beispiel: Wenn Sie nach Daten suchen möchten, die einer bestimmten Bedingung entsprechen.

• Empfohlene Methoden:
• find() → Gibt das erste Element zurück, das einer Bedingung entspricht.
• findIndex() → Gibt die Position des ersten Elements zurück, das einer Bedingung entspricht.

Beispiel:

const numbers = [10, 20, 30, 40];

console.log(numbers.find(num => num > 25)); // Output: 30
console.log(numbers.findIndex(num => num > 25)); // Output: 2

3. Suche in Legacy-Systemen
Beispiel: Wenn Sie Datensuchen in älteren Systemen basierend auf jQuery durchführen.

• Empfohlene Methode:
• inArray() → Verwenden, wenn die Umgebung die jQuery-Bibliothek erfordert.

Beispiel:

.„` const fruits = [‚apple‘, ‚banana‘, ‚orange‘];

console.log($.inArray(‚banana‘, fruits)); // Output: 1

### 4-3. Leistungsvergleich



**1. Wenn eine Hochgeschwindigkeits‑Suche erforderlich ist:**



* `indexOf()` und `includes()` sind schnell.



**2. Wenn eine bedingte Suche erforderlich ist:**



* `find()` und `findIndex()` ermöglichen flexible Bedingungen, sind aber etwas langsamer.



**3. Beim Einsatz von jQuery:**



* `inArray()` ist praktisch, aber langsamer als native Methoden.



### Zusammenfassung



In diesem Abschnitt haben wir die wichtigsten Array‑Suchmethoden verglichen und erklärt, wie man die passende Methode basierend auf dem Anwendungsfall auswählt.



**Wichtige Erkenntnisse:**



* Für einfache Suchen verwenden Sie `indexOf()` oder `includes()`.
* Für bedingungsbasierte Suchen sind `find()` oder `findIndex()` ideal.
* In jQuery‑Umgebungen kann `inArray()` für Altsysteme nützlich sein.



Durch die Wahl der passenden Methode basierend auf Ihrer Umgebung und den Anforderungen können Sie Code schreiben, der effizient und leicht zu warten ist.





## 5. Praktische Beispiele und Anwendungsfälle



In diesem Abschnitt demonstrieren wir, wie die bisher vorgestellten JavaScript‑ und jQuery‑Array‑Suchmethoden in praktischen Szenarien eingesetzt werden können. Durch das Durcharbeiten von realen Beispielen können Sie Ihr Verständnis vertiefen und diese Techniken in tatsächlichen Projekten anwenden.



### 5-1. Formular‑Eingabevalidierung



**Szenario:**  
Überprüfen, ob ein vom Benutzer eingegebener Wert in einer vordefinierten Liste enthalten ist.



**Lösung:**  
Verwenden Sie die Methode `includes()`, um eine kompakte Existenzprüfung durchzuführen.



**Code‑Beispiel:**

const validColors = [‚red‘, ‚green‘, ‚blue‘]; const userInput = ‚green‘;

if (validColors.includes(userInput)) { console.log(‚The color is valid.‘); } else { console.log(‚The color is invalid.‘); }

### 5-2. Suchen und Extrahieren von Benutzerdaten



**Szenario:**  
Suchen Sie nach Benutzerdaten, die einer Bedingung aus einem Array von Objekten entsprechen.



**Lösung:**  
Verwenden Sie `find()` oder `findIndex()`, um Daten zu extrahieren, die die Bedingung erfüllen.



**Code‑Beispiel:**

const users = [ { id: 1, name: ‚Alice‘, age: 25 }, { id: 2, name: ‚Bob‘, age: 30 }, { id: 3, name: ‚Charlie‘, age: 35 }, ];

const result = users.find(user => user.age >= 30); console.log(result); // Output: { id: 2, name: ‚Bob‘, age: 30 }

const index = users.findIndex(user => user.age >= 30); console.log(index); // Output: 1

### 5-3. Beispiel für Fehlerbehandlung



**Szenario:**  
Implementieren Sie Fehlerbehandlung, wenn ein Suchziel nicht gefunden werden kann.



**Lösung:**  
Verwenden Sie `indexOf()` oder `findIndex()`, um das Ergebnis zu prüfen und eine Fehlermeldung anzuzeigen.



**Code‑Beispiel:**

const products = [‚apple‘, ‚banana‘, ‚orange‘];

const index = products.indexOf(‚grape‘);

if (index === -1) { console.log(‚The product was not found.‘); } else { console.log(The product is located at index ${index}.); }

### 5-4. Filtern von Array‑Daten



**Szenario:**  
Extrahieren Sie nur die Daten, die einer gegebenen Bedingung entsprechen.



**Lösung:**  
Verwenden Sie die Methode `filter()`, um das Array zu filtern.



**Code‑Beispiel:**

const scores = [45, 72, 88, 53, 94];

const highScores = scores.filter(score => score >= 70); console.log(highScores); // Output: [72, 88, 94]

### 5-5. Suche mit jQuery



**Szenario:**  
Prüfen Sie die Existenz von Daten mit jQuerys `inArray()` in einem Altsystem.



**Lösung:**  
Verwenden Sie `inArray()`, um den Index des Wertes zu prüfen.



**Code‑Beispiel:**

const fruits = [‚apple‘, ‚banana‘, ‚orange‘];

if ($.inArray(‚banana‘, fruits) !== -1) { console.log(‚Banana exists in the list.‘); } else { console.log(‚Banana does not exist in the list.‘); }

### Zusammenfassung



In diesem Abschnitt haben wir praktische Anwendungsbeispiele jeder Methode anhand realer Szenarien vorgestellt.



**Wichtige Erkenntnisse:**

.

* `includes()` ist einfach und effektiv für die Validierung von Benutzereingaben.  
* `find()` und `findIndex()` sind leistungsstark für bedingte Suchen und die Objektbehandlung.  
* `indexOf()` ist vielseitig und geeignet für die Fehlerbehandlung.  
* `filter()` ist effizient zum Extrahieren mehrerer passender Elemente.  
* `inArray()` ist in Legacy‑Umgebungen, die jQuery verwenden, nützlich.  



## 6. Häufig gestellte Fragen (FAQ)



In diesem Abschnitt gehen wir auf häufige Fragen und Bedenken im Zusammenhang mit der Array‑Suche in JavaScript und jQuery ein.



### Frage 1: Was ist der Unterschied zwischen `indexOf()` und `includes()`?



**Antwort:**  
Sowohl `indexOf()` als auch `includes()` werden verwendet, um Elemente in einem Array zu suchen, aber sie unterscheiden sich in den Rückgabewerten und Anwendungsfällen.



* **`indexOf()`**: Gibt den Index des angegebenen Werts zurück. Gibt `-1` zurück, wenn das Element nicht gefunden wird.  
* **`includes()`**: Gibt einen booleschen Wert (`true` oder `false`) zurück, der angibt, ob das Element existiert.



**Beispiel:**

const fruits = [‚apple‘, ‚banana‘, ‚orange‘];

console.log(fruits.indexOf(‚banana‘)); // Output: 1 console.log(fruits.includes(‚banana‘)); // Output: true

### Frage 2: Was ist der Unterschied zwischen `find()` und `filter()`?



**Antwort:**  
Sowohl `find()` als auch `filter()` suchen nach Elementen, die einer Bedingung entsprechen, aber sie unterscheiden sich im zurückgegebenen Ergebnis.



* **`find()`**: Gibt nur das erste passende Element zurück.  
* **`filter()`**: Gibt alle passenden Elemente als neues Array zurück.



**Beispiel:**

const numbers = [10, 20, 30, 40, 50];

console.log(numbers.find(num => num > 25)); // Output: 30 console.log(numbers.filter(num => num > 25)); // Output: [30, 40, 50]

### Frage 3: Wie kann ich einen bestimmten Schlüsselwert in einem Array von Objekten suchen?



**Antwort:**  
In einem Array von Objekten können Sie Bedingungen mit `find()` oder `findIndex()` angeben.



**Beispiel:**

const users = [ { id: 1, name: ‚Alice‘ }, { id: 2, name: ‚Bob‘ }, { id: 3, name: ‚Charlie‘ }, ];

const user = users.find(user => user.name === ‚Bob‘); console.log(user); // Output: { id: 2, name: ‚Bob‘ }

### Frage 4: Sollte ich jQuerys `inArray()` heute noch verwenden?



**Antwort:**  
Die Methode `inArray()` von jQuery ist in Legacy‑Umgebungen nützlich, aber native JavaScript‑Methoden werden in den meisten modernen Szenarien empfohlen.



**Empfehlungen:**



* **Für neue Projekte**: Verwenden Sie native Methoden wie `indexOf()` oder `includes()`.  
* **Für bestehende, jQuery‑basierte Umgebungen**: Der Einsatz von `inArray()` kann helfen, Konsistenz zu wahren.



### Frage 5: Wie kann ich die Array‑Suche für die Performance optimieren?



**Antwort:**  
Bei großen Datensätzen oder häufigen Suchen sollten Sie die folgenden Punkte berücksichtigen:



**1. Schnelle Methoden wählen:**



* Für einfache Wertsuche sind `indexOf()` und `includes()` schnell.



**2. Caching verwenden:**



* Zwischenspeichern von Suchergebnissen, um wiederholte Berechnungen zu vermeiden.



**3. Datenstrukturen optimieren:**



* Für große Datensätze ist die Verwendung von Objekten, die nach Werten indiziert sind, oder Datenstrukturen wie `Set` oder `Map` effizienter.



**Beispiel:**

const dataSet = new Set([10, 20, 30, 40]); console.log(dataSet.has(20)); // Output: true „`

Zusammenfassung

In diesem Abschnitt haben wir häufig gestellte Fragen und Lösungen zur Array‑Suche in JavaScript und jQuery behandelt.

Wichtige Erkenntnisse:

• Verstehen Sie die Unterschiede und geeigneten Anwendungsfälle jeder Methode.
• Verwenden Sie find() für bedingte Suchen in Objekt‑Arrays.
• Priorisieren Sie native Methoden für neue Projekte und setzen Sie jQuery‑Methoden nur in Legacy‑Umgebungen ein.
• Berücksichtigen Sie Performance und Datenstrukturen, wenn Sie mit großen Datensätzen arbeiten.

7. Zusammenfassung und nächste Schritte

In diesem Artikel haben wir eine umfassende Erklärung zur Verwendung von Array‑Suchmethoden in JavaScript und jQuery bereitgestellt. Hier fassen wir die wichtigsten Punkte des Artikels zusammen und stellen Lernstrategien sowie praktische Schritte für das weitere Vorgehen vor.

7-1. Wichtigste Erkenntnisse aus diesem Artikel

1. Grundlegende Array‑Suchmethoden

• indexOf() : Sucht den Index eines Elements in einem Array.
• includes() : Gibt einen booleschen Wert zurück, der angibt, ob ein Wert existiert.
• find() und findIndex() : Sucht das erste Element bzw. den Index, das/der einer angegebenen Bedingung entspricht.

2. jQuery‑Methode inArray()

• Nützlich für Legacy‑Umgebungen und jQuery‑basierte Systeme.
• In modernen Umgebungen werden native JavaScript‑Methoden empfohlen.

3. Praktische Beispiele und Anwendungsfälle

• Demonstrierte Praxisbeispiele wie Formular‑Validierung und das Extrahieren von Daten aus Objekt‑Arrays.
• Fehlerbehandlung und Datenfilterung können prägnant und effektiv umgesetzt werden.

4. Häufig gestellte Fragen (FAQ)

• Unterschiede zwischen den Methoden und deren Einsatzzeitpunkte wurden geklärt.
• Leistungsaspekte und Techniken zum Durchsuchen von Objekt‑Arrays wurden erläutert.

7-2. Schlüsselpunkte zur Auswahl der richtigen Methode

Die Auswahl der geeigneten Array‑Suchmethode basierend auf Ihrem Anwendungsfall ist entscheidend. Ziehen Sie die nachstehende Schnellreferenztabelle zu Rate, um die optimale Methode zu wählen.

7-3. Nächste Schritte

1. An praktischen Projekten arbeiten

• Erstellen Sie eine einfache Webanwendung und wenden Sie die in diesem Artikel gelernten Methoden an. Beispiele sind die Implementierung von Such‑ und Filterfunktionen in einer TODO‑Liste oder einem Produktverwaltungssystem.

2. Fortgeschrittene JavaScript‑Konzepte lernen

• ES6 und darüber hinaus : Lernen Sie moderne JavaScript‑Features wie den Spread‑Operator und Destructuring, um effizienteren Code zu schreiben.
• Asynchrone Verarbeitung : Das Verständnis von async/await und Promise ermöglicht Ihnen, komplexere Datenoperationen zu bewältigen.

3. Bibliotheken und Frameworks nutzen

• Moderne Frameworks wie React und Vue.js erfordern fortgeschrittene Implementierungen, die Array‑Suche mit Datenbindung kombinieren.

4. Referenzmaterialien und Ressourcen

• MDN Web Docs : JavaScript‑Arrays
• W3Schools : JavaScript‑Array‑Methoden
• JSFiddle und CodePen : Nützliche Werkzeuge zum Testen und Teilen von Code.

7-4. Schlusswort

Durch diesen Artikel haben Sie systematisch sowohl die Grundlagen als auch fortgeschrittene Techniken der Array‑Suche in JavaScript und jQuery erlernt.

Ratschläge für die Leser:

1. Setzen Sie das Gelernte in realen Projekten um und experimentieren Sie häufig mit Code.
2. Lernen Sie kontinuierlich neue Techniken und Ansätze nach Bedarf.
3. Wählen Sie flexibel die am besten geeignete Methode basierend auf den Anforderungen Ihres Projekts.

Fazit

Dies schließt den „Kompletten Leitfaden zur Array‑Suche in JavaScript und jQuery“ ab.

Lernen Sie weiter neue Techniken und Werkzeuge, um Ihre Programmierfähigkeiten kontinuierlich zu verbessern.