Der vollständige Leitfaden zu Array‑Suchmethoden in JavaScript und jQuery

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

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

1. Einführung

JavaScript ist eine der am weitesten verbreiteten Programmiersprachen in der Webentwicklung. Insbesondere seine Array‑Manipulationsfunktionen spielen eine entscheidende Rolle bei der Datenverwaltung und Benutzerinteraktion.
In diesem Artikel erklären wir ausführlich, wie man nach Werten in Arrays in JavaScript sucht. Von grundlegenden Suchmethoden bis hin zu fortgeschritteneren Techniken bietet dieser Leitfaden nützliche Informationen für Anfänger und mittelstufige Entwickler gleichermaßen.

Zweck dieses Artikels

Durch das Lesen dieses Artikels lernen Sie die folgenden Punkte:

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

Zielgruppe

Dieser Artikel richtet sich an:

• Anfänger, die gerade erst mit JavaScript beginnen.
• Fortgeschrittene Nutzer, 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

• Die Grundlagen und Anwendungsfälle von JavaScript‑Array‑Suchmethoden (indexOf(), includes(), find(), findIndex()).
• Wie man die jQuery‑Methode inArray() verwendet und welche Fallstricke es gibt.
• Leistungsvergleiche und praktische Anwendungsszenarien.

Durch das Beherrschen dieser Fähigkeiten können Sie Datenmanipulationen mit JavaScript effizienter durchführen.

Nächster Artikel

Im nächsten Artikel erklären wir ausführlich die „Grundlegenden Array‑Suchmethoden in JavaScript“. Wir gehen auf die Eigenschaften und die Verwendung jeder Methode mit konkreten Beispielen ein. Bleiben Sie dran.
Wenn Sie Fragen oder Anregungen zu diesem Inhalt haben, melden Sie sich gern.

2. Grundlegende Array‑Suchmethoden in JavaScript

JavaScript bietet verschiedene Methoden, um Werte in Arrays zu suchen. Dieser Abschnitt erklärt, wie jede Methode funktioniert, anhand leicht verständlicher Beispiele.

2-1. Die indexOf()‑Methode

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

Grundsyntax

array.indexOf(value, fromIndex)

• value : Der zu suchende Wert.
• fromIndex : Optional. Startposition der Suche (Standard ist 0).

Beispiel

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

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

Hinweise

• indexOf() vergleicht Werte mit strenger Gleichheit (===). Werte unterschiedlicher Typen stimmen nicht überein.
• Nicht geeignet zum Vergleich von Objekten oder Arrays selbst.

2-2. Die includes()‑Methode

Übersicht
Die includes()‑Methode 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

Hinweise

• includes() wurde in ES6 (2015) eingeführt, daher unterstützen ältere Browser es möglicherweise nicht.

2-3. Die find()‑Methode

Übersicht
Die find()‑Methode gibt das erste Element zurück, das eine angegebene Bedingung erfüllt. Gibt es kein passendes Element, 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. Die findIndex()‑Methode

Übersicht
Die findIndex()‑Methode gibt den Index des ersten Elements zurück, das eine angegebene Bedingung erfüllt. Erfüllt kein Element die Bedingung, 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 wurden die grundlegenden JavaScript‑Array‑Suchmethoden erklärt: indexOf(), includes(), find() und findIndex().

Vergleichspunkte

• Für einfache Wertsuche verwenden Sie indexOf() oder includes().
• Für bedingte Suchen ist find() oder findIndex() nützlich.

3. Was ist die jQuery‑Methode inArray()?

Obwohl JavaScript native Array‑Suchmethoden bereitstellt, bietet jQuery ebenfalls seine eigene Methode inArray() an. Dieser Abschnitt erklärt ihre Eigenschaften, Verwendung und Einschränkungen.

3-1. Warum jQuery verwenden?

jQuery wird seit langem eingesetzt, um die DOM‑Manipulation und Ereignisbehandlung zu vereinfachen. Es wird weiterhin verwendet für:

• Wartung von Altsystemen
• Vereinfachtes Schreiben von Code
• Kompatibilität mit älteren Browsern

3-2. Verwendung von inArray()

Übersicht
inArray() gibt den Index eines Wertes in einem Array zurück. 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: inArray() vs native Methoden

Wichtige Punkte:

• Verwenden Sie inArray() für Konsistenz in jQuery‑Projekten.
• Verwenden Sie native Methoden für moderne Projekte.

3-4. Hinweise

1. Abhängigkeit von der jQuery‑Version
inArray() funktioniert nur in einer jQuery‑Umgebung.

2. Strenger Vergleich
Sie vergleicht Werte mit strikter Gleichheit (===).

3. Leistungsunterschiede
Native Methoden sind schneller.

Zusammenfassung

Dieser Abschnitt behandelte jQuerys inArray().

Wichtige Punkte:

• Praktisch für Altsysteme oder jQuery‑basierte Systeme.
• Native Methoden werden für neue Entwicklungen empfohlen.

