Tableaux en JavaScript

Les tableaux en JavaScript peuvent au départ être déroutants et difficiles à comprendre, en particulier lorsqu'il s'agit de concepts avancés. Moi aussi, j'ai eu du mal à comprendre les tableaux en JavaScript au début. Dans cet article, mon objectif est de démystifier les tableaux en JavaScript, en décomposant tout ce que vous devez savoir pour pouvoir travailler avec eux en toute confiance.

Définition

Qu'est-ce qu'un tableau

Un tableau est une structure de données qui stocke une collection d'éléments, chacun accessible par un index. Dans de nombreux langages de programmation, les tableaux stockent les éléments dans des emplacements mémoire contigus. En JavaScript, les tableaux sont des objets de haut niveau, semblables à des listes, utilisés pour stocker plusieurs valeurs dans une seule variable. Ils sont indexés à zéro, ce qui signifie que le premier élément est à l'index 0.

Tableaux en JavaScript

Étant donné que JavaScript est un langage typé dynamiquement, les tableaux peuvent contenir des éléments de différents types. Un tableau peut contenir des nombres, des chaînes, des booléens, des objets et même d'autres tableaux. Cela diffère des langages typés statiquement comme Java ou C , où les tableaux sont généralement homogènes et doivent contenir des éléments du même type de données.

Pourquoi utiliser un tableau ?

Les tableaux aident à gérer efficacement les données en vous permettant de stocker, d'accéder et de manipuler des valeurs. Ils sont utilisés pour tout ce qui implique des listes ou des collections, comme la gestion des articles dans un panier de commerce électronique ou le suivi des entrées des utilisateurs.

Comment créer un tableau en JavaScript

Il existe plusieurs façons de créer des tableaux en JavaScript, j'en passerai quelques-unes :

1. Utiliser des littéraux de tableau []

En JavaScript, vous pouvez simplement créer un tableau en attribuant [] à une variable ou une constante

const numbers = [1, 2, 3];
const fruits = ["Apple", "Banana", "Orange"];

Remarquez que les éléments d'un tableau sont séparés par une virgule,

2. Utilisation du constructeur Array

Vous pouvez également créer un tableau en tant qu'instance d'un constructeur de tableau JavaScript natif en utilisant la syntaxe suivante :
const monTableau = nouveau Tableau()
Le constructeur Array prend un ou plusieurs arguments (ils doivent être des nombres), et il se comporte différemment selon le nombre d'arguments que vous transmettez !
Si vous passez un argument : const myArray = new Array(4), cela créera un nouveau tableau avec 4 éléments vides !

Si vous transmettez plusieurs arguments : const myArray = new Array(1, 2, 3), cela crée un tableau de 3 nombres 1, 2 et 3 respectivement et cela revient à écrire const myArray = [1, 2 , 3]!

Je sais que cela semble déroutant, mais croyez-moi, c'est facile si vous faites quelques exercices supplémentaires avec eux !

3. Utilisation de la méthode Array.of

Des tableaux peuvent également être créés à l'aide de cette méthode Array.of et il créera simplement un tableau contenant tous les éléments que vous lui transmettez en tant qu'arguments. La différence entre l'utilisation d'Array.of et du constructeur Array réside dans la façon dont ils se comportent lorsqu'ils reçoivent un argument !

const array1 = Array.of(1); // This returns [1]
const array2 = Array.of(2, true, "hello"); // This returns [2, true, 'hello']

Remarquez comment Array.of se comporte lorsqu'il reçoit un paramètre, contrairement au constructeur Array qui crée simplement un tableau de n éléments vides, Array.of crée simplement un tableau avec un seul élément qui est celui que vous avez transmis !

4. Utilisation de la méthode Array.from

Vous pouvez également utiliser la méthode Array.from(iterable), qui reçoit un argument qui doit également être un itérable et crée un tableau à partir de celui-ci ! Par exemple, vous pouvez transmettre un ensemble à cette méthode et créer un tableau à partir des valeurs de cet ensemble !

const mySet = new Set([2, 3, 4, 5, 5]);
const arrayFromSet = Array.from(mySet);

