15 méthodes JavaScript pour travailler avec des tableaux que vous devez connaître en 2020

Voici une traduction d'un article publié sur dev.to. Publié par: Ibrahima Ndaw .
L'original est publié sur le blog de l'auteur.

Un tableau en JavaScript est une structure de données spéciale qui est utilisée pour stocker divers éléments. En utilisant les propriétés et méthodes intégrées, vous pouvez ajouter, supprimer, itérer ou traiter des données selon vos besoins. Savoir comment travailler avec des tableaux en JavaScript fera passer vos compétences de développement professionnel au niveau supérieur.

Dans cet article, nous couvrirons 15 méthodes qui vous aideront à travailler plus efficacement avec des tableaux en JavaScript.



Veuillez noter que, fondamentalement, nous simplifierons la fonction transmise en paramètre.

// Instead of using this way myAwesomeArray.some(test => { if (test === "d") { return test } }) // We'll use the shorter one myAwesomeArray.some(test => test === "d") 

1. certains ()

Cette méthode vérifie si un élément du tableau satisfait la condition spécifiée dans la fonction passée. Il retournera true si au moins un élément correspond à la fonction testée, et false sinon.

 const myAwesomeArray = ["a", "b", "c", "d", "e"] myAwesomeArray.some(test => test === "d") //-------> Output : true 

2. réduire ()

Cette méthode prend une fonction qui prend un accumulateur et une valeur comme argument. Il applique la fonction à l'accumulateur et à chaque valeur du tableau, afin de ne renvoyer qu'une seule valeur en conséquence.

 const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.reduce((total, value) => total * value) // 1 * 2 * 3 * 4 * 5 //-------> Output = 120 

3. chaque ()

Cette méthode vérifie si tous les éléments du tableau satisfont à la condition spécifiée dans la fonction transmise. Il retournera true si chaque élément correspond à la fonction testée, et false sinon.

 const myAwesomeArray = ["a", "b", "c", "d", "e"] myAwesomeArray.every(test => test === "d") //-------> Output : false const myAwesomeArray2 = ["a", "a", "a", "a", "a"] myAwesomeArray2.every(test => test === "a") //-------> Output : true 

4. map ()

Cette méthode prend une fonction comme paramètre et crée un nouveau tableau avec le résultat d'appeler la fonction spécifiée pour 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) //-------> Output : 25 // 16 // 9 // 4 // 1 

5. plat ()

Cette méthode prend un tableau de tableaux comme argument et lisse les tableaux imbriqués dans un tableau de niveau supérieur. Veuillez noter que cette méthode ne fonctionne que pour un seul niveau.

 const myAwesomeArray = [[1, 2], [3, 4], 5] myAwesomeArray.flat() //-------> Output : [1, 2, 3, 4, 5] 

6. filtre ()

Cette méthode prend une fonction comme paramètre et renvoie un nouveau tableau contenant tous les éléments du tableau pour lequel la fonction de filtre a été passée en argument, et la renvoie avec 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") //-------> Output : 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)) //-------> Output : john // Ali // Mass 

8. findIndex ()

Cette méthode prend une fonction comme paramètre, puis l'applique au tableau. Il retourne l'index de l'élément trouvé si l'élément satisfait la condition de la fonction de vérification passée en argument. S'il n'est pas satisfait, –1 renvoyé.

 const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.findIndex(element => element.id === 3) //-------> Output : 2 myAwesomeArray.findIndex(element => element.id === 7) //-------> Output : -1 

9. find ()

Cette méthode prend une fonction comme argument, puis l'applique au tableau. Il renvoie la valeur de l'élément trouvé dans le tableau si l'élément satisfait la condition de la fonction de vérification. Sinon, il revient avec la valeur undefined .

 const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.find(element => element.id === 3) //-------> Output : {id: 3, name: "Mass"} myAwesomeArray.find(element => element.id === 7) //-------> Output : undefined 

10. sort ()

Cette méthode prend une fonction comme paramètre. Il trie les éléments du tableau et les renvoie.

 const myAwesomeArray = [5, 4, 3, 2, 1] // Sort from smallest to largest myAwesomeArray.sort((a, b) => a - b) //-------> Output : [1, 2, 3, 4, 5] // Sort from largest to smallest myAwesomeArray.sort((a, b) => b - a) //-------> Output : [5, 4, 3, 2, 1] 

11. concat ()

Cette méthode combine deux ou plusieurs tableaux / valeurs et renvoie un nouveau tableau.

 const myAwesomeArray = [1, 2, 3, 4, 5] const myAwesomeArray2 = [10, 20, 30, 40, 50] myAwesomeArray.concat(myAwesomeArray2) //-------> Output : [1, 2, 3, 4, 5, 10, 20, 30, 40, 50] 

12. fill ()

Cette méthode remplit tous les éléments du tableau avec la même valeur, de l'index de départ (par défaut 0) à l'index de fin (tableau par défaut.length).

 const myAwesomeArray = [1, 2, 3, 4, 5] // The first argument (0) is the value // The second argument (1) is the starting index // The third argument (3) is the ending index myAwesomeArray.fill(0, 1, 3) //-------> Output : [1, 0, 0, 4, 5] 

13. comprend ()

Cette méthode renvoie true si le tableau contient un élément spécifique et false sinon.

 const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.includes(3) //-------> Output : true myAwesomeArray.includes(8) //-------> Output : false 

14. reverse ()

Cette méthode inverse l'ordre des éléments du tableau. Le premier élément devient le dernier et le dernier devient le premier.

 const myAwesomeArray = ["e", "d", "c", "b", "a"] myAwesomeArray.reverse() //-------> Output : ['a', 'b', 'c', 'd', 'e'] 

15. flatMap ()

Cette méthode applique une fonction à chaque élément du tableau, puis lisse le résultat dans un nouveau tableau. Il combine la méthode flat() et la méthode map() en une seule fonction.

 const myAwesomeArray = [[1], [2], [3], [4], [5]] myAwesomeArray.flatMap(arr => arr * 10) //-------> Output : [10, 20, 30, 40, 50] // With .flat() and .map() myAwesomeArray.flat().map(arr => arr * 10) //-------> Output : [10, 20, 30, 40, 50]