En JavaScript, un tableau est une variable spéciale qui est utilisée pour stocker différents éléments. Il possède des propriétés et des méthodes intégrées que nous pouvons utiliser pour ajouter, supprimer, itérer ou manipuler des données selon nos besoins. Et la connaissance des méthodes de tableau javaScript peut vraiment améliorer vos compétences en tant que développeur.
Dans cet article, nous allons voir 15 méthodes de tableau qui peuvent vous aider à manipuler correctement vos données.
Sorry for the interrupt!
If you're interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)
It's an affiliate link, so by purchasing, you support the blog at the same time.- 1. some()
- 2. reduce()
- 3. every()
- 4. map()
- 5. flat()
- 6. filter()
- 7. forEach()
- 8. findIndex()
- 9. find()
- 10. sort()
- 11. concat()
- 12. fill()
- 13. includes()
- 14. reverse()
- 15. flatMap()
Notez que dans cet article, pour la plupart du temps, nous allons simplifier la fonction passée en paramètre.
// Au lieu d'utiliser cette manière
myAwesomeArray.some(test => {
if (test === "d") {
return test
}
})
// Nous allos utiliser celui-ci
myAwesomeArray.some(test => test === "d")1. some()
Cette méthode teste le tableau avec une fonction passée en paramètre. Il renverra true si au moins un élément correspond au test et false pour le contraire.
const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.some(test => test === "d")
//-------> Sortie : true2. reduce()
Cette méthode reçoit une fonction qui posséde un accumulateur et une valeur comme argument. Il applique la fonction à l'accumulateur et à chaque valeur du tableau pour renvoyer à la fin une seule valeur.
const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.reduce((total, value) => total * value)
// 1 * 2 * 3 * 4 * 5
//-------> Sortie = 1203. every()
Cette méthode teste le tableau avec une fonction passée en paramètre. Il renverra true si chaque élément du tableau correspond au test et false pour le contraire.
const myAwesomeArray = ["a", "b", "c", "d", "e"]
myAwesomeArray.every(test => test === "d")
//-------> Sortie : false
const myAwesomeArray2 = ["a", "a", "a", "a", "a"]
myAwesomeArray2.every(test => test === "a")
//-------> Sortie : true4. map()
Cette méthode reçoit une fonction en paramètre. Et renvoyez un nouveau tableau qui contient une image de chaque élément du tableau. Il retournera toujours le même nombre d'articles.
const myAwesomeArray = [5, 4, 3, 2, 1]
myAwesomeArray.map(x => x * x)
//-------> Sortie : 25
// 16
// 9
// 4
// 15. flat()
Cette méthode crée un nouveau tableau contenant les éléments et les sous-tableaux. Et, il les aplatit dans un nouveau tableau. A noter que cette méthode n'atteindra qu'un seul niveau de profondeur.
const myAwesomeArray = [[1, 2], [3, 4], 5]
myAwesomeArray.flat()
//-------> Sortie : [1, 2, 3, 4, 5]6. filter()
Cette méthode reçoit une fonction en paramètre. Et retourne un nouveau tableau qui contient tous les éléments du tableau pour lesquels la fonction de filtrage passée en argument renvoie true.
const myAwesomeArray = [
{ id: 1, name: "john" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
{ id: 4, name: "Mass" },
]
myAwesomeArray.filter(element => element.name === "Mass")
//-------> Sortie : 0:{id: 3, name: "Mass"},
// 1:{id: 4, name: "Mass"}7. forEach()
Cette méthode applique une fonction à chaque élément du tableau.
const myAwesomeArray = [
{ id: 1, name: "john" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
]
myAwesomeArray.forEach(element => console.log(element.name))
//-------> Sortie : john
// Ali
// Mass8. findIndex()
Cette méthode reçoit une fonction comme paramètre et l'applique au tableau. Il retourne l'index d'un élément trouvé et qui satisfait la fonction de test passée en argument ou -1 si aucun ne le satisfait.
const myAwesomeArray = [
{ id: 1, name: "john" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
]
myAwesomeArray.findIndex(element => element.id === 3)
//-------> Sortie : 2
myAwesomeArray.findIndex(element => element.id === 7)
//-------> Sortie : -19. find()
Cette méthode reçoit une fonction comme argument et l'applique au tableau. Il renvoie la valeur d'un élément trouvé dans le tableau et qui satisfait la fonction de test. Sinon, il retourne undefined.
const myAwesomeArray = [
{ id: 1, name: "john" },
{ id: 2, name: "Ali" },
{ id: 3, name: "Mass" },
]
myAwesomeArray.find(element => element.id === 3)
//-------> Sortie : {id: 3, name: "Mass"}
myAwesomeArray.find(element => element.id === 7)
//-------> Sortie : undefined10. sort()
Cette méthode reçoit une fonction en paramètre. Il trie les éléments d'un tableau et les renvoie.
const myAwesomeArray = [5, 4, 3, 2, 1]
// Tri du plus petit au plus grand
myAwesomeArray.sort((a, b) => a - b)
//-------> Sortie : [1, 2, 3, 4, 5]
// Tri du plus grand au plus petit
myAwesomeArray.sort((a, b) => b - a)
//-------> Sortie : [5, 4, 3, 2, 1]11. concat()
Cette méthode fusionnera deux ou plusieurs tableaux / valeurs en les concaténant. Il renvoie un nouveau tableau avec les éléments.
const myAwesomeArray = [1, 2, 3, 4, 5]
const myAwesomeArray2 = [10, 20, 30, 40, 50]
myAwesomeArray.concat(myAwesomeArray2)
//-------> Sortie : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50]12. fill()
Cette méthode remplit tous les éléments d'un tableau donné avec la même valeur, d'un index de début (par défaut 0) à un index de fin (par défaut la longueur du tableau).
const myAwesomeArray = [1, 2, 3, 4, 5]
// Le premier argument (0) est la valeur
// Le deuxième argument (1) est l'idex de début
// Le troisième argument (3) est l'index fin
myAwesomeArray.fill(0, 1, 3)
//-------> Sortie : [1, 0, 0, 4, 5]13. includes()
Cette méthode retournera true si le tableau contient un certain élément, et false au cas contraire.
const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.includes(3)
//-------> Output : true
myAwesomeArray.includes(8)
//-------> Output : false14. reverse()
Cette méthode inverse un tableau. Le premier élément devient le dernier et le dernier élément sera le premier.
const myAwesomeArray = ["e", "d", "c", "b", "a"]
myAwesomeArray.reverse()
//-------> Sortie : ['a', 'b', 'c', 'd', 'e']15. flatMap()
La méthode applique une fonction à chaque élément du tableau, puis aplatit le résultat dans un tableau. Il combine flat () et map () dans une seule fonction.
const myAwesomeArray = [[1], [2], [3], [4], [5]]
myAwesomeArray.flatMap(arr => arr * 10)
//-------> Sortie : [10, 20, 30, 40, 50]
// Avec .flat() et .map()
myAwesomeArray.flat().map(arr => arr * 10)
//-------> Sortie : [10, 20, 30, 40, 50]