1. Tableau simple (indexé)
1.1 Déclarer et peupler
Il y a deux façons de déclarer et de peupler un tableau indexé :
- var tableau_simple = ['premier', 'deuxième', 'troisième'];
- var tableau_simple = new Array('premier', 'deuxième', 'troisième');
tableau_simple, est donc une instance de
Array et contient
tableau_simple.length (3) éléments allant de l'indice 0 à l'indice 2 :
['premier', 'deuxième', 'troisième'].
On préférera la première méthode. On appelle ça une forme littérale.
Une dernière méthode consiste à déclarer le tableau avec un seul paramètre : la taille de celui-ci (si elle est connue à l'avance). Certains navigateurs améliorent ainsi les performances.
- var tableau_simple = new Array(3);
tableau_simple, est donc une instance de
Array et contient
tableau_simple.length (3) éléments vide allant de l'indice 0 à l'indice 2 :
[undefined, undefined, undefined].
1.2 Ajouter des éléments
- tableau_simple.push('quatrieme');
- tableau_simple[3] = 'quatrieme';
tableau_simple contient maintenant
tableau_simple.length (4) éléments allant de l'indice 0 à l'indice 3 :
['premier', 'deuxième', 'troisième', 'quatrieme'].
On préférera la première méthode. La deuxième permettant de modifier un élément du tableau s'il y en a déjà un à cet indice, ou en ajouter un s'il n'y en a pas.
Attention, si on ajoute un élément à l'indice 99 (
tableau_simple[99] = '100ème';) de ce tableau, la taille (
tableau_simple.length) sera alors de 100 et il y aura 95 éléments vides entre l'indice 4 et l'indice 98. (
["premier", "deuxième", "troisième", "quatrieme", undefined × 95, "100ème"])
1.3 Lire les éléments
Vous l'aurez compris, pour accéder au 4ème élément, il faut lire le troisième indice car la numérotation commence à 0.
- tableau_simple[3]; // quatrieme
Pour savoir si un indice contient un élément :
- 3 in tableau_simple; // true
- 199 in tableau_simple; // false
Le plus intéressant étant de boucler sur les éléments, voici les différentes méthodes.
La manière "sûre" qui fonctionne sur tous les navigateurs, sur les tableaux indexés uniquement :
Code:
1
2
3
| for (var i = 0; i < tableau_simple.length ; i++)
console.log('Indice ' + i + ' contient ' + tableau_simple[i]);
// Cela affichera donc les 100 éléments, et affichera "undefined" pour les indices n'ayant aucun élément |
Utiliser une méthode "récente", qui ne fonctionne pas partout (seulement IE > 9, Firefox > 1.5) :
Code:
1
2
3
4
5
| tableau_simple.forEach(
function (element, indice){
console.log('Indice ' + indice + ' contient ' + element);
});
// Attention /!\ Cela n'affichera pas les "trous" du tableau, dû à la création de l'élément 99 qui les a généré |
1.4 BONUS ! Avoir conscience des "trous"
On vient de le voir, les méthodes d'itération (forEach, map) n'affichent pas les éléments "trou". En effet, un tableau (
Array) peut avoir des trous et être ainsi "clairsemé".
Pour créer des trous, c'est simple :
- var tableau_a_trous = [ , , 'trois' ];
- delete tableau_simple[3]; // suppression d'un élément à un indice précis, sans pour autant réorganiser le tableau et donc, créer un trou
- tableau_a_trous.length = 1000; // cela va créer des trous jusqu'à l'indice 999
- tableau_a_trous[1500] = 'dvp'; // comme vu précédemment, cela va combler les indices manquants jusqu'à 1499 par des trous
- var tableau_a_trous = new Array(3); // cela va créer trois trous
Pour savoir si un indice contient un "trou", faire simplement
3 in tableau_a_trous; // false si il y a un trou à l'indice 3.
Attention, saisir
undefined comme élément n'est pas considéré comme un trou !
Code:
1
2
3
4
5
| var tableau_trous = [ , , 'trois' ];
var tableau_dense = [ undefined, undefined, 'trois' ];
0 in tableau_trous; // false
0 in tableau_dense; // true |
2. Tableau associatif
Bien qu'il y ait un constructeur de tableau indexé (
Array), il n'y a pas pour autant de constructeur de tableau associatif. En effet, il faut utiliser le constructeur d'objet global :
Object.
/!\ Attention, length est une propriété interne de Array. Les tableaux associatifs en Javascript n’ont donc pas cette propriété.
Un
Object c'est un tableau de clés (ou propriétés) auxquelles sont associées des valeurs. Cela en fait donc un tableau associatif.
2.1 Déclarer et peupler
Il y a deux façons de créer et peupler un tableau associatif :
- var tableau_associatif = {nom: 'Eich', prenom: 'Brendan', age: 52};
-
Code:
1
2
3
4
| var tableau_associatif = new Object();
tableau_associatif.nom = 'Eich';
tableau_associatif.prenom = 'Brendan';
tableau_associatif.age = 52; |
tableau_associatif, est donc une instance de
Object et contient plusieurs propriétés ayant chacune une valeur. A noter, qu'il n'y a pas de variable interne de "longueur". Il faudra la récupérer autrement.
On préférera la première méthode. On appelle ça une forme littérale.
Ouverture ES5 :
Object.create().
2.2 Ajouter des éléments
- tableau_associatif.loveJS = true;
- tableau_associatif["langages_preferes"] = ['js', 'java'];
Ouverture ES5 :
Object.defineProperty() et
set.
2.3 Lire les éléments
- tableau_associatif.loveJS; // true
- tableau_associatif["nom"]; // Eich
Ouverture ES5 :
Object.getOwnPropertyDescriptor(),
get.
La manière "sûre" qui fonctionne sur tous les navigateurs. Cela consiste à lire les propriétés appartenant à l'instance de l'objet (notre tableau associatif donc)
Code:
1
2
3
4
5
6
7
8
9
| for (propriete in tableau_associatif) if (tableau_associatif.hasOwnProperty(propriete))
console.log('Propriete ' + propriete + ' contient ' + tableau_associatif[propriete]);
/* Cela affichera :
Propriete nom contient Eich
Propriete prenom contient Brendan
Propriete age contient 52
Propriete loveJS contient true
Propriete langages_preferes contient js,java
*/ |
