Premiers pas en JavaScript
méthodes pour les tableaux :
JOIN POP et autres
cuy copyleft
  See You Why?  

 


test relatif aux propriétés des tableaux (28.9) | | exercices sur les méthodes applicables aux tableaux (29.8)

Contenu


JavaScript 1 - Introduction
JavaScript 2 - Commentaires et instructions
JavaScript 3 - Variables
JavaScript 4 - Types de variables
JavaScript 5 - Variables et chaines
JavaScript 6 - Les fonctions
JavaScript 7 - Les fonctions à paramètre unique
JavaScript 8 - Les fonctions à paramètres multiples
JavaScript 9 - L'instruction RETURN dans une fonction
JavaScript 10 - Appel d'une fonction dans une autre fonction
JavaScript 11 - Les variables locales ou globales
JavaScript 12 - Quelques opérateurs mathématiques
JavaScript 13 - ???
JavaScript 14 - L'instruction IF, pour les conditions
JavaScript 15 - L'instruction IF... ELSE..., pour les conditions à deux sorties
JavaScript 16 - Les IF imbriqués et fonction aléatoire
JavaScript 17 - Les conditions complexes
JavaScript 18 - L'instruction SWITCH, en cas de choix multiples
JavaScript 19 - La boucle FOR
JavaScript 20 - La boucle WHILE
JavaScript 21 - Les événements dans la programmation
JavaScript 22 - Quelques événements : onMouseOver onLoad etc.
JavaScript 23 - Les objets
JavaScript 24 - Créer ses propres objets
JavaScript 25 - Appliquer des méthodes à ses objets
JavaScript 26 - Les tableaux
JavaScript 27 - Différentes façons de créer des tableaux
JavaScript 28 - Propriétés et méthodes applicables aux tableaux
JavaScript 29 - Les méthodes applicables aux tableaux
29.1 JS : Les méthodes applicables aux tableaux
29.8 JS : exercices sur les méthodes des tableaux
29.9 JS : un test sur les méthodes des tableaux
JavaScript 30 - Méthodes de tris pour tableaux SORT, REVERSE et PUSH
JavaScript 31 - Ajouter des éléments à un tableau en utilisant une boucle
JavaScript 32 - Tecnique pour imprimer les éléments d'un tableau
JavaScript 33 - Lecture de bases de données
JavaScript 34 - Les objets mathématiques
JavaScript 35 - Les objets relatifs aux dates
JavaScript 36 - Les formulaires JS sont des objets
JavaScript 37 - Accès aux éléments d'un formulaire
JavaScript 38 - Validation des entrées d un formulaire
JavaScript 39 - Graphisme et JavaScript

JavaScript 50 - Calculateur d'emprunt
JavaScript 51 - Calendrier perpétuel et options diverses
JavaScript 99 - Documentation


 
 

 
Avec un peu de JavaScript,
n'oubliez pas de rendre vos pages
plus dynamiques et plus interactives.
 

 
 

 
Notre volonté est de rendre cette formation de JavaScript,
disponible le plus rapidement possible.
Le lecteur excusera l'imperfection de ce travail en cours de construction
et pourrait nous informer des défauts rencontrés.

  MERCI
 

 

 

I. Méthodes pour les tableaux

Plusieurs méthodes prédéfinies sont applicables aux tableaux ; nous en avons fait un tour rapide dans le chapitre précédent. Ici, nous comptons illustrer chaque méthode d'un exemple. Vous lirez à tour de rôle des commentaires à propos de la méthode Join, Pop, Concat, Push, Reverse, Shift, Slice, Sort, Splice, Unshift, toString, valueOf, indexOf.

 

A. méthode JOIN

La méthode join appliquée à un tableau crée une chaine de caractères de tous les éléments du tableau qui seront séparés par le ou les caractères mis en paramètres de la méthode join.
Cette méthode remplace l'ancienne méthode toString.

