FAQ JavaScriptConsultez toutes les FAQ

1. Avec new Array()

On déclare d'abord la variable en tant que nouveau tableau (new Array( )) puis on remplis le tableau indice par indice.

var semaine = new Array(7);
semaine[0] = "dimanche";
semaine[1] = "lundi";
semaine[2] = "mardi";
semaine[3] = "mercredi";
semaine[4] = "jeudi";
semaine[5] = "vendredi";
semaine[6] = "samedi";

Le mot clé new est un opérateur qui sert exclusivement à créer une instance d'objet. Ici nous avons créé un objet de la classe Array nommé semaine.

Notez que la taille du tableau est explicitement indiquée en paramètre et que chaque indice est placé entre crochets ([ et ]). Le plus grand indice correspond à la taille du tableau -1 (le premier indice étant toujours 0). Notez aussi qu'il n'est pas nécessaire d'indiquer la taille lors de la déclaration du tableau.

2. Avec new Array() en passant les valeurs en paramètres

On peut aussi déclarer le tableau en passant les données en paramètres à l'intérieur des parenthèses. De cette façon, vous initialisez le tableau tout en définissant sa taille.

var semn = new Array("dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi");

Exemple :
Le script suivant affiche la valeur de semn à l'indice 2 : mardi

<script type="text/javascript" type="text/javascript">
var semn = new Array("dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi");
document.write(semn[2]);
</script>

3. Sans new Array()

On peut se passer de la commande new Array( ) en initialisant directement la variable comme un tableau en plaçant la série de valeurs entre crochets ([ et ]). Cela a pour effet d'initialiser la variable en tant que tableau et d'en définir la taille.

var joursem = ["dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"];

Exemple :
Le script suivant affiche la valeur de joursem à l'indice 6 : samedi

<script language="javascript" type="text/javascript">
var joursem = ["dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"];
document.write(joursem[6]);
</script>

Notez que dans chacun des exemples ci-dessus, le premier indice est toujours 0 (zéro) et ce peu importe la méthode utilisée pour déclarer et initialiser le tableau.

Il est possible de scinder (découper) une chaîne de caractères pour placer chacune des parties dans un tableau. Il suffit d'utiliser la méthode split() de l'objet String.

var parties = "Ceci est une chaîne".split(" ");

Le caractère placé en argument (entre les parenthèses) sert à indiquer où se fait la séparation. Ici, il s'agit d'un espacement. Le tableau suivant est automatiquement créé.

parties[0] contenant "Ceci"parties[1] contenant "est"parties[2] contenant "une"parties[3] contenant "chaîne".

Il est possible de concaténer les éléments d'un tableau en utilisant la méthode join() de l'objet Array. L'argument entre parenthèses est un caractère ou une chaîne de caractères (entre guillemets). Si l'expression (caractère ou chaîne) est omis, il sera automatiquement remplacé par une virgule.

var chaineOriginale = parties.join(" ");

Ici, chaineOriginale contiendra : "Ceci est une chaîne"
alors qu'avec :

var chaineOriginale = parties.join();

chaineOriginale contiendra "Ceci,est,une,chaîne"

Il est souvent utile de récupérer en JavaScript des tableaux PHP.
Malheureusement, le fonctionnement de PHP coté serveur et de JavaScript coté client ne permet pas de transmettre de données typées.

Nous allons utiliser la fonction PHP implode() pour transmettre le tableau à JavaScript sous forme de chaîne puis la fonction JavaScript split() pour transformer cette chaîne en tableau.

Ce code ne fonctionne qu'avec des tableaux indexés. Pour des tableaux associatifs, vous devrez passer par un objet JSON.
Le séparateur utilisé (ici '<>') ne doit pas être contenu dans une valeur du tableau !

<?php
    $tab = array('toto', 'titi', 'tata');
?>
<script type="text/javascript">
	<?php echo "var tab = '".implode("<>", $tab)."'.split('<>');"; ?>
	alert(tab);
</script>

En JavaScript, un tableau associatif est en réalité un Object. Il est toutefois possible de transformer un tableau associatif (type Object JavaScript) en deux tableaux indexés (type Array).
L'utilité étant de pouvoir bénéficier sur ces tableaux des méthodes de l'objet Array.

var table={"un":"truc", "deux":"bidule", "trois":"machin"};
var couple=[], couple2=[];
 
for (var key in table){
	couple.push(key);
	couple2.push(table[key]);
}
 
alert(couple);
alert(couple2);

JavaScript s'est récemment largement étoffé au niveau des méthodes de l'objet Array. Notamment, l'apparition de Array.forEach() permet de parcourir facilement un tableau.
Dans le cas d'un Object, cette méthode ne semble pas d'une grande utilité, mais Object aussi s'est enrichi et Object.keys() permet de récupérer un tableau des différentes clés d'un objet.
L'exemple précédent deviendra donc, avec ces nouvelles méthodes :

var table={"un":"truc", "deux":"bidule", "trois":"machin"};
var couple=[], couple2=[];

Object.keys(table).forEach(function(cle){
    couple.push(cle);
    couple2.push(table[cle]);
});
alert(couple);
alert(couple2);

Si ces méthodes sont largement implémentées pour tous les navigateurs récents, elles ne sont en revanche pas disponibles pour IE 8 et inférieurs.

Lorsque l'on veut copier un tableau dans une nouvelle variable, la première idée serait d'affecter la valeur du premier tableau dans le second comme ceci :

var tableau1 = [1, 2, 3];
var tableau2 = [];
tableau2 = tableau1;

Malheureusement, cette façon de faire pose un problème. En effet, dans ce cas, les deux variables ne sont en fait que des références au même tableau. C'est-à-dire que toute modification sur l'une modifie l'autre. Comme le montre l'exemple suivant :

tableau1.push(4, 5);
alert(tableau2.length);

Le résultat affiché sera bien 5 !

Pour parer à cela, il va falloir faire un clone du tableau d'origine. Trois solutions sont possibles, présentées ici sous forme de prototype afin d'étendre l'objet JavaScript Array.

Première solution :

Array.prototype.clone = function() {
	var res = [];
	for(var i=0,size=this.length;i<size;i++) {
		res.push(this[i]);
	}
	return res;
}
tableau2 = tableau1.clone();

Deuxième solution :

Array.prototype.clone = function() {
	var res = [];
	return res.concat(this);
}
tableau2 = tableau1.clone();

Troisième solution :

Array.prototype.clone = function() {
	return this.join('|').split('|');
}
tableau2 = tableau1.clone();

Attention, dans ce cas, le caractère "|" a été choisi comme séparateur. Ce choix est motivé par le fait qu'il apparaisse rarement dans une chaîne, cependant, il faut rester très vigilent sur le choix du séparateur !