Introduction
Les méthodes présentées dans cet article sont indispensables pour écrire un code JavaScript élégant et performant lorsqu’il s’agit de traiter des tableaux. Connaitre ces méthodes vous simplifiera grandement la vie. N’inventez plus la roue et gagnez du temps !
Méthodes de traitements
Les méthodes de cette section sont dédiées au traitement de tableau. Que vous ayez besoin de filtrer, modifier ou calculer des éléments d’un tableau, c’est bien vers ces méthodes que vous devrez vous tourner.
Afin de simplifier la compréhension, nous prendrons le tableau suivant comme exemple pour cette section.
const employees = [
{
id: 1,
name: "Patrick",
salary: 42000,
},
{
id: 2,
name: "Berth",
salary: 44000,
},
{
id: 3,
name: "Alexandre",
salary: 38000,
},
];
⚡ 1. filter
La méthode filter permet de filtrer un tableau afin de ne garder que les éléments qui respectent une condition.
Paramètre
- fonction callback qui renvoie un Boolean Cette fonction représente la condition à remplir pour filtrer les éléments.
Return
- copie du tableau original filtré Cette méthode créée une copie du tableau original, il n’y a donc aucun risque d’altérer le tableau que vous filtrez.
Code
Dans cet exemple, nous voulons garder tous les salariés gagnant plus de 38000.
const result = employees.filter(employee => employee.salary > 38000);
console.log(result);
// Output :
[
{
id: 1,
name: "Patrick",
salary: 42000,
},
{
id: 2,
name: "Berth",
salary: 44000,
}
]
⚡ 2. map
La méthode map permet d’appliquer un traitement sur chaque élément d’un tableau.
Paramètre
- fonction callback qui renvoie l’élément modifié
Return
- une copie du tableau original traité avec la fonction callback
Cette méthode créée une copie du tableau original, il n’y a donc aucun risque d’altérer le tableau que vous mappez.
Code
Dans cet exemple, nous voulons augmenter de 2000 le salaire de tous les employés du tableau employees.
const result = employees.map(employee => employee.salary += 2000);
console.log(result);
// Output :
[
{
id: 1,
name: "Patrick",
salary: 44000,
},
{
id: 2,
name: "Berth",
salary: 46000,
},
{
id: 3,
name: "Alexandre",
salary: 40000,
},
]
⚡ 3. reduce
La méthode reduce permet de faire des calculs sur les éléments d’un tableau et de renvoyer une valeur que l’on appel l’accumulateur. La méthode reduce fait perdre une dimension en passant d’un tableau à une valeur.
Paramètres
- fonction callback qui prend en paramètre l’élément du tableau actuel et l’accumulateur. Cette fonction renvoie la valeur de l’accumulateur après le traitement réalisé.
- valeur initiale de l’accumulateur
Return
- la valeur finale de l’accumulateur
Code
Dans cet exemple, nous voulons calculer la somme des salaires de tous les employés du tableau employee. Ici le count est l’accumulateur et employee sont les éléments successifs du tableau employees.
const result = employees.map((count, employee) => count += employee.salary, 0);
console.log(result);
// Output : 130000
Recherche dans un tableau
Les méthodes qui suivent permettent de détecter la présence d’élément dans un tableau, de récupérer une valeur ou encore la position d’un élément dans un tableau.
⚡ 4. indexOf
La méthode indexOf permet de retrouver l’indice de la première occurrence d’un élément dans un tableau.
Paramètre
- l’élément recherché
Return
- indice de l’élément s’il est trouvé
- -1 s’il n’est pas trouvé
Code
[🍟, 🥗, 🍫].indexOf(🥗)
// Output 1
⚡ 5. find
La méthode find permet de trouver la première occurrence d’un tableau qui respecte une condition
Paramètre
- fonction callback qui renvoie un Boolean. Cette fonction représente la condition à remplir pour trouver l’élément.
Return
- l’élément s’il remplit la condition
- undefined si aucun élément du tableau ne respecte la condition
Code
[🍟, 🥗, 🍫].find(🥗)
// Output 🥗
⚡ 6. at
La fonction at permet d’obtenir l’élément situé à un indice.
Paramètre
- indice
Return
- élément du tableau à l’indice demandé
- undefined si l’élément n’existe pas (indice en dehors du tableau)
Code
[🍟, 🥗, 🍫].at(2)
// Output 🍫
Important : La fonction at permet de faire une recherche depuis la fin du tableau. Si l’indice passé en paramètre est négatif, le décompte sera effectué depuis la fin du tableau. On obtient alors :
// Ces deux codes font la même chose
array.at(-2)
array[array.length - 2]
⚡ 7. some
La méthode some permet de vérifier qu’au moins une occurrence du tableau respecte une condition.
Paramètre
- fonction callback qui renvoie un Boolean. Cette fonction est la condition à remplir.
Return
- true si au moins une occurrence du tableau respecte la condition
- false si aucune occurrence du tableau ne respecte la condition
Code
[🍟, 🥗, 🍫].some(🍫)
// Output true
[🍟, 🥗, 🍫].some(🍰)
// Output false
⚡ 8. every
La méthode every permet de vérifier que toutes les occurrences d’un tableau respectent une condition.
Paramètre
- fonction callback qui renvoie un Boolean. Cette fonction est la condition à remplir.
Return
- true si toutes les occurrences du tableau respectent la condition
- false si au moins une occurrence du tableau ne respecte pas la condition
Code
[🍟, 🥗, 🍫].every(🍫)
// Output false
[🍫, 🍫, 🍫].every(🍫)
// Output true
⚡ 9. includes
La méthode includes permet de vérifier si un élément est contenu dans un tableau.
Paramètre
- l’élément à tester
Return
- true si l’élément est inclus dans le tableau
- false si l’élément n’est pas inclus dans le tableau
Code
[🍟, 🥗, 🍫].includes(🍫)
// Output true
[🍟, 🥗, 🍫].includes(🍰)
// Output false
Traiter les tableaux comme une pile
Les méthodes suivantes permettent d’effectuer des opérations sur des tableaux afin de les traiter comme une pile ou encore une queue qui sont deux structures de données très utiles en programmation.
⚡ 10. push
La méthode push permet d’ajouter un élément à la fin d’un tableau.
Paramètre
- élément à ajouter
Return
- taille du tableau après l’ajout du nouvel élément
⚠️ Cette méthode ne renvoie pas de copie et modifie le tableau original.
Code
[🍟, 🥗].push(🍫);
// Output : 3
// Tableau [🍟, 🥗, 🍫]
⚡ 11. pop
La méthode pop permet de supprimer le dernier élément d’un tableau et d’en récupérer sa valeur.
Return
- l’élément supprimé
⚠️ Cette méthode ne renvoie pas de copie et modifie le tableau original.
Code
[🍟, 🥗, 🍫].pop();
// Output : 🍫
// Tableau [🍟, 🥗]
⚡ 12. shift
La méthode shift permet de retirer le premier élément d’un tableau et de récupérer sa valeur.
Return
- taille du tableau après suppression du premier élément
⚠️ Cette méthode ne renvoie pas de copie et modifie le tableau original.
Code
[🍟, 🥗, 🍫].shift();
// Output : 🍟
// Tableau [🥗, 🍫]
⚡ 13. unshift
La méthode unshift permet d’insérer un élément ou plusieurs éléments au début d’un tableau.
Paramètre
- élément(s) à ajouter
Return
- taille du tableau après l’ajout du ou des éléments
⚠️ Cette méthode modifie le tableau original.
Code
[🍟, 🥗].unshift(🍫, 🍩);
// Output : 4
// Tableau [🍫, 🍩, 🍟, 🥗]
⚡ 14. reverse
La fonction reverse comme son nom l’indique permet d’inverser l’ordre des éléments d’un tableau.
Return
Cette fonction retourne le tableau original inversé.
⚠️ Cette méthode ne renvoie pas de copie et modifie le tableau original.
Code
[🍟, 🥗, 🍫].reverse()
// Output [🍫, 🥗, 🍟]
Un “p” qui fait la différence
⚡ 15. splice
La méthode splice permet de supprimer des éléments d’un tableau et en insérer d’autres.
Paramètres
- indice de début
- nombre d’éléments à supprimer
- élément à ajouter (optionnel)
Return
Le tableau des éléments supprimés
Code
La méthode splice permet de faire plusieurs opérations différentes, voici quelques exemples d’utilisation
⚠️ Cette méthode ne renvoie pas de copie et modifie le tableau original.
Insérer un ou plusieurs éléments
// 1 : indice de départ
// 0 : nombre d'éléments supprimés
// 🍩, 🍰 : éléments à insérer à l'indice 1
[🍟, 🥗, 🍫].splice(1, 0, 🍩, 🍰)
// Output []
// Tableau [🍟, 🍩, 🍰, 🥗, 🍫]
// ============================================
// 0 : indice de départ
// 0 : nombre d'éléments supprimés
// 🍩, 🍰 : éléments à insérer à l'indice 0
[🍟, 🥗, 🍫].splice(0, 0, 🍩, 🍰)
// Output []
// Tableau [🍩, 🍰, 🍟, 🥗, 🍫]
Supprimer un ou plusieurs éléments
// 1 : indice de départ
// 1 : nombre d'éléments supprimés
[🍟, 🥗, 🍫].splice(1, 1)
// Output [🥗]
// Tableau [🍟, 🍫]
// ============================================
// 1 : indice de départ
// 2 : nombre d'éléments supprimés
[🍟, 🥗, 🍫].splice(1, 2)
// Output [🥗, 🍫]
// Tableau [🍟]
Combo : supprimer et insérer un ou plusieurs éléments
// 1 : indice de départ
// 1 : nombre d'éléments supprimés
// 🍩 : éléments à insérer à l'indice 1
[🍟, 🥗, 🍫].splice(1, 1, 🍩)
// Output [🥗]
// Tableau [🍟, 🍩, 🍫]
// ============================================
// 1 : indice de départ
// 2 : nombre d'éléments supprimés
// 🍩 : éléments à insérer à l'indice 1
[🍟, 🥗, 🍫].splice(1, 2, 🍩)
// Output [🥗, 🍫]
// Tableau [🍟, 🍩]
// ============================================
// 1 : indice de départ
// 1 : nombre d'éléments supprimés
// 🍩, 🍰 : éléments à insérer à l'indice 1
[🍟, 🥗, 🍫].splice(1, 1, 🍩, 🍰)
// Output [🥗]
// Tableau [🍟, 🍩, 🍰, 🍫]
⚡ 16. slice
La méthode slice permet d’obtenir une copie partielle d’un tableau en définissant la section du tableau souhaité [indice de début, indice de fin[.
Paramètres
- indice de début (optionnel)
- indice de fin (optionnel)
⚠️ l’indice de fin est exclu de la copie !
Return
- Une copie partielle du tableau original
Code
[🍟, 🥗, 🍫].slice()
// Output [🍟, 🥗, 🍫]
// Tableau [🍟, 🥗, 🍫]
[🍟, 🥗, 🍫].slice(1)
// Output [🥗, 🍫]
// Tableau [🍟, 🥗, 🍫]
[🍟, 🥗, 🍫].slice(0,2)
// Output [🍟, 🥗]
// Tableau [🍟, 🥗, 🍫]
Conclusion
Nous avons vu les méthodes les plus importantes à connaitre sur les tableaux JavaScript. Ces méthodes vous permettront de faire 99% des traitements que vous avez besoin de faire sur un tableau. En combinant ces méthodes, vous obtiendrez un code facile à lire qui est robuste.