4. Vergleichsleitfaden zur Auswahl von Array‑Suchmethoden

JavaScript und jQuery bieten mehrere Array‑Suchmethoden, jede mit unterschiedlichen Merkmalen und Anwendungsfällen. Dieser Abschnitt vergleicht die wichtigsten Methoden und erklärt, wie man die passende Methode je nach Szenario auswählt.

4-1. Eigenschaften und Vergleich jeder Methode

Unten finden Sie eine Vergleichstabelle der wichtigsten Array‑Suchmethoden.

4-2. Empfohlene Methoden nach Anwendungsszenario

1. Einfache Wertsuche
Beispiel: Prüfen, ob ein Array einen bestimmten Wert enthält.

• Empfohlene Methoden:
• indexOf() → Wenn die Indexzahl benötigt wird.
• includes() → Wenn ein einfacher Existenz‑Check ausreicht.

Beispiel:

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

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

2. Bedingte Suche
Beispiel: Suchen von Daten, die einer bestimmten Bedingung entsprechen.

• Empfohlene Methoden:
• find() → Gibt das erste passende Element zurück.
• findIndex() → Gibt den Index des ersten passenden Elements zurück.

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 Altsystemen
Beispiel: Daten in älteren jQuery‑basierten Systemen suchen.

• Empfohlene Methode:
• inArray() → Nützlich, wenn jQuery erforderlich ist.

Beispiel:

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

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

4-3. Leistungs‑Vergleich

1. Wenn hohe Geschwindigkeit erforderlich ist:

• indexOf() und includes() sind schnell.

2. Für bedingte Suchen:

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

3. Beim Einsatz von jQuery:

• inArray() ist einfach, aber langsamer wegen des Bibliotheks‑Overheads.

Zusammenfassung

Dieser Abschnitt verglich die wichtigsten Array‑Suchmethoden und erklärte ihre empfohlene Verwendung je nach Szenario.

Wichtige Punkte:

• Verwenden Sie indexOf() oder includes() für einfache Suchen.
• Verwenden Sie find() oder findIndex() für bedingte Suchen.
• Verwenden Sie inArray() für Altsysteme mit jQuery.

Die Auswahl der passenden Methode je nach Umgebung und Anwendungsfall hilft, effizienten und wartbaren Code zu erstellen.

5. Praktische Beispiele und Anwendungsfälle

Dieser Abschnitt erklärt, wie man JavaScript‑ und jQuery‑Array‑Suchmethoden in realen Szenarien anwendet. Durch praktische Beispiele vertiefen Sie Ihr Verständnis des Codes.

5-1. Formular‑Eingabevalidierung

Szenario:
Überprüfen, ob die Eingabe eines Benutzers in einer vordefinierten Liste vorhanden ist.
Lösung:
Verwenden Sie includes() für eine einfache Existenzprüfung.
Codebeispiel:

const validColors = ['red', 'green', 'blue'];
const userInput = 'green';

if (validColors.includes(userInput)) {
  console.log('Valid color.');
} else {
  console.log('Invalid color.');
}

5-2. Suchen und Extrahieren von Benutzerdaten

Szenario:
Suchen Sie nach Benutzerdaten, die bestimmte Bedingungen in einem Array von Objekten erfüllen.
Lösung:
Verwenden Sie find() oder findIndex().
Codebeispiel:

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 wird.
Lösung:
Verwenden Sie indexOf() oder findIndex().
Codebeispiel:

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

const index = products.indexOf('grape');

if (index === -1) {
  console.log('Product not found.');
} else {
  console.log(`Product found at index ${index}.`);
}

5-4. Filtern von Array‑Daten

Szenario:
Extrahieren Sie nur die Daten, die bestimmte Bedingungen erfüllen.
Lösung:
Verwenden Sie filter().
Codebeispiel:

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

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

5-5. jQuery‑Suchbeispiel

Szenario:
Überprüfen Sie die Existenz von Daten mit inArray() in einem Altsystem.
Lösung:
Verwenden Sie jQuery inArray().
Codebeispiel:

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

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

Zusammenfassung

Dieser Abschnitt stellte praktische Anwendungsbeispiele basierend auf realen Szenarien vor.
Wichtige Punkte:

• includes() ist einfach und nützlich für die Eingabevalidierung.
• find() und findIndex() sind leistungsstark für bedingte und objektbasierte Suchen.
• indexOf() ist vielseitig für die Fehlerbehandlung.
• filter() ist effizient zum Extrahieren mehrerer übereinstimmender Elemente.
• inArray() hilft in älteren jQuery‑Umgebungen.

6. Häufig gestellte Fragen (FAQ)

Dieser Abschnitt beantwortet häufige Fragen zur Array‑Suche in JavaScript und jQuery.

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

Antwort:
Beide Methoden werden verwendet, um Elemente in einem Array zu suchen, aber ihre Rückgabewerte und die Verwendung unterscheiden sich:

