Les Tableaux JavaScript

Les tableaux JavaScript

Définition

Un tableau est une variable permettant de regrouper plusieurs données.

Celles-ci peuvent avoir un type de base (numeric, string, boolean) ou être un tableau ou un objet.

Un tableau quelque soit le langage, fonctionne avec un index. Prenons ce tableau basique

0	1	2	3	4
Citron	Banane	Cerise	Framboise	Mirtille

Nous voulons acceder à la 3^ième valeur (Cerise) donc l'index 2. Pour ce faire on va prendre la variable tab et indiquer avec les crochets [] l'index voulu

console.log(tab[2]);

Comment créer un tableau

On a vu comment utiliser basiquement un tableau mais on a pas encore vue comment on créé ce tableau.

Il y a deux façon de s'y prendre

La notation "clasique"
La notation "JSON"

La notation classique

En JavaScript comme dans beaucoup de langage, les tableaux sont des objets. Il s'agit donc de "créer une nouvelle instance de tableau"

var tab=new Array();

La notation JSON

C'est une façon de créer des objets en JavaScript apparu au début des années 2000. Ce format été censé concurencer le XML.

Voila pour l'histoire, maintenant pour les tableaux on va se contenter d'indiquer que la variable a un "format de tableau"

var tab=[];

On a vue comment créer un tableau voyons maintenant comment lui entrer des valeurs

La aussi il y a 2 façons de faire.

Entrer les valeurs des la création
Les entrer aprés avoir créer le tableau

var t=new Array("Citron","Banane","Cerise","Framboise","Mirtille");
var t2=["Citron","Banane","Cerise","Framboise","Mirtille"];

var t=new Array();
t[0]="Citron";
t[1]="Banane";
t[2]="Cerise";
t[3]="Framboise";
t[4]="Mirtille";

Comment mettre à jour un tableau

Mon tableau a 5 fruits. J'aimerai en ajouter un 6ieme des raisins

Encore une fois il y a deux façon de s'y prendre,

Soit ajouter l'information à la fin du tableau
Soit l'ajouter à un index précis

Pour ajouter une information à la fin d'un tableau on utilise la méthode .push()

var fruits=["Citron","Banane","Cerise","Framboise","Mirtille"];
fruits.push("Raisins");

On peut aussi ajouter l'information via son index

var fruits=["Citron","Banane","Cerise","Framboise","Mirtille"];
fruits[5]="Raisins"

Attention imaginons que au lieu d'entrer l'information à l'index 5 on l'ajoute à l'index 10

var fruits=["Citron","Banane","Cerise","Framboise","Mirtille"];
fruits[10]="Raisins"
console.dir(fruits)

Array(11) [ "Citron", "Banane", "Cerise", "Framboise", "Mirtille", <5 empty slots>, … ]

JavaScript créé donc un tableau de longueur 11, et laisse 5 slots (emplacements) vide et ajoute les raisins

Parcourir le tableau

Youpi j'ai un chouette tableau de fruits mais maintenant il faudrait que je le lise pour voir ce qu'il y a dedans.

Pour ce faire on va utiliser notre bonne vielle boucle algorithmique. Pour l'exemple on va faire simple on va utiliser le pour

for(let i=0;i<fruits.length;i++){
- console.log(fruits[i]);
}

Citron
Banane
Cerise
Framboise
Mirtille

Il est possible de parcourir un tableau avec la méthode forEach que l'on verra plus tard

Variable de référence

Soit le code suivant :

var tab=[];
var t2=tab;
tab.push(5);
console.log(t2.length); //va afficher 1

Pourquoi y t-il une donnée dans t2 alors que l'on l'a ajouter dans tab ?
Pour répondre à cette question on va toucher à un point important en developpement général.

Les pointeurs

Voila en fait ce qui c'est passer avec ce code

tab et t2 pointent vers la même adresse mémoire qui elle même pointe vers le tableau. Donc si je modifie tab je modifie aussi t2. Donc voila une notion importante : les variables de tableau et d'objet ne sont pas vraiment des variables mais des références

Fonctions de base

Fonctions avancées

Quelque soit le langage que vous utilisez, il est toujours préférable d'utiliser les fonctions ou procédure internes des tableaux. En effet, celles-ci sont optmisées et permettront d'avoir un code plus performant.

Les fonctions que l'on va voir on toute un point commun elle passe une fonction en callBack

forEach

J'en ai parlé plus haut, on a parcouru le tableau de fruits avec une boucle algorithmique. Le forEach permet de parcourir intégralement le tableau

Mais voila ce qui se passe si j'éxecute ce code

var fruits=["Citron","Banane","Cerise","Framboise","Mirtille","raisins","pastèque",
"mangue","figues","kiwis","pommes","poires","abricots"];
for(let i=0;i<fruits.length;i++){
- console.log(fruits[i]);
}

var fruits=["Citron","Banane","Cerise","Framboise","Mirtille","raisins","pastèque",
"mangue","figues","kiwis","pommes","poires","abricots"];
fruits.forEach((el)=>{
- console.log(el);
})