Différence entre la fonction indexOf et findIndex du tableau

Je suis confus entre la différence entre les deux fonctions indexOf et find Index dans un tableau.

La documentation dit

findIndex - Renvoie l'index du premier élément du tableau où prédicat est vrai, et -1 dans le cas contraire.

et

indexOf - Renvoie l'index de la première occurrence d'une valeur dans un tableau.

La principale différence réside dans les paramètres de ces fonctions:

• Array.prototype.indexOf()attend une valeur comme premier paramètre. Cela en fait un bon choix pour trouver l'index dans des tableaux de types primitifs (comme une chaîne, un nombre ou un booléen).

• Array.prototype.findIndex()attend un rappel comme premier paramètre. Utilisez ceci si vous avez besoin de l'index dans des tableaux avec des types non primitifs (par exemple, des objets) ou si votre condition de recherche est plus complexe qu'une simple valeur.

Voir les liens pour des exemples des deux cas.

FindIndex est utile si vous voulez trouver le premier élément qui correspond à votre prédicat: dans l'exemple du W3C, il y a des nombres et des correspondances si l'âge du client est supérieur ou égal à 18 ans.

var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}

console.log(ages.findIndex(checkAdult));

console:

2

Vous pouvez trouver un index d'élément exact avec la fonction indexOf de Array, mais vous ne pouvez pas passer de prédicat. C'est plus rapide si vous voulez trouver un élément spécifique:

var ages = [3, 10, 18, 20];
console.log(ages.indexOf(10));

Retour:

1

Le comptage d'index commence à 0, donc le premier index d'élément est 0.

La principale différence réside dans les paramètres de ces fonctions:

-> Array.prototype.indexOf () :

   var fruits = ["Banana", "Orange", "Apple", "Mango"];
   var a = fruits.indexOf("Apple");
   The result of a will be: 2

-> Array.prototype.findIndex () :

       var ages = [3, 10, 18, 20];

       function checkAdult(age) {
        return age >= 18;
       }

       function myFunction() {
         document.getElementById("demo").innerHTML = 
         ages.findIndex(checkAdult);
       }

       The result will be: 2

Vous pouvez également utiliser includes:

[1, 2, 3].includes(2);      // true
[1, 2, 3].includes(4);      // false
[1, 2, 3].includes(3, 3);   // false

mais je préfère la indexOfméthode:

var vals = [ "foo", "bar", 42, "baz" ];
if (~vals.indexOf( 42 )) {
  // found it!
}

Une autre différence est qu'avec findIndex (), l'utilisateur peut appliquer une fonction et trouver l'élément dans le tableau qui passe le test.

Mais la même chose n'est pas vraie avec l' opérateur indexOf () . Un utilisateur peut simplement vérifier si l'élément particulier existe ou non dans le tableau.

Simple - Quel type de structure de tableau utilisez-vous?

• Si tableau d'objets findIndex(),;
• Sinon, indexOf().

"Je veux trouver l'index dans un tableau d'objets , avec la clé" Orange ".

let fruits = [
   { type: "Apple", quantity: 9 },
   { type: "Banana", quantity: 2},
   { type: "Orange", quantity: 8},
   { type: "Pear", quantity: 777}
];

let myIndex = fruits.findIndex(fruit => fruit.type === "Orange"); // Returns 2.

"Je veux trouver l'index dans un tableau simple ".

let fruits = [ "Apple", "Banana", "Pear", "Orange"];

let index = fruits.indexOf("Orange"); // Returns 3.

Vous pouvez essayer les codes ci-dessous: -

let city = ['Delhi', 'mumbai']
const a = city.findIndex((item) => 
item.toLowerCase()==='delhi')
console.log(a) // returns 0

let c = city.indexOf('mumbai') // returns 1
console.log(c)