Soutenez-nous

FAQ JavaScriptConsultez toutes les FAQ

Nombre d'auteurs : 43, nombre de questions : 176, dernière mise à jour : 19 décembre 2013 

 
OuvrirSommaireLes tableaux (l'objet Array)

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.

 
Sélectionnez
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.

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

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

 
Sélectionnez
<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.

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

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

 
Sélectionnez
<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.

Créé le 23 septembre 2004  par zazaraignée

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.

 
Sélectionnez
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".

Créé le 23 septembre 2004  par zazaraignée

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.

 
Sélectionnez
var chaineOriginale = parties.join(" ");

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

 
Sélectionnez
var chaineOriginale = parties.join();

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

Créé le 23 septembre 2004  par zazaraignée

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 !

 
Sélectionnez
<?php
    $tab = array('toto', 'titi', 'tata');
?>
<script type="text/javascript">
	<?php echo "var tab = '".implode("<>", $tab)."'.split('<>');"; ?>
	alert(tab);
</script>
Créé le 24 septembre 2009  par SpaceFrog

Lien : Exemple d'utilisation de ce 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.

 
Sélectionnez
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 :

 
Sélectionnez
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.

Mis à jour le 4 novembre 2013  par Javatwister, Bovino

Lien : Le "core" JavaScript s'enrichit de nouvelles méthodes.
Lien : Object.keys()
Lien : Array.forEach()

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 :

 
Sélectionnez
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 :

 
Sélectionnez
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 :

 
Sélectionnez
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 :

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

Troisième solution :

 
Sélectionnez
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 !

Créé le 7 octobre 2009  par gwyohm, SpaceFrog, Bovino

Lien : Exemple d'utilisation de ce script

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.