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.