Différence entre les fonctions indexOf et findIndex

JavaScript est un langage de programmation dynamique qui peut être utilisé aussi bien côté client que côté serveur. JavaScript est utilisé pour créer des pages Web interactives. Il dispose de nombreux frameworks tels que React JS, Angular JS, Node JS, etc. JavaScript fournit des méthodes pour obtenir l'index d'un élément spécifié. indexOf et findIndex sont ces méthodes.

Fonction indexOf en JavaScript

La fonction indexOf en JavaScript nous permet de rechercher un élément dans un tableau et renvoie le premier index trouvé dans ce tableau. Si l'élément n'est pas trouvé, -1 est renvoyé. La syntaxe de cette méthode est la suivante :

array.indexOf(element, index)

Ici, array est la liste des éléments pour exécuter la méthode indexOf. Element représente l'élément à rechercher et index est la position de départ de l'élément à rechercher.

Exemple

Considérons un tableau de noms de mois. Nous utiliserons la méthode indexOf pour trouver l'index du mois "Mar"

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

Sortie

2

L'indice de sortie qu'il donne est "2". Si l'élément de recherche n'existe pas dans le tableau, "-1" est renvoyé en sortie.

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

Comme l'élément n'existe pas dans le tableau mois, la fonction indexOf renvoie "-1".

Fonction findIndex JavaScript

La fonction array.findIndex() de JavaScript est utilisée pour renvoyer l'index du premier élément présent dans le tableau lorsque la condition spécifiée dans la fonction est remplie. Cet élément est passé par l'utilisateur lors de l'appel de la fonction. Si l'élément n'existe pas dans le tableau, -1 est renvoyé.

La syntaxe de la méthode

findIndex est la suivante :

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

Ici, "arr" représente le tableau sur lequel la fonction findIndex est exécutée.

La méthode

findIndex a les paramètres suivants :

• func - Il s'agit d'une fonction de rappel qui spécifie une condition. Il prend les paramètres suivants :

  • o élément - c'est l'élément actuel dans le tableau

  • o index - l'index de l'élément actuel, facultatif

  • o arr - Indique que le tableau sur lequel cette méthode est exécutée est également facultatif

• thisArg - Ceci est une valeur facultative

La méthode findIndex peut être utilisée de deux manières, à savoir en utilisant le mot-clé "return" et en utilisant la fonction "inline". Ici, lorsque nous passons une fonction à une autre fonction, elles sont appelées « fonctions de rappel ».

Utilisez le mot-clé « retour »

Supposons que nous ayons un ensemble de couleurs comme le rouge, le vert, le bleu, le jaune et l'orange. Nous voulons des index jaunes.

Exemple

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)                        

Sortie

Il produira la sortie suivante :

The index of 'yellow' is: 3

Ici, nous obtenons la sortie "3" car l'élément "jaune" apparaît à la position d'index "3".

Utilisez les fonctions en ligne

Le même programme mentionné ci-dessus peut également être écrit comme suit :

Exemple

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

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

Sortie

Il produira la sortie suivante :

The index of color 'blue' is: 2

Nous obtenons la sortie "2" car l'élément "bleu" apparaît en deuxième position dans le tableau donné.

Différence entre les fonctions indexOf et findIndex

Il existe deux différences principales entre les méthodes indexOf et findIndex :

La première différence

"La méthode indexOf prend l'élément comme paramètre ; tandis que dans la méthode findIndex, la fonction de rappel est passée en paramètre."

Exemple

L'exemple ci-dessous explique ceci :

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

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

Sortie

Il produira la sortie suivante :

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

Dans les deux cas, la sortie est donnée comme "1" car l'élément "banane" apparaît au premier index. Dans la méthode indexOf, l'élément que l'on souhaite rechercher est passé en paramètre et la fonction compare chaque élément du tableau et renvoie la première position où se trouve l'élément.

Dans findIndex, cette méthode envoie chaque élément du tableau à une fonction qui vérifiera le tableau pour l'élément spécifié. Si l'élément est trouvé, une valeur booléenne est renvoyée, qui est "True", et la méthode findIndex renvoie cet index spécifique.

Dans les deux cas, si la valeur ou l'élément n'existe pas dans le tableau, les deux méthodes renvoient "-1" en sortie.

La deuxième différence

La méthode

indexOf est idéale pour obtenir l’index d’un élément simple. Cependant, cette méthode ne fonctionne pas correctement lorsque l’on recherche l’index de quelque chose de plus complexe, comme un objet. Cela est dû à « l’égalité de référence ».

Selon l'égalité des références, une comparaison ne retournera vrai que si les deux objets comparés font référence exactement au même objet. En JavaScript, deux objets identiques ne sont identiques que s'ils font référence au même objet.

Exemple

Comprenons cela à travers l'exemple suivant :

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))

Sortie

Il produira la sortie suivante :

Index: -1
Index: 1
Index: 1

Dans la première fonction indexOf, même si l'objet est le même, il ne peut pas le trouver dans le tableau donné, il renvoie donc "-1".

Dans la dernière méthode indexOf utilisée, lorsque nous passons la référence réelle, elle renvoie l'index de l'objet. La méthode findIndex vérifie toutes les paires clé et valeur du tableau donné pour rechercher et renvoyer l'index correct pour cet objet particulier.

Conclusion

Les méthodes

indexOf et findIndex renvoient toutes deux le premier index de l'élément spécifié. La méthode indexOf prend l'élément dont l'index doit être renvoyé comme paramètre, tandis que la méthode findIndex prend une fonction comme paramètre. Mais les deux fonctions renvoient "-1" en sortie.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!