SELFHTML: JavaScript / Référence objet JavaScript / Array

SELFHTML/Quickbar JavaScript Référence objet

Array

Array: généralités sur l'utilisation

Propriétés:

length (nombre d'éléments)

Méthodes:

concat() (concaténer des arrays)
join() (transformer un array en chaîne de caractères)
pop() (effacer le dernier élément d'un array)
push() (ajouter de nouveaux éléments à un array)
reverse() (renverser l'ordre des éléments)
shift() (retirer le premier élément d'un array)
slice() (extraire une partie d'un array)
splice() (effacer et ajouter des éléments)
sort() (trier un array)
unshift() (insérer des éléments au début d'un array)

Array: généralités sur l'utilisation

L'objet Array est conçu comme "conteneur" pour des chaînes de variables de même nature. Dans le langage de programmation on parle également d'un "tableau". Si par exemple vous voulez sauvegarder les 16 couleurs de base, vous n'avez pas besoin de 16 variables mais d'un objet Array dans lequel vous pouvez sauvegarder 16 valeurs de même nature (dans l'exemple: valeurs de couleur).

Schéma 1 / exemple 1:

nomobjet = new Array();
mesfemmes = new Array();

Schéma 2 / exemple 2:

nomobjet = new Array(nombre);
mesfemmes = new Array(100);

Schéma 3 / exemple 3:

nomobjet = new Array(Element0, Element1,..., element_n);
mesfemmes = new Array("Anita","Bernadette","Agathe","Sophie");

Explication:

Vous sauvegardez une instance objet de Array dans un nom que vous attribuez vous même. Derrière le nom est placé un signe égal à la suite duquel est placé le mot réservé new et l'appel de la fonction objet Array().

Utilisez le schéma 1 si vous ne savez pas encore au moment de la définition combien d'éléments doivent être stockés dans le tableau de variables.
Utilisez le schéma 2 si vous savez déjà au moment de la définition combien d'éléments doivent être stockés dans le tableau de variables. Vous pouvez transmettre le nombre d'éléments à la fonction objet comme paramètre.
Utilisez le schéma 3, pour remplir tout de suite le tableau de variables avec des valeurs de départ. Pour les variantes 1 et 2 les différentes variables du tableau restent vides jusqu'à ce que dans le cours du programme une valeur leur soit attribuée.

Après avoir créé une instance de l'objet Array, vous pouvez l'utiliser dans votre code JavaScript.

Exemple:

nombres = new Array(34,86,167,413);
var x = nombres[1];

Explication:

Après avoir sauvegardé une instance de l'objet Array dans un nom (dans l'exemple le nom nombres), vous pouvez comme il est montré dans la deuxième ligne, adresser les différentes valeurs dans le tableau de variables. Dans l'exemple est définie une variable usuelle x. Est affectée à cette variable la valeur de la deuxième variable du tableau, donc 86. Pensez à ce que le compteur commence à 0, c'est à dire que vous adressez la première valeur du tableau dans l'exemple avec nombres[0] la deuxième avec nombres[1] etc...

Attention:

Vous pouvez également créer des arrays pluridimensionnels.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
a = new Array(4)
for (i=0; i < a.length; ++i)
 a[i] = new Array(10);
a[3][1] = "Hello";
alert(a[3][1]);
</script>
</head><body>
</body></html>

Explication:

L'exemple définit dans un premier temps un array a à 4 éléments. Ensuite, dans une boucle for, est défini pour chacun de ces éléments un nouvel array, où pour chaque array 10 éléments vides sont créés. Enfin vous pouvez, par une mention telle que a[3][1], adresser le deuxième élément (1) dans le quatrième array (3). Dans l'exemple, cet élément se voit affecter la valeur Hello. Pour le contrôle, la valeur est sortie dans une boite de dialogue.

length

Sauvegarde le nombre d'éléments d'un array. Pensez que tous les objets JavaScript ayant une propriété length comme par exemple les objets forms ou elements, représentent des arrays pour JavaScript.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
 nombres = new Array(1,2,4,8,16,32,64,128,256);
 alert(nombres.length + " nombres sont définis");
</script>
</head><body>
</body></html>

Explication:

L'exemple définit un array comportant 9 nombres. Ensuite est sorti pour le contrôle, le nombre d'éléments contenus dans l'array.

concat()

Concatène un array à un autre. Attend comme paramètre le nom de l'array à concaténer. Renvoie l'array résultant de la concaténation.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
 nombres = new Array(1,2,3);
 autresnombres = new Array(10,20,30);
 totalnombres = new Array();
 totalnombres = nombres.concat(autresnombres);
 alert(totalnombres.length);
</script>
</head><body>
</body></html>

Explication:

L'exemple définit dans un premier temps deux arrays nombres et autresnombres, contenant chacun trois nombres, puis un array vide totalnombres. Dans ce dernier array est sauvegardé enfin la valeur renvoyée par concat(): celle-ci est employée sur le premier array défini nombres en concaténant le deuxième array autresnombres. Pour le contrôle, le nombre total des éléments de totalnombres est sorti. Cet array contient maintenant les valeurs 1,2,3,10,20,30 - et a de ce fait 6 éléments.

join()

Transforme un array en chaîne de caractères. Attend comme paramètre un ou plusieurs signes de séparation par lequel/lesquels les éléments de l'array doivent être séparés dans la chaîne de caractères.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
 nombres = new Array(1,2,4,8,16,32,64,128,256);
 chainenombres = nombres.join(" ");
 alert(chainenombres);
</script>
</head><body>
</body></html>

Explication:

L'exemple définit un array avec 9 nombres. Ensuite, la méthode join est appliquée à la variable nombres, dans laquelle l'array est sauvegardé. Ce faisant, un espace a été transmis comme paramètre dans l'exemple. La valeur renvoyée par la procédure est stockée dans la variable chainenombres. Le résultat en est que tous les nombres définis se trouvent dans chainenombres et sont alors séparés les uns des autres par des espaces. Pour le contrôle, le résultat et sorti dans une boite de dialogue.

pop()

Retire le dernier élément d'un array et modifie ainsi le nombre d'éléments dans l'array.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
 nombres = new Array(1,2,3,4,5);
 alert(nombres.length + " nombres dans l'array");
 function retire()
 {
  nombres.pop();
  alert(nombres.length + " nombres dans l'array");
 }
</script>
</head><body>
<a href="javascript:retire()">retirer un nombre</a>
</body></html>

Explication:

L'exemple définit à la lecture du fichier un array nombres avec 5 éléments. Pour le contrôle, le nombre d'éléments est sorti dans une boite de dialogue. Dans le corps de fichier de l'exemple est défini un lien qui lorsqu'on le clique appelle la fonction retire(), qui à chaque fois retire avec la méthode pop() le dernier élément de l'array nombres. Pour le contrôle, la nouvelle longueur de l'array est sortie.

push()

Ajoute un ou plusieurs éléments à la fin d'un array. Attend comme paramètre un ou plusieurs éléments à ajouter. Renvoie le dernier élément (le plus récent).

Exemple:

<html><head><title>Test</title>
</head><body>
<script language="JavaScript">
 lieux = new Array("Angoulême");
 document.write(lieux.join(",") + '<p>');
 elementplusrecent = lieux.push("Paris");
 document.write(lieux.join(",") + '<br>');
 document.write('Lieu le plus récent: ' + elementplusrecent + '<p>');
 elementplusrecent = lieux.push("Marseille","Lyon","Lille","Bordeaux");
 document.write(lieux.join(",") + '<br>');
 document.write('Élément le plus récent: ' + elementplusrecent);
</script>
</body></html>

Explication:

L'exemple crée, dans un JavaScript noté dans le corps de fichier, un array lieux, dans lequel on ne sauvegarde d'abord qu'une valeur - à savoir: Angoulême. Pour le contrôle, le contenu est écrit dans le fichier avec la méthode write(). Ensuite, on ajoute un élément à l'array avec la méthode push() - à savoir Paris. La valeur retournée par l'opération est sauvegardée dans la variable elementplusrecent. Pour le contrôle, l'array ainsi étendu et la valeur renvoyée sont écrits dans le fichier L'array est maintenant constitué des éléments Angoulême et Paris. L'élément le plus récent est Paris. Ensuite sont ajoutés selon le même schéma quatre nouveaux éléments dans l'array. Suite à quoi, l'array comprend ensuite, outre les deux villes déjà vues, les quatre nouvelles. Dans la variable elementplusrecent n'est cependant sauvegardé que le dernier, le plus récent des éléments. Dans l'exemple c'est Bordeaux. Pour le contrôle ces processus sont aussi écrits dans le fichier.

reverse()

Inverse l'ordre des éléments à l'intérieur d'un array. Le premier élément est ensuite le dernier, le dernier devient le premier.

Exemple:

<html><head><title>Test</title>
</head><body>
<script language="JavaScript">
var nom = new Array("S","T","E","F","A","N");
nom.reverse();
document.write(nom.join(""));
</script>
</body></html>

Explication:

L'exemple définit un array nom, dont les éléments sont constitués des différentes lettres du nom Stefan. Ensuite, la méthode reverse() est appliquée sur cet array. À l'aide de la méthode join() l'array est enfin écrit dans le fichier avec le nouvel ordre de ses éléments. Il y est écrit de telle sorte qu'aucun signe ne figure entre ses éléments (ce qui s'obtient par une chaîne de caractères vide "" pour join()). Le résultat en est que le nom Stefan est écrit à l'envers dans le fichier.

shift()

Retire le premier élément d'un array. Les éléments qui suivent sont déplacés vers l'avant en conséquence. Celui qui était deuxième élément jusqu'alors devient premier etc. Retourne l'élément retiré.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
 nombres = new Array(1,2,3,4,5);
 alert("Premier nombre dans l'array: " + nombres[0]);
 function retire()
 {
  elementefface = nombres.shift();
  alert("Premier nombre dans l'array: " + nombres[0]);
 }
</script>
</head><body>
<a href="javascript:retire()">retirer un nombre</a>
</body></html>

Explication:

L'exemple définit à la lecture du fichier un array nombres avec 5 éléments. Pour le contrôle, la valeur du premier élément est sortie dans une boite de dialogue, dans l'exemple 1. Dans le corps du fichier, l'exemple contient un lien qui, lorsqu'on le clique, appelle la fonction retire(), qui retire le premier élément de l'array nombres avec la méthode shift(). Pour le contrôle, le nouveau premier élément est sorti.

slice()

Extrait une partie d'un array. Attend comme paramètre le numéro d'index du premier et du dernier élément à extraire. Le numéro d'index pour le dernier élément peut également être une valeur négative. Ce qui signifie à peu près "l'élément n° tant en partant de la fin ", où là aussi on commence à compter à partir de 0. Une valeur de -1 signifie donc l'avant dernier élément.
La méthode renvoie les éléments extraits sous forme de nouvel array.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
 nombres = new Array(1,2,3,4,5);
 for(i = 0; i < nombres.length; ++i)
 {
  nouveauxnombres = nombres.slice(i,nombres.length);
  alert(nouveauxnombres.join(","));
 }
</script>
</head><body>
</body></html>

Explication:

L'exemple définit un array nombres avec 5 éléments. Ensuite, une boucle for est notée. La boucle compte de 0 à 4. Dans la bouche, à chaque tour, le résultat de nombres.slice(i,nombres.length) est sauvegardé dans un nouvel array nommé nouveauxnombres. Le compteur de boucles i y est le numéro d'index du premier élément à extraire. Le dernier élément à extraire est mentionné dans l'exemple par nombres.length (ce qui n'est à vrai dire pas tout à fait correct étant donné que le nombre d'éléments est plus élevé de 1 que l'index du dernier élément - Netscape interprète pourtant correctement de cette façon, l'Explorer Internet MS 4 interprète par contre plus conformément aux attentes; là il faut travailler avec nombres.length-1). Par les mentions tous les éléments depuis l'élément i jusqu'au dernier élément sont extraits. Étant donné que i est incrémenté à chaque passage de boucle, il y aura dans l'exemple de moins en moins de chiffres extraits, à savoir toujours les derniers de l'array.

splice()

Ajoute un ou plusieurs nouveaux éléments dans un array et cela à un certain endroit choisi. Écrase en le faisant des éléments existants. Attend les paramètres suivants:
1. index départ = numéro d'index dans l'array auquel le ou les nouveaux éléments doivent être insérés.
2. nombre = nombre d'éléments à insérer.
3.[4...] élément(s) = nouveaux éléments.
Le troisième et les paramètres suivants sont facultatifs. En ne mentionnant que les deux premiers paramètres des éléments vides seront insérés.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
 nombres = new Array(1,2,3);
 nombres.splice(1,3,4,5,6);
 alert(nombres.join(","));
</script>
</head><body>
</body></html>

Explication:

L'exemple définit un array nombres, comprenant 3 éléments avec les nombres 1 à 3. Ensuite, la méthode splice() est appliquée, et ce de la façon suivante: au numéro d'index 1 (donc au deuxième chiffre de l'array) 3 nouveaux éléments sont insérés - à savoir les éléments avec les valeurs 4, 5 et 6. Les éléments précédents avec les valeurs 2 et 3 sont écrasés avec les valeurs 4 et 5. L'élément avec la valeur 6 est ajouté. À l'issue, l'array contient donc 4 éléments avec les valeurs suivantes: 1,4,5,6.

sort()

Trie les éléments d'un array. Si vous ne transmettez aucun paramètre, le tri se fait alphabétiquement, les valeurs numériques sont transformées automatiquement en chaînes de caractères, et triées en tant que telles. De ce fait le nombre 13, par exemple, est placé avant le nombre 7, parce qu'alphabétiquement "13", comme chaîne de caractères, vient avant 7. Si vous voulez trier des valeurs numériques, vous pouvez définir une fonction de comparaison et transmettre son nom comme paramètre.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
</script>
</head><body>
<script language="JavaScript">
function trinombres(a,b)
{ return a-b; }

noms = new Array("Berthe","Charlotte","Élisabeth","Martine");
noms.sort();
nombres = new Array(27,2,10,4);
nombres.sort(trinombres);
sortienom = noms.join(",");
sortienombres = nombres.join(",");
document.write("Noms triés: " + sortienom + "<br>");
document.write("Nombres triés: " + sortienombres);
</script>
</body></html>

Explication:

L'exemple montre comment trier des chaînes de caractères et des valeurs numériques. Dans l'exemple est défini un array noms dont les éléments représentent des chaînes de caractères. Pour trier un tel array, il suffit simplement d'appliquer la méthode sort() sur l'array. Les éléments de l'array sont alors triés à nouveau alphabétiquement. Pour trier des nombres vous avez besoin d'une simple fonction de comparaison. À cet effet, vous pouvez utiliser la fonction trinombres() définie dans l'exemple. L'exemple définit un array nombres et applique la méthode sort() sur cet array en transmettant comme paramètre le nom de la fonction trinombres. Ainsi les éléments de l'array sont triés dans l'ordre numérique.
Si vous désirez un tri inverse, appliquez après la méthode sort() la méthode reverse().

unshift()

Insère au début d'un array un ou plusieurs nouveaux éléments. Attend comme paramètre les éléments à insérer. Retourne le nouveau nombre d'éléments de l'array.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
nombres = new Array(5,6,7,8,9);
nouveaunombres = nombres.unshift(1,2,3,4);
alert(nouveaunombres);
alert(nombres.join(","));
</script>
</head><body>
</body></html>

Explication:

L'exemple définit un array nombres avec 5 éléments, à savoir les nombres de 5 à 9. Ensuite sont ajoutés 4 nouveaux chiffres au début de l'array à l'aide de la méthode unshift() à savoir les chiffres de 1 à 4. La valeur renvoyée par l'opération est sauvegardée dans la variable nouveaunombres. Pour le contrôle est sortie ensuite d'abord la valeur de nouveaunombres et ensuite le nouvel array complet. Le nombre d'éléments est maintenant de 9 et l'array comprend les éléments 1,2,3,4,5,6,7,8,9.


après:	Boolean
avant:	location

SELFHTML/Quickbar JavaScript Référence objet