[2/4] Passez de zéro à héros avec ces méthodes JavaScript
Tags: javascript, beginners, french
Published: 2023-03-11 18:58:08

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

&nbsp;
# Données d’exemple

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

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

&nbsp;
# 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.

```tsx
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.

```tsx
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.

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

&nbsp;
# 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. 

```tsx
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**.

```tsx
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.

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

employees.find(condition);
```

&nbsp;
# 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.

```tsx
// 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.

```tsx
// 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.

&nbsp;
# 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.

```tsx
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.

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

employees.some(condition);
// Output true
```

&nbsp;
# 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.

```tsx
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.

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

employees.every(condition);
// Output false
```

&nbsp;
# 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.

```tsx
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

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

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

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

&nbsp;
# 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**.