Si aucun paramètre n'est donné à la méthode join, il sera fait usage de la virgule comme séparateur par défaut.
Si un élément du tableau a la valeur undefined ou null, il sera traité comme une chaîne vide.

Ainsi le tableau :
var fruits = new Array("Orange", "Banane", "Fraise", "Pomme", "Poire", "Abricot");
auquel on applique la méthode
join("**"), ce qui s'écrira fruits.join("**") créera la chaine
Orange**Banane**Fraise**Pomme**Poire**Abricot

 

 

B. méthode POP

La méthode pop appliquée à un tableau supprime le dernier élément d'un tableau et le retourne comme valeur.
Certains disent que c'est la méthode LIFO (last in, first out) qui est appliquée pour l'ordre de sortie des éléments du tableau, j'éviterais certaine comparaison hâtive ; je préfère dire que c'est l'élément qui a le plus grand indice qui sort, mais il n'est pas forcément le dernier entré.
Si le tableau est vide, la valeur undefined est retournée.

Ainsi le tableau :
var fruits = new Array("Orange", "Banane", "Fraise", "Pomme", "Poire", "Abricot");
auquel on applique la méthode
pop(), ce qui s'écrira fruits.pop() se videra successivement par les valeurs
Abricot Poire Pomme Fraise Banane Orange si on parcourt le tableau par une boucle et que l'on suit l'instruction suivante :

fruit = fruits.pop();
while (fruit != undefined) {
    document.write (fruit + " ");
    fruit = fruits.pop();
}

 

 

C. méthode CONCAT

La méthode concat appliquée à un tableau a déjà été rencontrée lors de la manipulation de chaines de caractères.
Comme son nom l'indique, elle effectuera une concaténation, mais ici pas une concaténation de chaines ou string, mais de tableaux.
La syntaxe générale est :
fruits.concat(el1[, el2[, . . . [, elN]]])

Les paramètres de la méthode concat ne sont pas obligatoires, mais quel est le sens de ne concaténer aucun élément. Nous avons donc noté un premier élément el1, non facultatif.
Les éléments ajoutés au tableau initial (fruits ici), seront ajoutés dans le même ordre que noté dans l'instruction ;
* si un élément est un tableau (variable c dans notre exemple), chaque élément de ce tableau sera un nouvel élément du tableau initial ;
* si un élément n'est pas un tableau (variable b dans notre exemple), cet élément sera considéré comme un tableau à élément unique et s'ajoutera comme nouvel élément du tableau initial.

Un exemple :

var fruits, b, c, d_conc;
fruits = new Array("Orange", "Banane", "Fraise", "Pomme", "Poire", "Abricot");
b = "Kiwi";
c = new Array(42, 25, "Tomate");
d_conc = fruits.concat(b, c);
document.write(d_conc);

écrira :

Orange,Banane,Fraise,Pomme,Poire,Abricot,Kiwi,42,25,Tomate

 

 

D. méthode PUSH

La méthode push appliquée à un tableau agit de façon très semblable à la méthode concat vue ci-avant.
Leur différence essentielle est que :
- concat est initialement destinée à concaténer des tableaux, même si elle accepte des éléments non tableaux,
- et push est initialement destinée à ajouter des éléments à la fin d'un tableau, même si elle accepte des éléments tableaux.

Nous avions fait une remarque concernant la méthode LIFO (Last In First Out) à propos de la méthode pop appliquée aux tableaux, nous acceptons cependant mieux ce système d'empilage des données si les méthodes push et pop sont employées alternativement.

 

Ainsi le tableau vide au départ :
var fruits = new Array();
auquel on applique deux fois la méthode
push(liste de paramètres),
ce qui s'écrira fruits.push("Orange", "Banane", "Fraise", "Pomme") puis encore fruits.push("Poire", "Abricot") pourra se vider par la méthode pop dans une boucle

fruit = fruits.pop();
while (fruit != undefined) {
    document.write (fruit + " ");
    fruit = fruits.pop();
}

