Dans ce deuxième article sur les méthodes indispensables en JavaScript, nous allons aborder les méthodes de recherche dans un tableau.

Données d’exemple

Afin de simplifier la compréhension, nous prendrons le tableau suivant pour illustrer les différents exemples.

const employees: Employee[] = [
    {
        id: 1,
        name: "Patrick",
        salary: 42000,
    },
    {
        id: 2,
        name: "Berth",
        salary: 44000,
    },
    {
        id: 3,
        name: "Alexandre",
        salary: 38000,
    },
];

1. indexOf

La méthode indexOf permet d’obtenir l’indice de la première occurrence d’un élément dans un tableau. Cette méthode s’applique principalement sur des tableaux de primitive number et string.

Prenons comme exemple le tableau suivant qui correspond aux salaires des employés.

const salaries: number[] = [42000, 44000, 38000];

 salaries.indexOf(42000);
// Output 0

salaries.indexOf(30000);
// Output -1

La méthode indexOf renvoie l’index de la première occurrence de l’élément recherché. Si aucun élément ne correspond à la recherche, la méthode renvoie -1.

Il est possible de renseigner un deuxième paramètre qui correspond à l’index du tableau auquel la recherche va commencer.

const salaries: number[] = [42000, 44000, 38000];

 salaries.indexOf(42000, 1);
// Output -1

salariers.indexOf(44000, 1);
// Output 1

Tips

Si on veut faire le même traitement depuis le tableau employees, il faut d’abord appliquer un map pour récupérer tous les salaires puis faire la recherche comme dans le code suivant.

employees.map((employee: Employee) => employee.salary).indexOf(38000)
// Output 2

2. find

La méthode find est similaire à la méthode indexOf, à l’exception que la méthode find renvoie le premier élément qui correspond à la recherche.

Prenons comme exemple le cas suivant. Imaginez que vous voulez trouver l’employé qui s’appelle Alexandre.

employees.find((employee: Employee) => employee.name === "Alexandre");

// Output 
{
        id: 3,
        name: "Alexandre",
        salary: 38000,
}

Ici, on a la condition qui est déclaré dans le corps de la méthode find. Si un élément correspond à cette condition, on obtient l’élément.

Si aucun élément ne correspond à la recherche, la méthode renvoie undefined.

employees.find((employee: Employee) => employee.name === "Nicolas");

// Output undefined

Tips

Il est possible d’extraire la condition dans une fonction afin d’alléger le code comme dans l’exemple suivant.

const condition = (element: Employee) => element.name === "Alexandre";

employees.find(condition);

3. at

La méthode at permet de récupérer l’élément situé à un index i dans un tableau, tout comme la notation array[i]. La particularité de cette méthode est la recherche depuis la fin d’un tableau.

Prenons un exemple simple, vous voulez récupérer la première valeur du tableau, vous avez deux options.

// option 1
employees[0];

// option 2
employees.at(0);

// Output
{
        id: 1,
        name: "Patrick",
        salary: 42000,
}

Comme prévu, les deux options donnent le même résultat. Maintenant, nous voulons récupérer l’avant dernier éléments de notre tableau. Encore une fois, il existe deux options.

// option 1
employees[employees.length - 2];

// option 2
employees.at(-2);

// Output
{
        id: 2,
        name: "Berth",
        salary: 44000,
}

De nouveau, on obtient le même résultat, sauf qu’ici, il y a une syntaxe qui est plus courte et lisible que l’autre.

4. some

La méthode some permet de vérifier qu’au moins un élément du tableau respecte une condition.

Prenons comme exemple les cas suivants.

employees.some((employee: Employee) => employee.salary > 40000);
// Output true

employees.some((employee: Employee) => employee.salary < 35000);
// Output false

La méthode renvoie true si au moins un élément respect la condition passée en paramètre, sinon elle renvoie false.

Tips

Il est possible d’extraire la condition dans une fonction afin d’alléger le code comme dans l’exemple suivant.

const condition = (element: Employee) => element.salary > 40000;

employees.some(condition);
// Output true

5. every

La méthode every permet de vérifier que tous les éléments d’un tableau respectent une condition.

Prenons comme exemple les cas suivants.

employees.every((employee: Employee) => employee.salary > 40000);
//Output false

employees.every((employee: Employee) => employee.salary < 50000);
//Output true

La méthode renvoie true si tous les éléments respectent la condition passée en paramètre, sinon elle renvoie false.

Tips

Il est possible d’extraire la condition dans une fonction afin d’alléger le code comme dans l’exemple suivant.

const condition = (element: Employee) => element.salary > 40000;

employees.every(condition);
// Output false

6. includes

La méthode includes permet de vérifier qu’un élément est contenu dans un tableau. Cette méthode s’applique principalement sur les tableaux de primitives telles que number ou string.

Prenons comme exemple le cas suivant. Cherchons si un prénom est présent dans un tableau.

const names: string[] = ["Patrick", "Berth", "Alexandre"];

names.includes("Patrick");
// Output true

names.includes("Nicolas");
// Output false

La méthode includes renvoie true si l’élément est trouvé et false s’il n’est pas dans le tableau.

Il est possible de renseigner un deuxième paramètre à la méthode includes qui correspond à l’index du tableau auquel la recherche va commencer

const names: string[] = ["Patrick", "Berth", "Alexandre"];

names.includes("Patrick", 1);
// Output false

names.includes("Berth", 1);
// Output true

Conclusion

Nous avons vu 6 méthodes JavaScript permettant de faire des recherches dans un tableau. Utilisez ces méthodes vous permettra d’écrire du code de meilleur qualité qui sera plus concis et lisible.