FAQ JavaScript
FAQ JavaScriptConsultez toutes les FAQ
Nombre d'auteurs : 43, nombre de questions : 176, dernière mise à jour : 29 août 2021
- Comment déclarer et initialiser un tableau ?
- Comment scinder une chaîne de caractères en un tableau ?
- Comment joindre les parties d'un tableau en une chaîne ?
- Comment utiliser en JavaScript un tableau PHP ?
- Comment lire un tableau associatif et le scinder en deux tableaux indexés ?
- Comment faire une copie d'un tableau ?
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 !
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.
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 :
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 !