Les tableaux en Javascript

Les tableaux permettent de rassembler plusieurs valeurs. Pour créer un tableau vide on peut utiliser l’objet new Array().

let tab = new Array();

ou la notation avec les crochets

let tab = [];

Il existe un autre format d’écriture : la notation JSON

let tab = {};

Il est possible de remplir un tableau au moment de sa création.

Le tableau indéxé

C’est un tableau qui contient une liste d’éléments. Chaque élément est séparé par une virgule. il n’y pas à déclarer la taille du tableu, elle sera géré automatiquement par Javascript. Dans un tableau indexé, chaque valeur est repéré par une clé numérique.

La clé zéro représente la première valeur, la clé un représente la deuxième valeur, etc..

Création d’un tableau indexé

Vous pouvez créer un tableau indéxé rempli de valeurs

let tab = new Array(1,2,"daniel");

Ou avec les crochets

let tab = [1,2,"daniel"];

Vous pouvez aussi créer un tableau vide puis le remplir par la suite.

let tab = new Array();
tab[0]=1;
tab[1]="daniel";

Lecture d’un tableau indexé

Pour lire une valeur d’un tableau indexé, on appelle la variable avec, entre les crochets [ ], le numéro de la clé correspondant à la valeur.

let tab = new Array(1,2,"daniel");
alert(tab[0]); // affichera 1

Modifier une valeur

Il suffit d’affecter une nouvelle valeur au tableau, avec, entre les crochets [ ], le numéro de la clé correspondant à l’ancienne valeur.

let tab = new Array(1,2,"daniel");
tab[0] = 7;
alert(tab[0]); // affichera 7

L’ancienne valeur 1 du tableau, correspondant à la clé zéro, a été remplacée par la valeur 7.

Le format JSON

C’est un format plus intuitif qui permet de retrouver plus facilement les valeurs. En effet, chaque valeur est repérée par une chaîne de caractères.

Création d’un objet JSON

Vous pouvez créer un objet JSON rempli de valeurs associées à des propriétés. Les valeurs sont associées aux clés par la syntaxe :

let tab = {taille : 170,age : 30, prenom : "daniel"};

Vous pouvez aussi créer un objet vide puis le remplir par la suite.

let tab = {};
tab.taille=170;
tab.age=30;
tab.prenom="daniel";

Vous pouvez le remplir d’une autre façon

let tab = {};
tab["taille"]=170;
tab["age"]=30;
tab["prenom"]="daniel";

Lecture d’un objet JSON

Pour lire une valeur d’un objet JSON, on appelle la variable avec, après le point . le nom de la propriété correspondant à la valeur.

let tab = {taille : 170,age : 30, prenom : "daniel"};
alert(tab.taille); // affichera 170

Modifier un objet JSON

Il suffit d’affecter une nouvelle valeur à l’objet, avec, après le point . la propriété correspondande à l’ancienne valeur

let tab = {taille : 170,age : 30, prenom : "daniel"};
tab.taille=178; // modification  de la valeur taille
alert(tab.taille); // affichera 178

Vous pouvez aussi modifier votre objet avec, entre les crochets [], la clé sous forme de chaîne correspondant à l’ancienne valeur.

let tab = {taille : 170,age : 30, prenom : "daniel"};
tab["taille"]=178; // modification  de la valeur taille
alert(tab.taille); // affichera 178

Le tableau multidimentionnel

Un tableau peut stocker en mémoire d’autres tableaux qui eux même peuvent stocker aussi des tableaux.. Il est donc possible de créer des tableaux à plusieurs dimensions. C’est ce type de tableau qui est retourné par exemple, lors de la lecture d’enregistrements dans une base de données.

Création d’un tableau multidimentionnel

Vous pouvez créer un tableau multidimentionnel rempli de valeurs

let tab = new Array( new Array(1,2,3), new Aarray("a,"b","c"), new Array("dany", "david", "isabelle") );

Le tableau principal contient plusieurs autres tableaux comme valeurs.

Vous pouvez aussi créer un tableau multidimensionnel vide puis le remplir par la suite.

let tab= new Array();
tab[0]= new Array(1,2,3);
tab[1]= new Array("a,"b","c");
tab[2]= new Array("dany", "david", "isabelle");

Lecture d’un tableau multidimentionnel

Pour lire une valeur d’un tableau multidimensionnel à n dimensions, il faudra utiliser n clés.

let tab = new Array( new Array(1,2,3), new Aarray("a,"b","c"), new Array("dany", "david", "isabelle") );
alert(tab[2][0]); // affichera dany;

On se dirige d’abord sur le troisième sous-tableau avec tab[2], puis on va lire la première valeur de ce sous-tableau $tab[2][0].

Modifier une valeur

Il suffit d’affecter une nouvelle valeur au tableau, avec, entre les crochets [], les numéros de clé correspondant à l’ancienne valeur.

let tab = new Array( new Array(1,2,3), new Aarray("a,"b","c"), new Array("dany", "david", "isabelle") );
tab[2][0] = "daniel"; // anciennement "dany"

L’ancienne valeur ‘dany’ du sous-tableau a été remplacée par la valeur ‘daniel’.

Note : nous avons utilisé dans nos exemples des tableaux indexés, mais il est possible d’utiliser les tableaux multidimensionnels de la même façon avec les tableaux associatifs.

Parcourir un tableau indexé

Vous pouvez parcourir un à un tous les éléments d’un tableau avec l’instruction for :

let tab = new Array(1,2,3);
for(let i=0; i<tab.length; i++){
    document.write(i+"<br/>");
}

Affichage

1
2
3


La propriété length retourne le nombre d’élément d’un tableau.

Parcourir un objet JSON

Pour parcourir un tableau objet vous pouvez utiliser la syntaxe for .. in

let tab = {nom : 'daniel',age : 30};
for(prop in tab){
    document.write(prop+" : "+tab[prop]+"<br>");
}

Affichage

nom : daniel
age : 30


Dans la boucle, chaque propriété de l’objet est récupérée à travers la variable prop (vous pouvez la nommer autrement).

Pour afficher la valeur de l’objet pour chaque propriété on écrit la syntaxe :

tab[prop] // en effet la variable prop est de type string

Taille d’un tableau

Pour connaitre le nombre de valeurs contenu dans un tableau, on utilise la propriété length.

let tab = new Array(1,2,"daniel");
alert(tab.length); // affichera 3

Taille d’un objet JSON

Un objet JSON n’est pas un tableau. On ne peut pas utiliser directement length pour connaitre le nombre d’éléments.

Pour information un objet JSON peut lui-même contenir des tableaux.

let panier = {
    "fruits": ["pomme","poire","orange"],
    "legumes": ["haricot","carotte","choux"]
}

Pour connaitre la taille, il faut employer Object.keys() qui retourne toutes les propriétés d’un objet passé en paramètre de key(), dont ‘length’.

let tab = {nom : 'daniel',age : 30};
alert( Object.keys(tab).length ); // retourne 2

Supprimer un élément d’un tableau

Il suffit de rajouter par le prototype une méthode unset à l’objet Array

Array.prototype.unset = function(val){
    let index = this.indexOf(val)
    if(index > -1){
        this.splice(index,1)
    }
}
let tab = new Array('moi','lui','elle');
tab.unset('moi');
console.log(tab); // retourne ["lui", "elle"]

Supprimer une propriété d’un objet Json

Il suffit d’utiliser l’opérateur delete.

let json = {nom : "tine", prenom : "tt"};
delete json.nom;
console.log(json); // retourne  Object{prenom: "tt"}