Programmation JavaScript/Références/Objets/Array

Un livre de Wikibooks.

Programmation JavaScript
Programmation JavaScript
Sommaire
  1. Introduction Image:100%.svg
  2. Présentation
  3. Syntaxe Image:50%.svg
    1. Ligne d'instruction Image:100%.svg
    2. Ordre d'évaluation Image:100%.svg
    3. Bloc d'instructions Image:100%.svg
    4. Identificateurs Image:100%.svg
    5. Expression littérale Image:100%.svg
    6. Commentaire Image:100%.svg
    7. Mots réservés et constantes Image:100%.svg
    8. Variables Image:100%.svg
    9. Opérateurs Image:100%.svg
    10. Structures de contrôle Image:75%.svg
      1. if else
      2. ? :
      3. switch
      4. for
      5. while
      6. do
    11. Fonctions utilisateur Image:100%.svg
    12. Evenement Image:75%.svg
    13. Objets prédéfinis Image:00%.svg
      1. window Image:25%.svg
      2. document Image:25%.svg
      3. navigator Image:25%.svg
      4. Array (tableaux) Image:100%.svg
      5. Boolean Image:00%.svg
      6. Date Image:25%.svg
      7. Error Image:00%.svg
      8. Function Image:00%.svg
      9. Math Image:25%.svg
      10. Number Image:25%.svg
      11. Object Image:00%.svg
      12. RegExp Image:00%.svg
      13. String Image:25%.svg
    14. Fonctions prédéfinies
  4. Mise en oeuvre
  5. Programmation avancée
    1. Opérateurs de bits Image:00%.svg
    2. Programmation objet Image:00%.svg
    3. Gestion d'évennements Image:00%.svg
    4. Exceptions et erreurs Image:00%.svg
    5. Interface DOM Image:00%.svg
    6. Objets Microsoft Image:00%.svg
    7. Applets Java Image:00%.svg
    8. Notation JSON Image:00%.svg
    9. AJAX Image:00%.svg
  6. Debuggage
  7. Exemples commentés
  8. RéférencesImage:00%.svg
    1. Évènements
    2. Liens
Modifier ce modèle ce sommaire

<< Retour au sommaire détaillé / << Références/Objets / >>

