Skip to content

Aide-mémoire des méthodes de tableaux JavaScript

Cette page fournit un guide détaillé des méthodes de tableaux JavaScript, y compris les opérations courantes, les nouvelles fonctionnalités ES6, l’optimisation des performances, et plus encore.

Création de tableaux

JavaScript propose plusieurs façons de créer des tableaux :

Utilisation des littéraux de tableau 

let arr = [1, 2, 3];

Utilisation du constructeur 

let arr = new Array(1, 2, 3);

Utilisation de la méthode Array.of 

let arr = Array.of(1, 2, 3);

Utilisation de la méthode Array.from 

let arr = Array.from('123'); // ['1', '2', '3']

Opérations sur les tableaux

Les tableaux fournissent une multitude de méthodes pour ajouter, supprimer, modifier et interroger des données :

Ajout d’éléments

  • push : Ajoute un ou plusieurs éléments à la fin du tableau
  • unshift : Ajoute un ou plusieurs éléments au début du tableau

Suppression d’éléments

  • pop : Supprime le dernier élément du tableau
  • shift : Supprime le premier élément du tableau
  • splice : Supprime n’importe quel nombre d’éléments en fonction de l’index

Recherche d’éléments

  • indexOf : Trouve l’index d’un élément dans le tableau
  • includes : Détermine si le tableau contient un certain élément

Itération à travers les tableaux

  • forEach : Exécute une fonction de rappel une fois pour chaque élément du tableau
  • map : Crée un nouveau tableau avec les résultats de l’appel d’une fonction fournie sur chaque élément du tableau appelant
  • filter : Crée un nouveau tableau avec tous les éléments qui passent le test implémenté par la fonction fournie

Transformation de tableau

  • join : Joint tous les éléments d’un tableau en une chaîne de caractères
  • slice : Renvoie une copie superficielle d’une partie d’un tableau
  • concat : Fusionne deux tableaux ou plus

Nouvelles fonctionnalités ES6

ES6 a apporté de nombreuses améliorations aux opérations sur les tableaux :

Opérateur de décomposition (Spread) 

let arr = [1, 2, 3];
let arr2 = [...arr, 4, 5]; // [1, 2, 3, 4, 5]

Array.prototype.find 

let result = arr.find(item => item > 2); // 3

Array.prototype.findIndex 

let index = arr.findIndex(item => item > 2); // 2

Array.prototype.fill 

arr.fill(0); // [0, 0, 0]

Array.prototype.includes 

arr.includes(2); // true

Optimisation des performances

Lorsqu’on manipule de grands tableaux, l’optimisation des performances est particulièrement importante :

  • Essayez d’utiliser des méthodes natives comme map et filter, qui sont généralement implémentées en C++ et sont plus rapides que les boucles JavaScript.
  • Pour les tableaux fréquemment manipulés, envisagez d’utiliser des Typed Arrays.
  • Évitez les opérations DOM à l’intérieur des boucles ; collectez plutôt les nœuds DOM à manipuler et effectuez l’opération en une seule fois.

Conclusion

Grâce à ce guide, vous devriez avoir une compréhension plus approfondie des opérations sur les tableaux JavaScript. Pour plus d’informations, veuillez vous référer aux MDN Web Docs.