Les tableaux sont l'une des structures de données les plus couramment utilisées en JavaScript. Ils vous permettent de stocker plusieurs valeurs dans une seule variable et sont dotés d'un riche ensemble de fonctions intégrées qui rendent la manipulation et l'utilisation des données simples et efficaces. Dans cet article, nous explorerons en détail les fonctions de tableau JavaScript, en fournissant des explications, des exemples et des commentaires pour vous aider à les maîtriser.

Introduction aux tableaux en JavaScript

Un tableau est une collection ordonnée d'éléments pouvant contenir différents types de données, notamment des nombres, des chaînes, des objets et même d'autres tableaux.

let fruits = ["Apple", "Banana", "Cherry"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "Apple", true, {name: "John"}, [1, 2, 3]];

Création de tableaux

Les tableaux peuvent être créés à l'aide de littéraux de tableau ou du constructeur Array.

let arr1 = [1, 2, 3];
let arr2 = new Array(1, 2, 3);
console.log(arr1); // Output: [1, 2, 3]
console.log(arr2); // Output: [1, 2, 3]

Propriétés du tableau

• length : renvoie le nombre d'éléments dans un tableau.

let arr = [1, 2, 3, 4, 5];
console.log(arr.length); // Output: 5

Méthodes de tableau

1. pousser()

Ajoute un ou plusieurs éléments à la fin d'un tableau et renvoie la nouvelle longueur.

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // Output: [1, 2, 3, 4]

2. pop()

Supprime le dernier élément d'un tableau et renvoie cet élément.

let arr = [1, 2, 3];
let last = arr.pop();
console.log(arr); // Output: [1, 2, 3]
console.log(last); // Output: 3

3. décalage()

Supprime le premier élément d'un tableau et renvoie cet élément.

let arr = [1, 2, 3];
let first = arr.shift();
console.log(arr); // Output: [2, 3]
console.log(first); // Output: 1

4. décaler()

Ajoute un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur.

let arr = [2, 3];
arr.unshift(1);
console.log(arr); // Output: [1, 2, 3]

5. concaténer()

Fusionne deux tableaux ou plus et renvoie un nouveau tableau.

let arr1 = [1, 2];
let arr2 = [3, 4];
let merged = arr1.concat(arr2);
console.log(merged); // Output: [1, 2, 3, 4]

6. rejoindre()

Joint tous les éléments d'un tableau en une chaîne.

let arr = [1, 2, 3];
let str = arr.join("-");
console.log(str); // Output: "1-2-3"

7. inverse()

Inverse l'ordre des éléments dans un tableau.

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // Output: [3, 2, 1]

8. tranche()

Renvoie une copie superficielle d'une partie d'un tableau dans un nouvel objet tableau.

let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 3);
console.log(sliced); // Output: [2, 3]

9. épissure()

Modifie le contenu d'un tableau en supprimant, en remplaçant ou en ajoutant des éléments.

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, "a", "b");
console.log(arr); // Output: [1, "a", "b", 4, 5]

10. trier()

Trie les éléments d'un tableau sur place et renvoie le tableau trié.

let arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b);
console.log(arr); // Output: [1, 1, 3, 4, 5, 9]

11. filtre()

Crée un nouveau tableau avec tous les éléments qui réussissent le test implémenté par la fonction fournie.

let arr = [1, 2, 3, 4, 5];
let filtered = arr.filter(x => x > 2);
console.log(filtered); // Output: [3, 4, 5]

12. carte()

Crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.

let arr = [1, 2, 3];
let mapped = arr.map(x => x * 2);
console.log(mapped); // Output: [2, 4, 6]

13. réduire()

Applique une fonction à un accumulateur et à chaque élément du tableau pour le réduire à une valeur unique.

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // Output: 10

14. trouver()

Renvoie la valeur du premier élément du tableau qui satisfait à la fonction de test fournie.

let arr = [1, 2, 3, 4, 5];
let found = arr.find(x => x > 3);
console.log(found); // Output: 4

15. findIndex()

Renvoie l'index du premier élément du tableau qui satisfait à la fonction de test fournie.

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(x => x > 3);
console.log(index); // Output: 3

16. chaque()

