Unterschied zwischen den Funktionen indexOf und findIndex

JavaScript ist eine dynamische Programmiersprache, die sowohl auf der Client- als auch auf der Serverseite verwendet werden kann. JavaScript wird zum Erstellen interaktiver Webseiten verwendet. Es verfügt über viele Frameworks wie React JS, Angular JS, Node JS usw. JavaScript bietet einige Methoden, um den Index eines bestimmten Elements abzurufen. indexOf und findIndex sind diese Methoden.

indexOf-Funktion in JavaScript

Mit der indexOf-Funktion in JavaScript können wir nach einem Element in einem Array suchen und den ersten gefundenen Index in diesem Array zurückgeben. Wenn das Element nicht gefunden wird, wird -1 zurückgegeben. Die Syntax dieser Methode lautet wie folgt:

array.indexOf(element, index)

Hier ist Array die Liste der Elemente, die die indexOf-Methode ausführen sollen. Element stellt das zu durchsuchende Element dar und Index ist die Startposition des zu durchsuchenden Elements.

Beispiel

Betrachten wir eine Reihe von Monatsnamen. Wir werden die indexOf-Methode verwenden, um den Index des Monats „März“ zu finden

const months = ['Jan', 'Feb', 'Mar', 'April', 'May']
console.log (months.indexOf('Mar'))

Ausgabe

2

Der ausgegebene Ausgabeindex ist „2“. Wenn das Suchelement nicht im Array vorhanden ist, wird „-1“ als Ausgabe zurückgegeben.

Console.log (months.indexOf('Aug'))

Da das Element im Monatsarray nicht vorhanden ist, gibt die Funktion indexOf „-1“ zurück.

findIndex-Funktion JavaScript

Die Funktion array.findIndex() von JavaScript wird verwendet, um den Index des ersten im Array vorhandenen Elements zurückzugeben, wenn die in der Funktion angegebene Bedingung erfüllt ist. Dieses Element wird vom Benutzer beim Funktionsaufruf übergeben. Wenn das Element im Array nicht vorhanden ist, wird -1 zurückgegeben.

findIndex-Methode lautet wie folgt:

arr.findIndex (func(element, index, arr), thisArg)

Hier stellt „arr“ das Array dar, auf dem die findIndex-Funktion ausgeführt wird.

findIndex-Methode hat die folgenden Parameter:

• func – Dies ist eine Rückruffunktion, die eine Bedingung angibt. Es werden folgende Parameter benötigt:

  • o Element – es ist das aktuelle Element im Array

  • o Index – der Index des aktuellen Elements, optional

  • o arr – Gibt an, dass das Array, auf dem diese Methode ausgeführt wird, ebenfalls optional ist

• thisArg – Dies ist ein optionaler Wert

Die findIndex-Methode kann auf zwei Arten verwendet werden, nämlich mit dem Schlüsselwort „return“ und mit der Funktion „inline“. Wenn wir hier eine Funktion an eine andere Funktion übergeben, werden sie „Rückruffunktionen“ genannt.

Verwenden Sie das Schlüsselwort „return“

Angenommen, wir haben eine Reihe von Farben wie Rot, Grün, Blau, Gelb, Orange. Wir wollen gelbe Indizes.

Beispiel

const colors = ['red', 'green', 'blue', 'yellow', 'orange']

function is_yellow (element) {
   return element === 'yellow'
}
result = colors.findIndex(is_yellow)
console.log ("The index of 'yellow' is: " + result)                        

Ausgabe

Es wird die folgende Ausgabe erzeugt:

The index of 'yellow' is: 3

Hier erhalten wir die Ausgabe „3“, da das Element „gelb“ an der Indexposition „3“ erscheint.

Verwenden Sie Inline-Funktionen

Das gleiche oben erwähnte Programm kann auch wie folgt geschrieben werden:

Beispiel

let colors = ['red', 'green', 'blue', 'yellow', 'orange']

