Trouver l'index de l'objet dans le tableau JavaScript

1. Utilisez la méthode findIndex() pour rechercher l’index de l’objet dans un tableau en JavaScript
2. Utilisez la bibliothèque lodash pour trouver l’index de l’objet dans le tableau JavaScript

Cet article explorera la méthode findIndex() et l’utilisation de lodash pour trouver l’index de l’objet dans JavaScript Array.

Utilisez la méthode findIndex() pour rechercher l’index de l’objet dans un tableau en JavaScript

ES6 a ajouté une nouvelle méthode appelée findIndex() au Array.prototype, qui renvoie le premier élément d’un tableau qui réussit le test fourni. La méthode findIndex() renvoie l’index de l’élément qui satisfait une fonction de test ou -1 si aucun élément n’a réussi le test. Le findIndex() est le meilleur pour les tableaux avec des types non primitifs (par exemple, des objets) pour trouver l’index d’un élément.

Nous fournissons un rappel comme premier paramètre dans le Array.prototype.findIndex(). Cette méthode est utile si l’index des tableaux n’est pas primitif. Nous pouvons utiliser cette méthode si l’index du tableau est plus que de simples valeurs. Après avoir renvoyé le premier élément qui correspond à la condition spécifiée, findIndex() arrête de vérifier le tableau pour les éléments restants dans le tableau.

La syntaxe de findIndex() est indiquée ci-dessous.

array.findIndex(function(currentValue, index, arr))

Facultativement, index et arr peuvent être passés à la fonction de rappel. L’option index pointe vers l’index de l’élément actuel dans le tableau, tandis que arr est l’objet du tableau auquel appartient l’élément actuel. Le findIndex() renvoie -1 si la condition spécifiée dans le tableau ne correspond pas.

Supposons que nous ayons le tableau suivant avec des types primitifs et que nous souhaitions trouver l’index de l’élément qui a un âge supérieur à 18. Ensuite, nous pouvons utiliser findIndex() pour trouver l’index du premier élément qui correspond à la condition spécifié.

Exemple de code :

const ages = [3, 10, 17, 23, 52, 20];
let index = ages.findIndex(age => age > 18);
console.log(index);

Production:

3

Étant donné que le premier élément qui correspond à la condition spécifiée a un indice de 3 car il est supérieur à 18, nous obtenons la valeur de l’indice comme 3.

Maintenant, nous pouvons utiliser la même logique pour trouver l’index de l’objet qui correspond à la condition que nous spécifions avec la méthode findIndex(). On peut utiliser findIndex() pour trouver l’indice d’une personne qui a obtenu la note B.

Exemple de code :

const Result =
    [
      {
        name: 'John',
        grade: 'A',
      },
      {
        name: 'Ben',
        grade: 'C',
      },
      {
        name: 'Anthony',
        grade: 'B',
      },
      {
        name: 'Tim',
        grade: 'B-',
      },
    ]

    const index = Result.findIndex((element) => element.grade === 'B');
console.log(index)

Production:

2

Ici, le findIndex() est utilisé avec le tableau Result, qui contient nos données sous forme d’objets JavaScript. Nous avons implémenté la fonction flèche, qui a également été introduite avec ES6 en tant que fonction de rappel avec la méthode findIndex(). Nous avons passé element à la fonction de rappel, qui contient la valeur actuelle de l’objet dans le tableau que nous parcourons.

Utilisez la bibliothèque lodash pour trouver l’index de l’objet dans le tableau JavaScript

Nous pouvons utiliser la bibliothèque légère lodash, facilitant JavaScript en simplifiant le travail avec des tableaux, des nombres, des objets, des chaînes, etc. Nous pouvons télécharger le fichier lodash.js à partir du site officiel et le charger en haut de notre site Web, comme indiqué ci-dessous.

<script src="lodash.js"> </script>

Nous pouvons l’installer localement en tant que npm i --save lodash ou yarn add lodash. Une fois tout configuré, nous pouvons utiliser la méthode _.findIndex(). La syntaxe est indiquée ci-dessous.

_.findIndex(array, [predicate = _.identity], [fromIndex = 0])

Ici, les arguments array indiquent le tableau que nous devons traiter. L’option [predicate=_.identity] est la fonction invoquée par itération. La troisième option [fromIndex=0] est facultative et peut être utilisée pour définir le point de départ pour démarrer l’itération.

Nous utilisons le tableau créé dans la méthode ci-dessus pour la démonstration de la méthode lodash.

Exemple de code :

var index = _.findIndex(Result, {grade: 'B'})
console.log(index);

Production:

2