Teste si tous les éléments du tableau réussissent le test implémenté par la fonction fournie.

let arr = [1, 2, 3, 4, 5];
let allBelowTen = arr.every(x => x 




  
  
  17. certains()


Teste si au moins un élément du tableau réussit le test implémenté par la fonction fournie.



let arr = [1, 2, 3, 4, 5];
let anyAboveThree = arr.some(x => x > 3);
console.log(anyAboveThree); // Output: true





  
  
  18. inclut()


Détermine si un tableau inclut une certaine valeur parmi ses entrées.



let arr = [1, 2, 3, 4, 5];
let hasThree = arr.includes(3);
console.log(hasThree); // Output: true





  
  
  19. indexDe()


Renvoie le premier index auquel un élément donné peut être trouvé dans le tableau, ou -1 s'il n'est pas présent.



let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);
console.log(index); // Output: 2





  
  
  20. dernierIndexOf()


Renvoie le dernier index auquel un élément donné peut être trouvé dans le tableau, ou -1 s'il n'est pas présent.



let arr = [1, 2, 3, 4, 5, 3];
let index = arr.lastIndexOf(3);
console.log(index); // Output: 5





  
  
  21. plat()


Crée un nouveau tableau avec tous les éléments du sous-tableau concaténés de manière récursive jusqu'à la profondeur spécifiée.



let arr = [1, [2, [3, [4]]]];
let flattened = arr.flat(2);
console.log(flattened); // Output: [1, 2, 3, [4]]





  
  
  22. flatMap()


Mappe d'abord chaque élément à l'aide d'une fonction de mappage, puis aplatit le résultat dans un nouveau tableau.



let arr = [1, 2, 3];
let flatMapped = arr.flatMap(x => [x, x * 2]);
console.log(flatMapped); // Output: [1, 2, 2, 4, 3, 6]





  
  
  23. de()


Crée une nouvelle instance de tableau copiée superficiellement à partir d'un objet de type tableau ou itérable.



let str = "Hello";
let arr = Array.from(str);
console.log(arr); // Output: ["H", "e", "l", "l", "o"]





  
  
  24. estArray()


Détermine si la valeur transmise est un tableau.



console.log(Array.isArray([1, 2, 3])); // Output: true
console.log(Array.isArray("Hello")); // Output: false





  
  
  25. de()


Crée un

nouvelle instance de tableau avec un nombre variable d'arguments, quel que soit le nombre ou le type des arguments.



let arr = Array.of(1, 2, 3);
console.log(arr); // Output: [1, 2, 3]





  
  
  Exemples pratiques



  
  
  Exemple 1 : suppression des doublons d'un tableau




let arr = [1, 2, 3, 3, 4, 4, 5];
let unique = [...new Set(arr)];
console.log(unique); // Output: [1, 2, 3, 4, 5]





  
  
  Exemple 2 : additionner toutes les valeurs d'un tableau




let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // Output: 15





  
  
  Exemple 3 : Aplatir un tableau profondément imbriqué




let arr = [1, [2, [3, [4, [5]]]]];
let flattened = arr.flat(Infinity);
console.log(flattened); // Output: [1, 2, 3, 4, 5]





  
  
  Exemple 4 : Recherche de la valeur maximale dans un tableau




let arr = [1, 2, 3, 4, 5];
let max = Math.max(...arr);
console.log(max); // Output: 5





  
  
  Exemple 5 : Création d'un tableau de paires clé-valeur




let obj = { a: 1, b: 2, c: 3 };
let entries = Object.entries(obj);
console.log(entries); // Output: [["a", 1], ["b", 2], ["c", 3]]





  
  
  Conclusion


Les tableaux constituent un élément essentiel de JavaScript, offrant un moyen puissant de gérer des collections de données. En maîtrisant les fonctions de tableau, vous pouvez effectuer facilement des manipulations de données complexes et écrire un code plus efficace et plus lisible. Ce guide complet a couvert les fonctions de tableau les plus importantes en JavaScript, avec des exemples et des explications détaillés. Entraînez-vous à utiliser ces fonctions et expérimentez différents cas d'utilisation pour approfondir votre compréhension et améliorer vos compétences en codage.