• indexOf() : Gibt den Index des angegebenen Werts zurück. Gibt -1 zurück, wenn der Wert nicht gefunden wird.
• includes() : Gibt einen booleschen Wert (true oder false) zurück, der angibt, ob der Wert im Array vorhanden ist.

Beispiel:

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

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

Frage 2: Wie unterscheiden sich find() und filter()?

Antwort:
Beide Methoden geben Elemente zurück, die einer Bedingung entsprechen, aber sie unterscheiden sich in ihrer Funktionalität:

• find() : Gibt das erste Element zurück, das die Bedingung erfüllt.
• 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 suche ich ein bestimmtes Schlüssel‑Wert‑Paar in einem Array von Objekten?

Antwort:
Verwenden Sie find() oder findIndex() mit einer Bedingung.
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 jQuery’s inArray() noch verwenden?

Antwort:
jQuery’s inArray() ist in Legacy‑Umgebungen nützlich, aber modernes JavaScript bietet bessere native Methoden.
Empfehlung:

• Für neue Projekte : Verwenden Sie native Methoden wie indexOf() oder includes().
• Für bestehende jQuery‑Systeme : Verwenden Sie inArray(), um 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 Suchvorgängen sollten Sie die folgenden Punkte beachten:
1. Schnelle Methoden wählen:

• indexOf() und includes() sind die schnellsten für einfache Suchen.

2. Caching verwenden:

• Zwischenspeichern von Suchergebnissen, um wiederholte Berechnungen zu vermeiden.

3. Datenstrukturen optimieren:

• Für große Datensätze verwenden Sie Objekte, Map oder Set für effiziente Lookups.

Beispiel:

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

Zusammenfassung

Dieser Abschnitt erklärte häufige Fragen zur Array‑Suche in JavaScript und jQuery.
Wichtige Punkte:

• Verstehen Sie die Unterschiede zwischen den Methoden und wählen Sie passend aus.
• find() ist nützlich für bedingte Suchen in Objekt‑Arrays.
• Native Methoden werden in moderner Entwicklung bevorzugt; jQuery ist hauptsächlich für Legacy‑Systeme.
• Optimieren Sie die Performance, indem Sie die richtige Datenstruktur wählen.

7. Zusammenfassung und nächste Schritte

Dieser Artikel lieferte eine detaillierte Erklärung der Array‑Suchmethoden in JavaScript und jQuery. Lassen Sie uns die wichtigsten Punkte noch einmal durchgehen und besprechen, wie Sie weiter lernen und diese Konzepte anwenden können.

7-1. Zusammenfassung der wichtigsten Punkte

1. Grundlegende Array‑Suchmethoden

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

2. jQuery’s inArray()‑Methode

• Nützlich in Legacy‑ oder jQuery‑basierten Systemen.
• Native JavaScript‑Methoden werden in moderner Entwicklung empfohlen.

3. Praktische Beispiele und Anwendungsszenarien

• Eingabevalidierung, Benutzerdatenextraktion, Fehlerbehandlung und Filterung können mit diesen Methoden vereinfacht werden.

4. Häufig gestellte Fragen

• Unterschiede, Anwendungsfälle und Performance‑Überlegungen wurden geklärt.

7-2. Wie man die richtige Methode auswählt

Die Auswahl einer Methode hängt von Ihrem Zweck ab. Verwenden Sie das untenstehende Cheat‑Sheet:

7-3. Nächste Schritte

1. Ein kleines Projekt starten

• Erstellen Sie eine einfache Web‑App und wenden Sie die hier gelernten Methoden an.
  Beispiel: TODO‑Liste, Produktinventarverwaltung, Filterwerkzeuge.

2. Fortgeschrittenes JavaScript lernen

• ES6+‑Features : Spread‑Syntax, Destrukturierung, Arrow‑Funktionen.
• Asynchrones Programmieren : Lernen Sie Promise, async/await für die Datenbeschaffung.

3. Frameworks erkunden

• Frameworks wie React oder Vue.js verwenden häufig Array‑Operationen für das UI‑Rendering.

4. Empfohlene Ressourcen

• MDN Web Docs : JavaScript Arrays
• W3Schools : JavaScript Array Methods
• JSFiddle / CodePen : Nützlich zum Testen und Teilen von Code‑Snippets.

7-4. Abschließende Gedanken

Durch diesen Leitfaden haben Sie sowohl die Grundlagen als auch fortgeschrittene Anwendungen der Array‑Suche in JavaScript und jQuery kennengelernt.
Ratschläge für die Leser:

1. Üben Sie das Gelernte, indem Sie regelmäßig Code schreiben und testen.
2. Erkunden Sie weiterhin neue JavaScript‑Features und Techniken.
3. Wählen Sie die am besten geeignete Methode basierend auf Ihren spezifischen Bedürfnissen.

Fazit

Dies schließt den „Complete Guide to Array Searching in JavaScript and jQuery“ ab.
Lernen Sie weiter und erweitern Sie Ihre Programmierfähigkeiten, um noch leistungsfähigere und effizientere Anwendungen zu erstellen.