[modifier] Caractéristiques

  • Les tableaux de type Array sont dynamiques. Il n'est pas nécessaire de les dimensionner à l'avance, et leurs taille peut croitre ou décroitre en fonction du nombre d'éléments contenus. La propriété length, en lecture seule, contient en permanence le nombre d'éléments compris entre l'indice zero et l'indice entier positif de poid le plus fort.
  • Il n'est pas obligatoire que les éléments soient contigus.
  • L'objet Array combine les caractéristiques d'un tableau classique (adressage des éléments par l'indice 0,1...n), et les caractéristiques d'un tableau associatif (adressage des éléments avec un identificateur entre guillemets). L'interpréteur est très souple, il est possible de panacher les deux modes. Mais dans ce cas, la popriété length ne comptabilisera pas les cellules déclarées en mode associatif.
  • Souplesse de l'interpréteur, encore, il est possible de mentionner des indices négatifs! Fort heureusement, ils n'influencent pas la valeur de length, qui gère les indices à partir de zero.
  • Un même tableau peut contenir plusieurs types de données, comme des chaînes, nombres, objets, ou ... tableaux, ce qui permet de construire de véritable structures de données.

[modifier] Propriétés

Une seule propriété : length.


Propriété Lecture/Ecriture type
length Lecture seule entier

[modifier] Méthodes

Voici une description succinte des méthodes classées par fonctionalités. En cliquant sur le nom de la méthode, vous accédez à une descripton plus détaillée avec exemples.

[modifier] Modification du contenu

Propriété Description Exemple
pop() Supprime le dernier élément mon_tableau.pop()
push() Ajoute un ou plusieurs éléments à la fin mon_tableau.push("nouveau","deuxième nouveau")
shift() Supprime le premier élément mon_tableau.shift()
unshift() Ajoute des éléments au début mon_tableau.unshift("nouveau1", "nouveau2")
splice() Insère des éléments mon_tableau.splice(ou,2,"nouveau1","nouveau2")
reverse() Réorganise le tableau de la fin vers le début mon_tableau(reverse)
concat() Concaténer plusieurs tableaux mon_tableau.concat(T2,t3)

[modifier] Obtenir des données

Propriété Description Exemple
join() Extrait les données dans une chaîne avec le délimiteur donné en paramètre s = mon_tableau.join(" ")
slice() Renvoie un tableau contenant 'nombre' cellules à partir de 'debut' n_tab = mon_tableau.slice(debut,nombre)

[modifier] Trier

Propriété Description Exemple
sort() Trier le tableau mon_tableau.sort()

[modifier] Méthodes héritées

Propriété Description Exemple
toString() Renvoyer le contenu de l'objet sous forme de chaîne s = mon_tableau.toString()
toLocaleString() Renvoyer le contenu de l'objet sous forme de chaîne s = mon_tableau.toLocaleString()

[modifier] Manipulation

[modifier] Instanciation :

L'instanciation consiste à invoquer le constructeur de l'objet à l'aide du mot réservé new.

Instanciation d'un objet Array
mon_tableau = new Array(); // Simple et direct
mon_tableau = new Array(10); // Imposition de dix cases vides, (de 0 à 9) length vaut 10
// Note : rien n'empèche immédiatement après de faire mon_tableau[11] (dynamisme)

mon_tableau = new Array("Elément 1", "Elément 2"); // Remplissage à la déclaration.

[modifier] Adressage d'un élément :

Adressage d'un élément
t = new Array(null,null,null,"Contenu de trois"); // Création avec 4 éléments
t["nom"] = "contenu de 'nom'";
alert(t[0]); // Affiche 'null'
alert(t[3]); // Affiche "Contenu de trois";
alert(t["nom"]); // Affiche "contenu de 'nom'"
alert(t[4]); // Affiche "undefined"

[modifier] Lecture de la propriété length :

Lecture de la propriété length
t = new Array(null,null,null,"Contenu de trois"); // Création avec 4 éléments

var nb_elements = t.length; // Lecture de length dans une variable

alert("Le tableau a " + t.length + " éléments"); // Affiche "le tableau a 4 éléments"

for(i = 0; i < t.length; i++)
    alert("contenu de : " + i + t[i]);
// Afiche "null", puis "null", "null" et "Contenu de trois"

[modifier] Utilisation d'une méthode :

Tri d'un tableau
t = new Array("Premier","Deuxieme","Troisieme");
t.sort(); // Invocation de la méthode sort()
alert(t); // Affiche "Deuxieme,Premier,Troisieme", soit le contenu par ordre aphabétique

[modifier] Références

[modifier] Modifier le contenu du tableau

[modifier] concat()
Méthode: concat ( array1 [ , array2 , array3 ] )
Rôle : Le ou les tableaux envoyés en paramètres sont ajoutés à la fin du tableau.
Arguments : Le ou les tableaux à ajouter, séparés par des virgules
Valeur revoyée : Un tableau contenant les éléments du tableau de départ plus les tableaux ajoutés.

[modifier] pop()
Méthode: pop()
Rôle : Le dernier élément du tableau est suprimé du tableau et renvoyé.
Arguments : aucun
Valeur revoyée : l'élément suprimé

[modifier] push()
Méthode: push ( var1 [ , var2 , var3 ] )
Rôle : ajoute un ou plusieurs éléments à la fin.
Arguments : Le ou les éléments à ajouter, séparés par des virgules.
Valeur revoyée : Jusqu'à JavaScript 1.2, renvoie le dernier élément ajouté. Avec les versions plus récentes, renvoie la taille du tableau.

[modifier] shift()
Méthode: shift()
Rôle : Le premier élément du tableau est suprimé et renvoyé.
Arguments : aucun
Valeur revoyée : l'élément suprimé

[modifier] unshift()
Méthode: unshift( var1 [ , var2 , var3 ])
Rôle : Un élément ou plusieurs éléments sont inserés au début du tableau.
Arguments : aucun
Valeur revoyée : La nouvelle longueur

[modifier] splice()
Méthode: splice (indice , nombre [ , var1 , var2 , var3 ] )
Rôle : Remplace (éventuellement ajoute) un certain nombre d'éléments à l'endroit spécifié.
Arguments :

Indice (base zero)
Nombre d'éléments

Au choix: rien, un, ou plusieurs éléments
Valeur revoyée : aucun ou le tableau des éléments coupés

[modifier] reverse()
Méthode: reverse()
Rôle : Inverse l'ordre des éléments.
Arguments : aucun
Valeur revoyée : aucun

[modifier] Obtenir des données

[modifier] join()
Méthode: join( [ sep_string ] )
Rôle : Renvoi une chaîne contenant les éléments du tableau séparés par le ou les caractères transmis en argument.
Arguments : le (ou les) caractères de séparation
Valeur revoyée : La chaîne ainsi construite

[modifier] slice()
Méthode: slice( indice, nombre )
Rôle : Renvoi un tableau contenant un nombre d'éléments extraits à partir de l'indice.
Arguments :

Indice

Nombre
Valeur revoyée : Le tableau résultant

[modifier] Trier le tableau

[modifier] sort()

Prévue en standard pour trier des chaînes alphanumériques, la méthode sort est capable de bien plus grâce au mécanisme de fonction de comparaison externe.
En effet, en programmant judicieusement cette fonction, vous pouvez trier des nombres, des dates, ou même des objets abstraits.

Méthode: sort( [ comparateur() ] )
Rôle : Effectue le tri du tableau. Selon le mode désiré, il peut être nécessaire de définir une fonction de comparaison, et la transmettre en argument.
Arguments :

Tri en mode caractère : Pas d'argument

Tri en mode numérique : Une fonction de comparaison
Valeur revoyée : Aucun

1er exemple : fonction de tri ascendant définie à part, appelée ensuite par son nom dans la fonction sort.

tri ascendant
function pour_tri_ascendant(n1, n2))
{
    return (n1 - n2);   // Retourne positif si n1 > n2, négatif ou nul si n1 < n2
}

t = new Array(1,3,2);
t.sort(pour_tri_ascendant);
alert(t.join(",")); // Affiche "1,2,3"

2eme exemple : fonction de tri descendante.

tri descendant
function pour_tri_descendant(n1, n2))
{
    return (n2 - n1);   // Retourne positif si n1 < n2, négatif ou nul si n1 > n2
}

t = new Array(1,3,2);
t.sort(pour_tri_descendant);
alert(t.join(",")); // Affiche "3,2,1"

3eme exemple : Intégration d'un fonction anonyme directement définie dans le paramètre.

fonction intégrée
t = new Array(1,3,2);
t.sort( function(n1,n2) { return n1-n2; } );
alert(t.join(",")); // Affiche "1,2,3"


4eme exemple : tri d'une notion abstraite (petit moyen grand).

tri abstrait
function compare_taille(s1,s2)
{
        if (s1=="petit") return -1;
        
        if (s1=="moyen")
        {
                if (s2=="petit") return 1; 
                        else return -1;
        }
        
        if (s1=="grand") return 1;
        
        return 0; // Egalité
}

t = new Array("petit","grand","moyen","grand","petit","moyen");
t.sort( compare_taille);
alert(t.join(",")); // // Affiche "petit,petit,moyen,moyen,grand,grand"