Manipulation de tableaux en JavaScript

Nous avons vu ce qu'est un tableau et comment créer des tableaux en JavaScript. Le problème restant que vous vous posez peut-être est désormais le suivant : comment utiliser et travailler avec des tableaux ?
Eh bien, c'est une bonne question !

Manière traditionnelle de travailler avec des tableaux en JavaScript

Traditionnellement, nous utilisons des boucles pour parcourir les éléments stockés dans un tableau et les utiliser !
L'exemple suivant montre comment parcourir un tableau de nombres et afficher le double de chaque nombre à l'intérieur du tableau :

const numbers = [1, 2, 3, 4];
for (let i = 0; i 

  
  
  Utilisation de la syntaxe moderne des méthodes de tableau JavaScript


JavaScript est livré avec de nombreuses méthodes de tableau (fonctions d'ordre supérieur) prêtes à l'emploi, elles sont accessibles à toutes les instances de tableau via l'objet Array.prototype, nous utilisons les méthodes fournies par JavaScript pour manipuler et travailler avec les données stockées dans des tableaux ! Nous pouvons même créer nos propres méthodes de tableau (nous y reviendrons dans le prochain chapitre)

Ce sont des méthodes d'ordre supérieur, car elles prennent d'autres fonctions comme arguments et utilisent ces fonctions pour manipuler les données stockées dans des tableaux !

Ces méthodes de tableau sont également classées en deux catégories :



Mutation : Ceux-ci bouclent sur le tableau et tout en appliquant la fonction de rappel, ils mutent également le tableau d'origine !

Non mutant : Ceux-ci parcourent le tableau et appliquent la fonction de rappel, mais au lieu de muter le tableau d'origine, ils renvoient un nouveau tableau


  
  
  1. Méthode forEach()


forEach() est une méthode de tableau d'ordre supérieur utilisée pour parcourir les éléments d'un tableau et appliquer une fonction de rappel sur chaque élément sans modifier le tableau d'origine ni créer un nouveau tableau !

La syntaxe des fonctions de rappel qui est généralement une fonction anonyme (généralement la même dans toutes les autres méthodes) :

function (currentElement[, index, targetArray]) {}




 Cela signifie qu'à chaque itération, la méthode tableau a accès à l'élément actuel dans l'itération (currentElement), son index dans l'index du tableau qui est facultatif et la référence au tableau cible dans lequel la méthode est exécutée. targetArray qui est également facultatif. Mais vous pouvez appeler ces paramètres comme vous le souhaitez, il vous suffit de faire attention à leurs positions.


const numbers = [1, 2, 3, 4];
numbers.forEach((element) => {
  console.log(element * 2);
});




  
  
  2. méthode map()


 Tout comme forEach, la carte est également une autre façon de parcourir les éléments du tableau et d'appliquer la fonction de rappel sur chaque élément, mais contrairement à forEach, la carte est une méthode non mutante et, par conséquent, elle crée et renvoie le nouveau tableau à la suite de itération et ne change pas le tableau d'origine !

const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map((element) => element * 2);
console.log(squaredNumbers);




  
  
  3. méthode filter()


La méthode 
filter() est utilisée lorsque vous souhaitez filtrer le tableau en supprimant les éléments que vous ne voulez pas, il s'agit d'une méthode non mutante et elle renvoie un nouveau tableau !

Pour chaque itération, le rappel à l'intérieur de filter() doit renvoyer une valeur booléenne indiquant si l'élément actuel doit être inclus ou non dans le nouveau tableau filtré

const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter((element) => element % 2 === 0);
console.log(evenNumber); // [2, 4]




  
  
  4. Méthode réduire()


La méthode 
reduce() est un peu différente de celles ci-dessus. Considérez-le comme un moyen de combiner tous les éléments d'un tableau en une seule valeur en appliquant une fonction à chaque élément, un par un. Il renvoie une valeur unique pour tous les éléments du tableau, vous l'utiliserez lorsque vous souhaitez une valeur unique pour tous les éléments d'un tableau comme la somme, la moyenne, le maximum ou le minimum pour n'en nommer que quelques-uns !

La syntaxe est également différente

Array.reduce(function(accumulator, element[, index, targetArray]) [, initialValue])

Cette méthode prend deux arguments, le premier est la fonction de rappel tout comme les autres méthodes, et le second sera la valeur initiale de la variable accumulateur. Ce deuxième argument est facultatif, s'il n'est pas fourni, la réduction utilisera le premier élément d'un tableau comme valeur initiale de l'accumulateur

L'accumulateur contient le résultat renvoyé par la fonction de rappel à chaque itération et sera le résultat final renvoyé par la réduction une fois l'itération terminée !

Essayons de trouver une somme à partir d'un tableau de nombres :

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, element) => accumulator   element);
console.log(sum);




  
  
  4. Méthode slice()


