Introduction

Dans cet article, je vais vous présenter 10 méthodes de gestion de talbeau dans Javascript. Il y en a bien sur beaucoup d'autres. Je vous fournis également d'autres ressources en bas de page.

Tableau de départ

On va se baser sur ce tableau d'objet pour bien comprendre le fonctionnement des tableaux.

export interface Hero {
  name: string;
  strength: number;
}

heroes: Hero[] = [
    { name: 'Hulk', strength: 90000 },
    { name: 'Spider-Man', strength: 25000 },
    { name: 'Hawk Eye', strength: 136 },
    { name: 'Thor', strength: 100000 },
    { name: 'Black Widow', strength: 136 },
    { name: 'Vision', strength: 5000 },
    { name: 'Scarlet Witch', strength: 60 },
    { name: 'Mystique', strength: 120 },
    { name: 'Namora', strength: 75000 },
    { name: 'Captain America', strength: 362 },
    { name: 'Deadpool', strength: 1814 },
    { name: 'Black Panther', strength: 1814 },
];

extras: Hero[] = [
    { name: 'Test1', strength: 300 },
    { name: 'Test2', strength: 100 },
];

1 - Find

La méthode find va renvoyer la valeur du premier élément trouvé dans le tableau, qui respecte la condition donnée par la fonction passée en argument. Sinon undefined est renvoyé.

this.heroes.find((n) => n.name === 'Hulk'); // {name: "Hulk", strength: 90000}
this.heroes.find((n) => n.name === 'TestHulk'); // renvoie undefined

2 - Map

Map va créer un nouveau tableau avec les résultats de l'appel de la fonction fournie sur chaque élément du tableau d'entrée.

this.heroes.map((h) => h.name);
// ["Hulk", "Spider-Man", "Hawk Eye", "Thor", "Black Widow", "Vision", 
// "Scarlet Witch", "Mystique", "Namora", "Captain America", "Deadpool", "Black Panther"]

3 - Filter

La méthode filter prend le tableau d'origine et retire les élément dont on a pas besoin

this.heroes.filter((h) => h.strength >= 1000); 
//  Va renvoyer un tableau avec les héros dont la force est supérieure ou égale à 1000 

4 - Concat

La méthode concat permet de créer un nouveau tableau en fusionnant le tableau d'origine et celui passé en paramètre.

this.heroes.concat(this.extras);
//  Va rajouter des éléments au tableau, ici le tableau d'extras

5- Fill

La méthode fill remplit tous les éléments d'un tableau entre deux index. Cette méthode renvoie le tableau modifié.

this.heroes.fill({ name: 'TESTFILL', strength: 300 }, 0, 2);
// Va remplacer les deux premiers objects du tableau avec l'objet passé en argument. 
//0 et 2 sont des index

6 - Some

La méthode some va tester si au moins un élément du tableau est implementé par la fonction fournie. Renvoi un booléen

this.heroes.some((x) => x.name === 'Deadpool');
// renvoie true
this.heroes.some((x) => x.name === 'Test');
// renvoie false

7 - FindIndex

La méthode findIndex va renvoyer l'index du premier élément qui correspond à la condition.

this.heroes.findIndex((x) => x.name === 'Deadpool');
// renvoie 10

8 - Join

La méthode join va concaténer tous les éléments d'un tableau avec l'élément passé en argument comme séparateur.

 this.heroes.map((n) => n.name).join('\n');
// Ici cela retourne la liste avec un saut de ligne entre chaque nom

9 - Push

La méthode push va ajouter un ou plusieurs éléments à la fin du tableau. Renvoie la nouvelle taille du tableau.

this.heroes.push({ name: 'Test push', strength: 0 })
// Rajoute cet object à la fin du tableau.

10 - Shift

La méthode shift permet de retirer le premier élément du tableau et de renvoyer cet élement.

this.heroes.shift()

Conclusion

Les méthodes d'array sont très utiles lorsque l'on manipule les données, ces méthodes peuvent aussi s'imbriquer les unes aux autres :

var test = this.heroes
    .filter((x) => x.name.includes('w'))
    .map((x) => x.name)
    .join(' - ');
// Hawk Eye - Black Widow

Ressources

https://www.w3schools.com/js/js_array_methods.asp

https://www.freecodecamp.org/news/the-javascript-array-handbook/