et créera la chaine suivante :
Abricot Poire Pomme Fraise Banane Orange

 

E. méthode REVERSE

La méthode reverse appliquée à un tableau n'a pas d'autre but que d'inverser l'ordre des éléments d'un tableau.
Le lecteur comprendra que cette méthode ne peut pas avoir d'arguments. Une simple application de la parole sage "les premiers seront les derniers et vice versa".

Ainsi,

var fruits, fr_inv;
fruits = new Array("Orange", "Banane", "Fraise", "Pomme", "Poire", "Abricot");
fr_inv = fruits.reverse();
document.write(fr_inv);

écrira :

Abricot,Poire,Pomme,Fraise,Banane,Orange

Le lecteur attentif aura remarqué que les guilles étaient inutiles dans cet exemple, car aucune espace dans les valeurs concaténées.

 

 

F. méthode SHIFT

La méthode shift appliquée à un tableau est l'inverse de la méthode pop.
Si la méthode pop appliquée à un tableau supprime le dernier élément d'un tableau et le retourne comme valeur, la méthode shift appliquée à un tableau supprime le premier élément d'un tableau et le retourne comme valeur.

Ainsi le tableau :
var fruits = new Array("Orange", "Banane", "Fraise", "Pomme", "Poire", "Abricot");
auquel on applique la méthode
shift(), ce qui s'écrira fruits.shift(), sans paramètres, se videra successivement par les valeurs
Orange*+*Banane*+*Fraise*+*Pomme*+*Poire*+*Abricot*+* si on parcourt le tableau par une boucle et que l'on suit l'instruction suivante :

fruit = fruits.shift();
while (fruit != undefined) {
    document.write (fruit + "*+*");
    fruit = fruits.shift();
}

 

 

G. méthode SLICE

La méthode slice appliquée à un tableau coupe ce tableau en une tranche dont l'épaisseur (le nombre d'éléments) dépendra des valeurs des paramètres debut et fin de la méthode.
La cas le plus facile est d'avoir des paramètres entiers positifs dont le premier est inférieur au second.

var fruits = new Array("Orange", "Banane", "Fraise", "Pomme", "Poire", "Abricot");
var notres = fruits.slice(2,5);

signifierait que notres est un nouveau tableau dont
- le premier élément soit celui d'indice 2 du tableau initial (donc le 3e) ;
- le dernier élément soit celui qui précède celui d'indice 5 (donc qui précède le 6e).
Notre tableau notres comprendrait donc "Fraise", "Pomme", "Poire", ce qui signifie que notre nouveau tableau aura une longueur (length) égale à la différence entre nos paramètres.
Cependant, les erreurs sont fréquentes, car
- l'élément d'indice depart est repris dans le nouveau tableau,
- l'élément d'indice fin est exclu du nouveau tableau.

Le deuxième paramètre est facultatif... s'il est omis, tous les éléments à partir de celui d'indice depart seront retenus.

Si vous voyez des paramètres négatifs dans cette méthode, c'est que l'on compte à partir de la fin de l'array. Ainsi :
var fruits = new Array("Orange", "Banane", "Fraise", "Pomme", "Poire", "Abricot");
var notres = fruits.slice(-3,-1);
retournera le tableau comprenant "Pomme", "Poire", puisqu'on compte du 3e à partir de la fin compris jusqu'au 1er à partir de la fin exclu. Plus d'indice zéro si l'on compte à l'envers... pas de 0° si l'on compte les températures de gel. Et le nombre d'éléments est aussi la différence entre -3 et -1 c-à-d 2.

 

 

H. méthode SORT

La méthode sort appliquée à un tableau n'a d'autre but que de trier par ordre croissant ou par ordre alphabétique croissant les éléments du tableau auquel la méthode est appliquée.
Une application de nos anciens instits qui nous demandaient de nous ranger par ordre de taille ou par ordre alphabétique de nos noms de famille.
Le lecteur comprendra qu'il n'y a pas de paramètres à placer pour cette méthode et que le tableau initial comprend le même nombre d'éléments que le tableau final.