let index = colors.findIndex(color => color === 'blue')
console.log("The index of color 'blue' is: " + index)

Ausgabe

Es wird die folgende Ausgabe erzeugt:

The index of color 'blue' is: 2

Wir erhalten die Ausgabe „2“, da das Element „blau“ an der zweiten Position im angegebenen Array erscheint.

Unterschied zwischen den Funktionen indexOf und findIndex

Es gibt zwei Hauptunterschiede zwischen den Methoden indexOf und findIndex:

Der erste Unterschied

„Die indexOf-Methode verwendet das Element als Parameter; während in der findIndex-Methode die Callback-Funktion als Parameter übergeben wird.“

Beispiel

Das folgende Beispiel erklärt dies:

const fruits = ['apple', 'banana', 'mango', 'grapes']

console.log("The index of 'banana' is: " + fruits.indexOf('banana'))
console.log ("Index: " + fruits.findIndex(index => index === 'banana'))

Ausgabe

Es wird die folgende Ausgabe erzeugt:

The index of 'banana' is: 1
Index: 1

In beiden Fällen wird die Ausgabe als „1“ angegeben, da das Element „Banane“ am ersten Index erscheint. In der indexOf-Methode wird das gesuchte Element als Parameter übergeben und die Funktion vergleicht jedes Element des Arrays und gibt die erste Position zurück, an der das Element gefunden wird.

In findIndex sendet diese Methode jedes Element im Array an eine Funktion, die das Array auf das angegebene Element überprüft. Wenn das Element gefunden wird, wird ein boolescher Wert zurückgegeben, der „True“ ist, und die Methode findIndex gibt diesen spezifischen Index zurück.

In beiden Fällen geben beide Methoden „-1“ als Ausgabe zurück, wenn der Wert oder das Element nicht im Array vorhanden ist.

Der zweite Unterschied

indexOf eignet sich hervorragend zum Abrufen des Index eines einfachen Elements. Diese Methode funktioniert jedoch nicht richtig, wenn wir nach dem Index von etwas Komplexerem suchen, beispielsweise einem Objekt. Dies liegt an der „Referenzgleichheit“.

Gemäß der Referenzgleichheit gibt ein Vergleich nur dann „true“ zurück, wenn sich die beiden verglichenen Objekte auf genau dasselbe Objekt beziehen. In JavaScript sind zwei identische Objekte nicht identisch, es sei denn, sie verweisen auf dasselbe Objekt.

Beispiel

Lassen Sie uns dies anhand des folgenden Beispiels verstehen:

const obj = {banana:3}
const array = [{mango:7}, obj, {orange:5}]

console.log ("Index: " + array.indexOf({banana:3}))  
console.log ("Index: " + array.findIndex(index => index.banana === 3))
console.log ("Index: " + array.indexOf(obj))

Ausgabe

Es wird die folgende Ausgabe erzeugt:

Index: -1
Index: 1
Index: 1

In der ersten indexOf-Funktion kann das Objekt im angegebenen Array nicht gefunden werden, obwohl es dasselbe ist, und gibt daher „-1“ zurück.

Wenn wir in der am Ende verwendeten indexOf-Methode die eigentliche Referenz übergeben, wird der Index des Objekts zurückgegeben. Die Methode findIndex überprüft alle Schlüssel-Wert-Paare im angegebenen Array, um den richtigen Index für dieses bestimmte Objekt zu finden und zurückzugeben.

Fazit

indexOf und findIndex geben beide den ersten Index des angegebenen Elements zurück. Die Methode indexOf verwendet das Element, dessen Index zurückgegeben werden soll, als Parameter, während die Methode findIndex eine Funktion als Parameter akzeptiert. Aber beide Funktionen geben als Ausgabe „-1“ zurück.

Das obige ist der detaillierte Inhalt vonUnterschied zwischen den Funktionen indexOf und findIndex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!