slice() est une autre méthode de tableau utile en JavaScript, utilisée pour extraire une petite partie d'un tableau ! slice() crée un nouveau tableau en copiant une section d'un tableau existant sans modifier le tableau d'origine.

La syntaxe de la méthode slice() est la suivante :

Array.slice(startIndex, endIndex) startIndex représente un point de départ de l'extraction et il est inclusif et endIndex représente l'élément de fin de l'extraction, il est facultatif et exclusif. Lorsqu'elle n'est pas fournie, les méthodes slice copie un tableau de startIndex à la fin d'un tableau !

const fruits = ["apple", "banana", "orange", "mango"];
const slicedFruits = fruits.slice(1, 3); // ['banana', 'orange']




  
  
  5. Méthode splice()


splice() est une méthode de tableau en JavaScript, utilisée pour ajouter, supprimer et remplacer des éléments dans un tableau. splice() modifie le contenu d'un tableau en ajoutant, supprimant ou remplaçant des éléments dans le tableau.

La syntaxe de la méthode splice() est la suivante :

Array.splice(index, elementsToRemove, newElement1, newElement2, ..., newElementn)

Cela peut sembler déroutant, mais laissez-moi essayer de vous expliquer :

index signifie l'index de départ dans le tableau dans lequel la suppression de l'élément est censée commencer et il est inclusif.

elementsToRemove représente le nombre d'éléments de l'index dans lesquels vous souhaitez supprimer du tableau, si vous souhaitez uniquement ajouter de nouveaux éléments, vous pouvez fournir 0 à cette position.

newElement1, newElement2 etc. Il peut s'agir de n'importe quel nombre d'éléments que vous souhaitez ajouter dans votre tableau et ils remplaceront les éléments elementsToRemove que vous avez spécifiés dans votre tableau !

Beaucoup de discussions, voyons un exemple :

const fruits = ["apple", "banana", "orange", "mango"];
// If we want to replace 'banana' with 'pineapple'
const splicedFruits = fruits.splice(1, 1, "pineapple"); // This will return ['apple', 'pineapple', 'orange', 'mango']




fruits.splice(1, 1, "ananas") cela signifie qu'à partir de l'index de 1, supprimez 1 éléments et ajoutez 'ananas'

Si nous voulions seulement ajouter de l'ananas dans le tableau sans remplacer d'autres valeurs par celui-ci, nous aurions pu écrire ceci comme 

fruits.splice(1, 0, "pineapple") cela ajouterait l'ananas après l'élément à l'index1 et ne supprimerait aucun autre élément de ce tableau.


  
  
  Conclusion


Les tableaux sont une fonctionnalité fondamentale et polyvalente de JavaScript, offrant une structure essentielle pour stocker et manipuler des collections de données. De la simple création de tableaux utilisant des littéraux à des méthodes plus avancées comme Array.of() et Array.from(), les tableaux JavaScript offrent une gamme de façons de gérer différents types de données. En maîtrisant la manipulation des tableaux via des boucles ou des méthodes modernes telles que forEach(), map(), filter(), réduire(), slice() et splice(), vous pouvez effectuer efficacement des opérations complexes. Comprendre ces fonctionnalités de tableau est essentiel pour maîtriser JavaScript, vous permettant d'écrire un code plus propre, plus concis et plus puissant.