Et si je les veux dans l'ordre décroissant ? Le lecteur aura compris qu'il suffit d'appliquer la méthode reverse après la méthode sort.

Le lecteur se rappellera que pour trier alphabétiquement, on effectue d'abord un tri sur le premier caractère,
en cas d'égalité pour le tri sur le premier caractère, on passe au deuxième caractère,
ainsi de suite.

Ainsi, s'il faut trier le tableau ("Fraise", "Pomme"), JS renverra ("Fraise", "Pomme"),
    car le caractère 'F' est plus petit que le caractère 'P' ;
Ainsi, s'il faut trier le tableau ("Pomme", "Poire"), JS renverra ("Poire", "Pomme"),
    car les deux premiers caractères sont identiques, le 3e caractère 'i' est plus petit que le caractère 'm' ;
Ainsi, s'il faut trier le tableau ("fraise", "Pomme"), JS renverra ("Pomme", "fraise" ),
    car le caractère 'P' est plus petit que le caractère 'f'...
    en effet, les lettres capitales ont un code ASCII inférieur aux bas de casse ;
Ainsi, s'il faut trier le tableau (8, 56), JS renverra (56, 8),
    car le caractère '5' est plus petit que le caractère '8'.

Le lecteur intéressé par les codes ASCII des caractères peut en savoir plus en consultant notre page http://cuy.be/html/chars.html#0car_ordin.

Le chapitre suivant nous expliquera comment trier des valeurs numériques... par ordre croissant de leurs valeurs et non par ordre alphabétique ou lexicographique.

 

I. méthode SPLICE

La méthode splice appliquée à un tableau coupe aussi ce tableau en supprimant (et facultativement en remplaçant) une tranche dont l'épaisseur (le nombre d'éléments) dépendra des valeurs des paramètres debut et nbr de la méthode.
Cependant dans le cas de la méthode splice les deux premiers arguments indispensables ont une signification différente.

var fruits = new Array("Orange", "Banane", "Fraise", "Pomme", "Poire", "Abricot");
var notres = fruits.splice(2,3);

signifierait que notres est un nouveau tableau, créé à partir du tableau fruits dont on aura supprimé une tranche dont
- le premier élément soit celui d'indice 2 du tableau initial (donc le 3e) ;
- et le nombre d'éléments supprimés soit 3.
Notre tableau notres comprendrait donc "Orange", "Banane", "Abricot", ce qui signifie que notre nouveau tableau aura une longueur (length) égale à la différence entre la longueur du tableau initial diminuée du 2e paramètre (6 moins 3 dans notre exemple).

Si la méthode splice compte plus d'arguments que deux, les arguments supplémentaires indiquent par quoi il faut remplacer la tranche supprimée. Ainsi :

var fruits = new Array("Orange", "Banane", "Fraise", "Pomme", "Poire", "Abricot");
var notres = fruits.splice(2,3, "Mangue", "Tomates", 23);

signifierait que notres est un nouveau tableau, créé à partir du tableau fruits dont on aura supprimé une tranche dont
- le premier élément soit celui d'indice 2 du tableau initial (donc le 3e) ;
- et le nombre d'éléments supprimés soit 3.
Notre tableau notres comprendrait donc "Orange","Banane","Mangue","Tomates",23,"Abricot", ce qui signifie que notre nouveau tableau aura une longueur (length) égale à la différence entre la longueur du tableau initial diminuée du 2e paramètre, le tout augmenté du nombre de paramètres supplémentaires facultatifs (6 moins 3 supprimés plus 3 remplacés dans notre exemple).

 

 

J. méthode UNSHIFT

