|
méthodes pour les tableaux : JOIN POP et autres |
  copyleftSee You Why? |
| | exercices sur les méthodes applicables aux tableaux (29.8) 
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.
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
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();
}
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
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
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.
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();
}
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"); retournera le tableau comprenant
var notres = fruits.slice(-3,-1);"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.
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.
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).
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.
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.
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.
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.
voir suite >>>
voir suite >>>
| | exercices sur les méthodes applicables aux tableaux (29.8)