Überprüfen Sie, ob das Array einen Wert in JavaScript enthält
-
Verwenden der Funktion
.indexOf(), um zu überprüfen, ob das Array einen Wert in JavaScript enthält -
Verwenden der Funktion
.includes(), um zu überprüfen, ob das Array einen Wert in JavaScript enthält -
Verwenden der Funktion
.find()zum Suchen von Elementen in einem Array in JavaScript -
Verwenden der Funktion
.filter()zur Suche nach Elementen in einem Array in JavaScript -
Verwenden einer einfachen
for-Schleife zur Suche nach einem Element - Hinweis
Oft befinden wir uns in der Situation, zu überprüfen, ob das Array einen Wert in JavaScript enthält. Auch wenn die Suchfunktionalität mit einfachen JavaScript-Syntaxen unter Verwendung von Schleifen codiert werden kann, ist es gut, die eingebauten Funktionalitäten, die für die Array-Suche in JavaScript verfügbar sind, deren Verwendung, Rückgabetypen und das Verhalten zu kennen. Es macht unsere Aufgabe viel einfacher, da wir weniger codieren müssen. Die Funktionalität wird mit eingebauten Funktionen effizient und weniger fehleranfällig sein. Sehen wir uns Möglichkeiten an, nach einem Element in einem Array zu suchen.
Verwenden der Funktion .indexOf(), um zu überprüfen, ob das Array einen Wert in JavaScript enthält
Die Funktion .indexOf() ist eine häufig verwendete Funktion in JavaScript. Es funktioniert gut bei der Suche nach einem Element in einem Array oder sogar einem String.
Syntax
indexOf(element, index)
Parameter
Als Parameter wird das zu suchende Element verwendet. Und ein optionaler Parameter, der der Funktion mitteilt, ab welchem Index die Suche gestartet werden muss (beginnend bei 0). Wenn wir einen negativen Wert angeben, bedeutet dies, dass am Ende des Arrays an der angegebenen Position gesucht wird.
Rückgabewert
Die Funktion gibt den Index des Suchelements beginnend bei 0 im Array zurück, wenn sie das Element finden konnte. Andernfalls wird -1 zurückgegeben, was darauf hinweist, dass das Element nicht gefunden werden konnte. Wenn in einem Array mehr als eine Übereinstimmung vorhanden ist, gibt die Funktion .indexOf() den Index der ersten Übereinstimmung zurück.
Browser-Unterstützung
Die Funktion .indexOf() wird für alle gängigen Browserversionen unterstützt.
Verwendung
Die Verwendung der Funktion indexOf() auf einem Array ist wie folgt.
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
console.log(fruits.indexOf('Pear'));
console.log(fruits.indexOf('Tomato'))
Ausgabe:
2
-1
Für die Suchfunktion prüfen wir, ob der Rückgabetyp von .indexOf(searchText) grösser als -1 ist. Wenn ja, dann sollte das Suchergebnis true sein, sonst false. Schauen wir uns das gleiche oben besprochene Beispiel an, um zu überprüfen, ob ein Element im Array vorhanden ist.
function isFruit(fruitName) {
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
if (fruits.indexOf(fruitName) > -1) {
return true;
} else {
return false;
}
}
isFruit('Pear');
isFruit('Cat');
Ausgabe:
true
false
Verwenden der Funktion .includes(), um zu überprüfen, ob das Array einen Wert in JavaScript enthält
Die Funktion includes() von JavaScript prüft, ob ein bestimmtes Element in einem Array vorhanden ist. Es gibt einen booleschen Wert zurück. Daher eignet es sich am besten für if-Bedingungsprüfungen.
Syntax
includes(keyword)
includes(keyword, index)
Parameter
Die Funktion benötigt zwei Parameter. Normalerweise verwenden wir diese Funktion in der Form .includes(searchString). Der Parameter searchString ist das Element, das wir durchsuchen möchten, und der Parameter index bezieht sich auf den Array-Index, ab dem gesucht werden soll. Der Parameter index ist optional.
Rückgabewert
.includes() gibt true zurück, wenn der searchString als Element des Arrays gefunden wird. Wenn nicht gefunden, gibt die Funktion false zurück.
Browser-Unterstützung
Die Funktion .includes() funktioniert in fast allen Webbrowsern außer Internet Explorer. Wenn Ihr Projekt vom IE unterstützt wird, müssen Sie daher möglicherweise die Funktion indexOf() verwenden.
Verwendung
Betrachten wir die Anwendung von includes() in einem Array.
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
console.log(fruits.includes('Pear'));
console.log(fruits.includes('Tomato'))
Ausgabe:
true
false
Die Funktion includes() kann direkt in if-Bedingungen verwendet werden, da sie als Ausgabe einen booleschen Wert zurückgibt. Das obige Beispiel kann im bedingten if wie folgt verwendet werden. Beachten Sie jedoch, dass dieser Code im IE möglicherweise nicht funktioniert, da “.includes()” darin nicht unterstützt wird.
function isFruit(fruitName) {
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
if (fruits.includes(fruitName)) {
return true;
} else {
return false;
}
}
isFruit('Pear');
isFruit('Cat');
Ausgabe:
true
false
Verwenden der Funktion .find() zum Suchen von Elementen in einem Array in JavaScript
Eine andere Möglichkeit zu überprüfen, ob ein Element in einem Array vorhanden ist, ist die Verwendung der Funktion .find(). Im Gegensatz zu den Funktionen .indexOf() und .includes() nimmt .find() eine Funktion als Parameter und führt sie auf jedem Element des Arrays aus. Es gibt den ersten Wert zurück, der von der Bedingung erfüllt wird, wie in der Parameterfunktion erwähnt.
Syntax
.find((keyword) => {/* Some condition checks */})
.find((keyword, index) => {/* Some condition checks */})
Parameter
Die Funktion Array.find() verwendet als Eingabeparameter eine Funktion. Normalerweise verwenden wir Pfeilfunktionen als Parameter. Und diese Pfeilfunktionen können Bedingungsprüfungen wie item => item > 21 enthalten. Ein weiterer optionaler Parameter ist der Index, der den aktuellen Iterationsindex darstellt. .find() führt die Pfeilfunktion auf jedem Element des Arrays aus. Daher stellt es den Iterator als Argument für die Pfeilfunktion bereit, um bei weiteren bedingten Prüfungen zu helfen.
Rückgabewert
.find() unterscheidet sich etwas von den indexOf(), includes() Funktionen von JavaScript. Es gibt den Wert des Elements zurück, wenn es gefunden wurde, andernfalls gibt die Funktion undefiniert zurück.
Browser-Unterstützung
Wie die Funktion .includes() funktioniert .find() in fast allen Webbrowsern außer Internet Explorer. Daher sollten wir uns vergewissern, dass unser Projekt nicht für den IE unterstützt wird, bevor wir planen, solche Funktionen für Array-Operationen zu verwenden.
Verwendung
Siehe die folgende Verwendung in einem Array.
let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.find(i => i > 20));
console.log(age.find(i => i > 21))
Ausgabe:
21
43
Wir sind vielleicht etwas überrascht von der Ausgabe von age.find(i => i > 21), da sie 43 statt 23 zurückgibt, was die nächsthöhere Zahl zu 21 in age war. Array. Beachten Sie, dass die Funktion .find() in chronologischer Reihenfolge das nächste Element zurückgibt, das die in der Array-Funktion erwähnte Bedingung erfüllt. Um ein Element mit einem if-Block zu suchen, können wir den folgenden Code verwenden.
function findPeerAge(myAge) {
let age = [21, 43, 23, 1, 34, 12, 8];
if (age.find(i => (i === myAge))) {
return true;
} else {
return false;
}
}
findPeerAge(23);
findPeerAge(40);
true
false
Verwenden der Funktion .filter() zur Suche nach Elementen in einem Array in JavaScript
Die Funktion .filter() wird hauptsächlich bei Array-Verarbeitungsoperationen verwendet. Vor allem, wenn es darum geht, Elemente, die ein Kriterium erfüllen, aus einem Array herauszufiltern. Es gibt ein Array von Elementen zurück, die die Kriterien erfüllen, die in der als Argument übergebenen Funktion definiert sind.
Syntax
Folgt der gleichen Syntax wie Array.find().
.filter((keyword) => {/* Some condition checks */})
.filter((keyword, index) => {/* Some condition checks */})
Parameter
Die Funktion Array.filter() akzeptiert als Parameter eine Inline- oder Pfeilfunktion. Die Pfeilfunktion hält die Filterkriterien. Die Funktion .filter() führt die Pfeilfunktion für jedes Element des Arrays aus und gibt die Elemente zurück, die die in der Pfeilfunktion erwähnten Bedingungen erfüllen. Die Pfeilfunktion hat das Schlüsselwort als Eingabe und die aktuelle Iteration als Index.
Rückgabewert
Im Gegensatz zu den bisher bekannten Array-Suchfunktionen gibt .filter() ein Array zurück, das die Elemente enthält, die die in der Pfeilfunktion genannten Bedingungen erfüllen. Wenn Element gefunden wird, enthält das zurückgegebene Array die erforderlichen Elemente, andernfalls wird von der Funktion ein leeres Array zurückgegeben.
Browser-Unterstützung
Die Funktion .filter() wird von allen Browsern auch vom Internet Explorer unterstützt. So können Sie die Funktion .filter() verwenden, ohne sich um die erwartete Browserunterstützung zu kümmern.
Verwendung: Die Verwendung dieser Funktion ist wie folgt
let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.filter(i => i > 20));
console.log(age.filter(i => i > 21));
Ausgabe:
[21, 43, 23, 34]
[43, 23, 34]
Wie wir am Ergebnis sehen, gibt die Funktion filter() ein Array zurück. Wenn wir nach einem Element in einem Array suchen müssen, können wir die Funktion filter() verwenden, wie im folgenden Codebeispiel dargestellt. Wir verwenden das Attribut .length des Arrays, das von der Funktion filter() zurückgegeben wird, um zu bestimmen, ob das Element gefunden werden kann oder nicht. Wenn die Funktion ein leeres Array zurückgibt, bedeutet dies, dass sie das Suchschlüsselwort nicht finden konnte.
function findAge(myAge) {
let age = [21, 43, 23, 1, 34, 12, 8];
if (age.filter(i => (i === myAge)).length) {
return true;
} else {
return false;
}
}
findAge(23);
findAge(40);
Ausgabe:
true
false
Verwenden einer einfachen for-Schleife zur Suche nach einem Element
Wir finden ein Element in einem Array mit den grundlegenden Methoden von JavaScript, der if-Bedingung und der for-Schleife. Der folgende Code gibt true zurück, wenn das Element gefunden wird, andernfalls wird false zurückgegeben. Wenn das gleiche Element mehr als einmal vorkommt, gibt die Funktion nur die erste Übereinstimmung zurück.
function findAge(myAge, ageAry) {
let elementFound = false;
for (let i = 0; i < ageAry.length; i++) {
if (ageAry[i] === myAge) {
return true;
}
}
return elementFound;
}
let srcArray = [21, 43, 23, 1, 34, 12, 8];
findAge(23, srcArray);
findAge(40, srcArray);
findAge(8, srcArray);
findAge(23, srcArray);
Ausgabe:
true
false
true
true
Hinweis
- Die Funktionen
.indexOf(),.includes()suchen nach einer exakten Elementübereinstimmung. Wir können es nicht zum Durchsuchen von Teilstrings verwenden. Dies bedeutet, dass ein Teil eines Elements bereitgestellt wird, da der Suchparameter nicht funktioniert. - Wir können eine partielle Elementsuche mit den Funktionen
Array.filter()undArray.find()implementieren, da sie es uns ermöglichen, die Suchkriterien individuell zu definieren.