Les tableaux en JavaScript sont dynamiques

Comme tous les langages de script, JavaScript a des tableaux dynamiques: leur taille n'est pas prédéterminée, ni le type des données contenues.

On les crée avec un littéral ou un constructeur

Avec le mot réservé new.

var x = ["a", "b", "c"];   // littéral

var x = new Array();      //  constructeur
var y = new Array("a", "b", "c");   // constructeur avec éléments

Noter que si le constructeur Array() contient en argument un seul élément numérique, cet élément correspond à la taille du tableau et n'est pas un élément du tableau.

var x = new Array(5);    // tableau vide prévu pour 5 éléments.
var x = new Array(1, 2); // tableau contenant deux éléments, les nombres 1 et 2.

Cela peut sembler peu cohérent mais cela n'a en fait pas d'importance, car si on veut créer un tableau de quelques éléments, on utilisera plutôt un littéral. Exemple:

var x = [5];             // tableau contenant un seul élément, le nombre 5.

On peut le vérifier avec cet exemple...

On construit le tableau Array(5). On affiche le tableau, qui est vide, puis la taille.
Ensuite on crée un tableau avec le constructeur Array(1,2), donc contenant deux éléments.

var x = new Array(5);
document.writeln(x);
document.writeln(x.length);

x = new Array(1, 2);
document.writeln(x);

La valeur littérale d'un tableau peut contenir des variables

La liste des éléments se place entre crochets et contient tout type de valeurs, numériques, chaînes, objets, séparées par une virgule.

Les virgules servent à spécifier le nombre d'éléments, elles peuvent contenir des blancs:

x = [ "a", , , , "e"]

La lettre "e" sera en position 4 dans le tableau. Les virgules terminales sont ignorées.

Une variable peut être donnée comme élément d'un tableau littéral, c'est alors son contenu qui sera assigné dynamiquement au tableau.

Pour un tableau littéral à deux dimensions, on écrira:

x = [[ "a", "b", "c"] , [ 1,2,3]] 

L'indexation d'un tableau peut lui donner sa taille

Le premier élément a la position 0. On assigne ou lit le contenu d'un tableau avec l'indice de position entre crochets.

var x = new Array();
alert(x[0]);         // lire
x[0] = "car";        // assigner   

Si on assigne à une autre position du tableau, par exemple en indice 5, le tableau sera automatiquement redimensionné à la taille de 6 éléments au minimum, si sa taille antérieure était nulle ou inférieure à 6.

On assigne des tableaux comme éléments pour ajouter une dimension

On construit un tableau multi-dimensionnel en donnant à un tableau des éléments qui sont d'autres tableaux.

var a = new Array(
new Array(1, 2, 3),
new Array(4, 5, 6));
document.write(a);

Résultat:

var a = [ [ 1, 2, 3], [ 4, 5, 6] ];
document.write(a);

Résultat:

a[0][0] = 1;
a[0][1] = 2;
a[0][2] = 3;
a[1][0] = 4;
a[1][1] = 5;
a[1][2] = 6;
document.write(a);

Résultat:

On peut aussi accéder aux éléments du tableau avec les indices en chaînes, par exemple:

document.write(a[1][2]);

Qui doit afficher 6;

Assigner un tableau à une variable: valeur ou référence?

Quand on passe un tableau en argument à une fonction, le tableau est passé par référence. Autrement dit, si on modifie le tableau dans la fonction, le tableau original passé à la fonction est modifié.

Mais quand on assigne un tableau à une variable, est-il assigné par référence ou par valeur? On va faire le test avec le code suivant:

var x = ["un", "deux", "trois"];
var y = x;
x[3] = "quatre";
document.write(y);

On a créé le tableau x, puis on l'assigne à y. On ajoute un nouvel élément "quatre" à x. On s'aperçoit que ce nouvel élément se trouve aussi dans y!

Si l'on veut dédoubler un tableau on utilise la méthode slice qui retourne une copie du tableau (et non la référence à ce tableau):

x = ["un", "deux", "trois"];
var z = x.slice();
x[3] = "quatre";
document.write(z);

Cette fois on voit qu'en ajoutant un nouvel élément à x, z auquel on a préalablement assigné x reste inchangé.

Le même principe serait utilisé si on voulait passer un tableau par valeur à une fonction:

mafonction(x.slice()); 

Note additionnelle:

Sur les navigateurs modernes, on peut afficher un tableau formatté avec la fonction JSON.stringify:

JSON.stringify(x, null, 4);  

Voir aussi

© 2007-2014 Xul.fr