Le traitement des tableaux en Javascript peut être complexes dans certains cas. Dans ce tutoriel, nous allons parcourir ensemble des méthodes Javascript qui vont nous permettre de parcourir un tableau et exécuter des actions sur chaque élément du tableau. Nous pourrons par exemple avec ces méthodes trier un tableau, retirer tous les doublons d'un tableau et bien d'autres choses.
Aller c'est parti!
1. Array.concat()
Nous allons commencer tout simplement, la fonction concat() permet tout simplement de concatener deux tableaux (ajouter un tableau à un autre). Elle prend en paramètre le tableau à ajouter à la fin. Sa syntaxe est la suivante:
array1.concat(array2)Le tableau array2 est alors rajouter à la fin du tableau array1.
Cette méthode ne modifie aucun des deux tableaux, mais crée un nouveau tableau et y met le tableau créé. Disons que nous avons deux tableaux qui contiennent le prénom de nos amis comme ceci:
let users1 = ['Moussa', 'Adama', 'Djiby', 'Moustapha', 'Binta']
let users2 = ['Ahmed', 'Elvis', 'Fanta', 'Moustapha']Nous voulons maintenant avoir un seul tableau qui regroupe les deux, pour cela on utilise la fonction concat() comme ceci:
let users = users1.concat(users2)
console.log(users)
/*
[
'Moussa',
'Adama',
'Djiby',
'Moustapha',
'Binta',
'Ahmed',
'Elvis',
'Fanta',
'Moustapha'
]
*/Pour eviter les doublons, nous pouvons utiliser les sets comme ceci:
let users = [...new Set(users1.concat(users2))]
console.log(users)Alors pour ceux qui sont un peu perdus, un Set retourne un objet qui ne contient que des valeurs unique. Si nous faisons donc:
let users = new Set(users1.concat(users2))
console.log(users)
/*
{
'Moussa',
'Adama',
'Djiby',
'Moustapha',
'Binta',
'Ahmed',
'Elvis',
'Fanta'
}
*/A ce niveau, notre variable users est un objet qui contient des valeurs uniques (le nom de nos amis sans doublon), nous utilisons ensuite le spread operator pour transformer cet objet en tableau:
let users = new Set(users1.concat(users2))
users = [...users]
console.log(users)
/*
[
'Moussa',
'Adama',
'Djiby',
'Moustapha',
'Binta',
'Ahmed',
'Elvis',
'Fanta'
]
*/C'est ce que nous avons donc écrit en une seule ligne:
let users = [...new Set(users1.concat(users2))]La documentation sur la méthode array.concat().
2. Array.every()
Disons que nous avons une liste d'utilisateurs, les utilisateurs de notre site par exemple, nous voulons vérifier s'ils ont tous 20 ans ou plus. Nous pouvons utiliser une boucle for() et faire le test sur chaque élément, ou encore la boucle forEach(). Voyons voir ces deux manières de faire. Voici la liste de nos utilisateurs:
let users = [
{
name: 'Moussa',
age: 22,
},
{
name: 'Adama',
age: 27,
},
{
name: 'Djiby',
age: 30,
},
{
name: 'Moustapha',
age: 22,
},
{
name: 'Binta',
age: 25,
},
{
name: 'Ahmed',
age: 18,
},
{
name: 'Elvis',
age: 25,
},
]D'abord la boucle for():
let allMajor = true
for (let i = 0; i < users.length; i++) {
if (users[i].age < 20) {
allMajor = false
}
}
console.log(allMajor) // falseCela marche bien, voyons aussi la boucle forEach():
let allMajor = true
users.forEach(user => {
if (user.age < 20) {
allMajor = false
}
})
console.log(allMajor) // falseLà aussi, ça marche, seul problème avec la boucle forEach(), nous n'avons aucun moyen d'arrêter et sortir de la boucle à moins de lever une exception. Ce qui n'est pas très pratique dans notre cas, parce qu'on aimerait arrêter la boucle et retourner false dès qu'on trouve un utilisateur qui a moins de 20 ans.
La méthode que je vais vous présenter c'est d'utiliser la fonction every(), cette méthode va parcourir tous les éléments du tableau un par un et exécuter le callback jusqu'à ce que la valeur de retour soit fausse, et dans ce cas la méthode every() arrête son exécution et retourne directement faux. Si tous les retours du callback sont vrais, alors la fonction retourne vrai.
let allMajor = users.every(user => user.age >= 20)
console.log(allMajor)Bluffant right? Nous avons ce que nous voulons en une seule ligne.
La documentation sur la methode array.every().
3. Array.some()
Nous allons ensuite enchaîner avec la méthode some(). Cette méthode fonctionne un peu comme la méthode every(). La methode some() exécute la méthode callback sur tous les éléments du tableau un par un et si la fonction callback renvoie vrai une seule fois, la fonction some() arrête son exécution et retourne vrai, si le callback ne renvoie vrai à aucun moment, la méthode some() retourne donc faux. La methode some() vérifie si un seul élément vérifie une condition. Dans notre cas, nous allons vérifier s'il y a une personne de moins de 20 ans dans notre tableau d'utilisateurs. Nous allons utiliser le même tableau users de l'exemple précédent .
const isThereAnInfant = users.some(user => user.age < 20)
console.log(isThereAnInfant) // trueLa documentation sur la methode array.some().
4. Array.filter()
La méthode filter() va nous permettre de filtrer un tableau. Cette méthode crée et retourne tous les éléments du tableau d'origine qui remplissent la condition défini par le callback.
Continuons toujours avec notre tableau d'utilisateurs, on s'est rendu compte que ce tableau contient des utilisateurs qui ont moins de 20 ans, nous allons donc utiliser la méthode filter() sur le tableau d'utilisateurs pour ne retourner que les utilisateurs qui ont plus de 20 ans.
const majorUsers = users.filter(user => user.age >= 20)
console.log(majorUsers)
/*
[
{ name: 'Moussa', age: 22 },
{ name: 'Adama', age: 27 },
{ name: 'Djiby', age: 30 },
{ name: 'Moustapha', age: 22 },
{ name: 'Binta', age: 25 },
{ name: 'Elvis', age: 25 }
]
*/Le tableau majorUsers[] ne contient que les utilisateurs qui ont plus de 20 ans.
La documentation sur la methode array.filter().
5. Array.map()
La méthode map() crée un nouveau tableau qui contient la valeur de retour de la fonction callback. Comme les méthodes précédentes, la fonction map() va parcourir le tableau et exécuter des actions sur chaque élément du tableau, puis créer un nouveau tableau pour enregistrer les valeurs que retourne la fonction callback. La fonction doit donc forcément retourner quelque chose sinon vous aurez un tableau rempli de undefined.
Revenons sur notre liste d'utilisateurs, disons que nous voulons juste récupérer le nom des utilisateurs, en utilisant les boucles for() ou forEach(), nous allons nous même créer un tableau et utiliser la méthode push() pour écrire dans ce tableau, avec la methode map(), nous allons faire:
const usersName = users.map(user => user.name)
console.log(usersName)
/*
[
'Moussa',
'Adama',
'Djiby',
'Moustapha',
'Binta',
'Ahmed',
'Elvis'
]
*/Le tableau usersName[] contient uniquement le nom des utilisateurs.
Nous allons voir un autre cas d'utilisation, cette fois ci nous allons utiliser un tableau qui contient des nombres, nous allons créer un deuxième tableau qui contient le carré de tous les nombres qui se trouvent dans le premier tableau:
const numbers = [4, 5, 10, 1, 2]
const squares = numbers.map(n => n * n)
console.log(squares) // [ 16, 25, 100, 1, 4 ]Et voilà.
La documentation sur la methode array.map().
6. Array.reduce()
La méthode reduce() prend toutes les valeurs d'un tableau et les réduit en un seul élément, on peut par exemple l'utiliser pour faire la somme de tous les éléments d'un tableau d'entiers comme ceci:
const numbers = [4, 5, 10, 1, 2]
console.log(numbers.reduce((x, y) => x + y)) // 22La fonction reduce() prend en paramètre la fonction callback et la valeur initiale. Dans l'exemple précédent, la valeur initiale est de 0, si on initialise par exemple la valeur initiale a 10, on aura 32 au lieu de 22:
const numbers = [4, 5, 10, 1, 2]
console.log(numbers.reduce((x, y) => x + y, 10)) // 32La fonction callback prend 2 paramètres, l'accumulateur qui représente la valeur initiale pour le premier parcours ou la valeur accumulée lors des précédents parcours, et la valeur actuel.
Nous allons voir une utilisation pratique de la fonction reduce() maintenant. Nous avons un tableau de notes. Une note est un objet qui a deux valeurs: la valeur et le coefficient. Nous allons donc calculer la moyenne.
Pour calculer la moyenne, on divise la somme des notes multipliées par les coefficients par la somme des coefficients (je crois bien que c'est ça).
Pour commencer, nous allons utiliser deux méthodes reduce(), la première pour faire la somme des notes multipliées par les coefficients, la seconde fera la somme des coefficients:
const scores = [
{
value: 15,
coefficient: 4,
},
{
value: 19,
coefficient: 3,
},
{
value: 10,
coefficient: 1,
},
{
value: 9,
coefficient: 2,
},
{
value: 12,
coefficient: 2,
},
]
const average = parseFloat(
(
scores.reduce((acc, elt) => acc + elt.value * elt.coefficient, 0) /
scores.reduce((acc, elt) => acc + elt.coefficient, 0)
).toFixed(2)
)
console.log(average) // 14.08J'utilise la méthode toFixed() pour ne garder que deux valeurs après la virgule.
Une autre approche consiste à utiliser un objet comme accumulateur, nous allons garder dans cet objet la somme des notes multipliées par les coefficients et la somme des coefficients:
const score = scores.reduce(
({ value, coef }, elt) => {
return {
value: value + elt.value * elt.coefficient,
coef: coef + elt.coefficient,
}
},
{ value: 0, coef: 0 }
)
average = parseFloat((score.value / score.coef).toFixed(2))
console.log(average) // 14.08N'oublier pas d'initialiser les valeurs des accumulateurs à 0.
La documentation sur la methode array.reduce().
7. Array.reverse()
La methode reverse() transpose les éléments d'un tableau. Cette méthode agit directement sur le tableau, il va donc modifier le tableau sur lequel vous l'appelez.
const numbers = [0, 1, 2, 3, 4, 5]
console.log(numbers.reverse()) // [ 5, 4, 3, 2, 1, 0 ]La documentation sur la methode array.reverse().
8. Array.slice()
La methode slice() copie ou extrait une portion d'un tableau sans modifier le tableau sur lequel elle est appelée. La fonction prend deux paramètres, le premier c'est l'index à partir du quel on veut commencer l'extraction, le second est l'index ou il faut limiter l'extraction (l'element à cet index est exclue).
const numbers = [0, 1, 2, 3, 4, 5]
console.log(numbers.slice(2)) // [ 2, 3, 4, 5 ]
console.log(numbers.slice(2, 4)) // [ 2, 3 ]
console.log(numbers.slice(1, 5)) // [ 1, 2, 3, 4 ]
console.log(numbers.slice(-2)) // [ 4, 5 ]La documentation sur la methode array.slice().
9. Array.splice()
La methode splice() permet d'insérer de nouveaux éléments et/ou retirer des éléments dans un tableau. Cette méthode modifie directement le tableau sur lequel elle est appelée. La fonction splice() prend trois paramètres, l'indice à partir duquel on change le tableau, le nombre d'éléments à supprimer et le(s) element(s) à ajouter.
const numbers = [1, 2, 5, 4, 7]
numbers.splice(2, 1) // Supprimer un element à l'indice 2
console.log(numbers) // [ 1, 2, 4, 7 ]
numbers.splice(0, 0, 0) // Ajouter à l'indice 0 la valeur 0, supprimer 0 element
console.log(numbers) // [ 0, 1, 2, 4, 7 ]
numbers.splice(3, 0, 3) // Ajouter à l'indice 3 la valeur 3, supprimer 0 element
console.log(numbers) // [ 0, 1, 2, 3, 4, 7 ]
numbers.splice(5, 0, 5, 6) // Ajouter à l'indice 5, les valeurs 5 et 6
console.log(numbers) // [ 0, 1, 2, 3, 4, 5, 6, 7 ]La documentation sur la methode array.splice().
Voilà les quelques méthodes que je tenais à vous présenter. J'espère que vous avez aimer. N'oublier pas de consulter la documentation pour en apprendre plus sur ces fonctions et bien d'autres encore.
Si vous avez une question ou un feedback n'hésitez pas à laisser un commentaire ci-dessous.
Participe à la discussion