La méthode unshift appliquée à un tableau est à rapprocher des méthodes pop, mais aussi push et shift.
La méthode pop appliquée à un tableau supprimait le dernier élément d'un tableau et le retournait comme valeur.
La méthode shift appliquée à un tableau supprime le premier élément d'un tableau et le retourne comme valeur.
Et la méthode push est initialement destinée à ajouter des éléments à la fin d'un tableau, un peu comme la méthode concat destinée à ajouter des éléments de tableaux à la fin d'un tableau.

La méthode unshift appliquée à un tableau ajoute les éléments passés en paramètres comme premiers éléments d'un tableau.
À vous de relire et modifier ce qui a été dit à propos de la méthode pop et autres.

Cependant, le premier premier argument sera le premier élément du nouveau tableau créé par la méthode unshift.

 

 

K. méthode TOSTRING

La méthode toString appliquée à un tableau convertit en chaines concaténées tous les éléments d'un tableau séparés par des virgules.

Cette méthode est devenue obsolète car remplacée par la plus actuelle méthode join.

 

 

L. méthode VALUEOF

La méthode valueOf est une méthode typique à des objets différents de JS.
Appliquée à un tableau, elle renvoie une chaine de caractères avec la liste des valeurs actuelles de l'instance de l'array ou du tableau.

L'objet Math n'a pas de valeur associée à la méthode valueOf. Appliquée à un tableau, elle retourne la même valeur que la fonction toString ou mieux, que la fonction join.

 

 

M. méthode INDEXOF

La méthode indexOf est une méthode typique à des objets de type chaine de caractères propres à JS.
EcmaScript l'a reprise pour les objets de type tableau, mais Internet Explorer n'a pas étendu cette méthode aux tableaux ou arrays.

Pour les chaines de caractères, la méthode indexOf() renvoie la position de la première occurence d'une sous-chaine dans une chaine :
<script type="text/javascript">
var chaine = "ceci est un exemple d'une chaîne de test";
var result = chaine.indexOf("un");
document.write(result);
</script>

Si l'on n'oublie pas que la position 1 a comme indice 0... on comprendra que le script ci-dessus imprimera "9", car 'un' figure pour la première fois en 10e position (les espaces occupent aussi une place).

Il était souhaitable de positionner de la même façon un élément dans un tableau d'éléments. Ainsi :
var ar = ["ab", "cd", "ef", "ab", "cd"];
// Determine la première position de "cd".
document.write(ar.indexOf("cd") + "<br/>");
// Affiche : 1 (car 2e position)
// Détermine la première position de "cd" à partir de l'indice 2.
document.write(ar.indexOf("cd", 2) + "<br/>");
// Affiche : 4 (car 5e position, celle en position 2, indice 1 est négligée
// Détermine la première position de "gh" (non trouvée).
document.write (ar.indexOf("gh")+ "<br/>");
// Affiche : -1

Et comme Internet Explorer n'avait pas inclus cette méthode ni dans IE6, ni IE7, ni IE8, il était facile de définir la méthode en usitant la propriété prototype, vue dans le chapitre précédent (voir propriété prototype des tableaux).

Pour ce faire, il suffisait d'ajouter ceci à sa source, pour que la méthode indexOf soit implémentée pour tous les tableaux :
if( ! Array.indexOf) {
    Array.prototype.indexOf = function( obj ) {
        for( var i=0; i< this.length; i++ ) {
            if( this[i] == obj ) {
                return i;
            }
        }
    }
}

et le tour était joué... pas très dur de faire mieux que Micro§oft, alors que lui a attendu 3 versions d'IE pour 'découvrir' cette facilité. Vive 'nous' ! Heureusement, ils ont trouvé depuis la version 9 d'IE.

 

 

VIII. Exercices relatifs aux méthodes pour les tableaux

voir suite >>>

 

 

IX. Test relatif aux méthodes pour les tableaux

voir suite >>>

 

 


test relatif aux propriétés des tableaux (28.9) | | exercices sur les méthodes applicables aux tableaux (29.8)