Aller au contenu

Tableaux JavaScript

Introduction aux tableaux JavaScript

Les tableaux JavaScript sont des collections ordonnées et polyvalentes capables de stocker divers types d'éléments, notamment des nombres, des chaînes de caractères et des objets. Ils offrent un moyen flexible de regrouper et de gérer les données dans vos applications.

Création et initialisation des tableaux

Il existe plusieurs façons de créer des tableaux en JavaScript. La méthode la plus courante consiste à utiliser la syntaxe littérale de tableau :


javascript
let fruits = ["Apple", "Banana", "Cherry"];

Alternativement, vous pouvez initialiser un tableau en utilisant le constructeur new Array(), bien que cela soit moins courant :


javascript
let fruits = new Array("Apple", "Banana", "Cherry");

Méthodes et propriétés des tableaux

Les tableaux JavaScript sont dotés d'un ensemble de méthodes et de propriétés intégrées qui facilitent la manipulation des données.

INFO

Découvrez plus de fonctions intégrées dans Méthodes des tableaux JavaScript

Ajout et suppression d'éléments

  • push() : Ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle longueur.

Output appears here after Run.
  • pop() : Supprime le dernier élément d'un tableau et retourne cet élément.

Output appears here after Run.
  • unshift() : Ajoute un ou plusieurs éléments au début d'un tableau et retourne la nouvelle longueur.

Output appears here after Run.
  • shift() : Supprime le premier élément d'un tableau et retourne cet élément.

Output appears here after Run.

Accès et itération sur les éléments

  • length : Cette propriété retourne le nombre d'éléments dans un tableau.
  • forEach() : Cette méthode exécute une fonction fournie une fois pour chaque élément du tableau.

Output appears here after Run.
  • map() : Crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.

Output appears here after Run.

Opérations avancées sur les tableaux

Tableaux multidimensionnels

Les tableaux JavaScript peuvent stocker d'autres tableaux, permettant la création de tableaux multidimensionnels.


Output appears here after Run.

Opérateur de propagation et déstructuration

Opérateur de propagation

L'opérateur de propagation (...) en JavaScript permet d'étendre un itérable (comme un tableau ou une chaîne) aux endroits où plusieurs éléments ou arguments sont attendus. Il est incroyablement polyvalent pour les manipulations de tableaux.

  • Combinaison de tableaux :

Output appears here after Run.
  • Copie de tableaux :

Output appears here after Run.
  • Utilisation avec des fonctions :

Output appears here after Run.
Déstructuration

La déstructuration en JavaScript vous permet de décompresser des valeurs depuis des tableaux ou des propriétés depuis des objets dans des variables distinctes.

  • Déstructuration de tableaux :

Output appears here after Run.
  • Échange de variables :

javascript
let a = 1, b = 2;
[a, b] = [b, a];   // a becomes 2, b becomes 1
console.log(a, b);
  • Valeurs par défaut :

Output appears here after Run.

L'opérateur de propagation et la déstructuration améliorent la lisibilité et l'efficacité du code JavaScript, permettant des patterns de programmation plus concis et expressifs.

Méthodes de rappel de tableau

Des méthodes comme filter, reduce et some offrent des moyens puissants de traiter et d'évaluer les données dans les tableaux. Ces méthodes prennent une fonction de rappel (callback) en argument et peuvent effectuer une variété d'opérations complexes.

  • filter() : Crée un nouveau tableau avec tous les éléments qui passent le test implémenté par la fonction fournie.

Output appears here after Run.

Tri et recherche dans les tableaux

  • sort() : Trie les éléments d'un tableau en place et retourne le tableau trié.

WARNING

Par défaut, sort() convertit les éléments en chaînes de caractères et les trie lexicographiquement. Pour les nombres, cela peut produire des résultats inattendus (par ex., 10 est placé avant 2). Fournissez toujours une fonction de comparaison pour un tri numérique.


Output appears here after Run.
  • find() et findIndex() : Utilisés pour rechercher un élément dans le tableau.

Output appears here after Run.

Conversion de tableaux en chaînes de caractères

La méthode join() combine tous les éléments d'un tableau en une seule chaîne de caractères.


Output appears here after Run.

Bonnes pratiques pour l'utilisation des tableaux en JavaScript

  • Utilisez const pour déclarer des tableaux qui ne seront pas réassignés.

L'utilisation de const pour la déclaration de tableaux est une bonne pratique. Elle empêche la réassignation de l'identifiant du tableau, garantissant que la référence au tableau reste constante. Cependant, le contenu du tableau peut toujours être modifié.


Output appears here after Run.

Cela garantit que fruits fera toujours référence au même tableau, mais ne signifie pas que le tableau lui-même est immuable.

  • Privilégiez les méthodes fonctionnelles comme map, filter et reduce pour les opérations sur les tableaux.
  • Utilisez les fonctionnalités ES6 comme l'opérateur de propagation et la déstructuration pour un code plus concis et lisible.

Conclusion

Les tableaux JavaScript sont un aspect fondamental du langage, offrant un ensemble robuste de fonctionnalités pour gérer des collections de données. En comprenant les méthodes et propriétés des tableaux, et en suivant les bonnes pratiques, vous pouvez efficacement gérer et manipuler les données de tableau dans vos applications JavaScript.

Pratique

Parmi les suivantes, lesquelles sont des façons de déclarer un tableau en JavaScript ?

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.