Programmation JavaScript/Références/Objets/Array
Caractéristiques modifier
- Les tableaux de type Array sont dynamiques. Il n'est pas nécessaire de les dimensionner à l'avance, et leurs taille peut croître ou décroître en fonction du nombre d'éléments contenus. La propriété length contient le plus grand indice entier positif + 1.
- 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 propriété
lengthne 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 zéro.
- 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.
Propriétés modifier
Une seule propriété : length[1].
| Propriété | Lecture/Ecriture | type |
|---|---|---|
| length | Lecture seule | entier |
Méthodes modifier
Voici une description succincte des méthodes classées par fonctionnalités.
Modification du contenu modifier
| Méthode | Description | Exemple |
|---|---|---|
| pop() | Supprime et retourne 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)
|
concat() modifier
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 renvoyée : | Un tableau contenant les éléments du tableau de départ plus les tableaux ajoutés. |
pop() modifier
Méthode: pop()
| Rôle : | Le dernier élément du tableau est supprimé du tableau et renvoyé. |
| Arguments : | aucun |
| Valeur renvoyée : | l'élément supprimé |
push() modifier
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 renvoyée : | Jusqu'à JavaScript 1.2, renvoie le dernier élément ajouté. Avec les versions plus récentes, renvoie la taille du tableau. |
shift() modifier
Méthode: shift()
| Rôle : | Le premier élément du tableau est supprimé et renvoyé. |
| Arguments : | aucun |
| Valeur renvoyée : | l'élément supprimé |
unshift() modifier
Méthode: unshift( var1 [ , var2 , var3 ])
| Rôle : | Un élément ou plusieurs éléments sont insérés au début du tableau. |
| Arguments : | aucun |
| Valeur renvoyée : | La nouvelle longueur |
splice() modifier
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) |
| Valeur renvoyée : | aucun ou le tableau des éléments coupés |
reverse() modifier
Méthode: reverse()
| Rôle : | Inverse l'ordre des éléments. |
| Arguments : | aucun |
| Valeur renvoyée : | aucun |
Obtenir des données modifier
| Méthode | 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)
|
at() modifier
Méthode: at( [ nombre ] )
| Rôle : | Renvoie la valeur correspondant à la clé passée en paramètre. |
| Arguments : | clé |
| Valeur renvoyée : | valeur correspondante |
Ex :
const tableau = ['a', 'b', 'c']; console.log(tableau.at(0)); // a console.log(tableau.at(-1)); // c
find() modifier
Méthode: find( [ condition ] )
| Rôle : | Renvoie la première valeur correspondant à la condition passée en paramètre. |
| Arguments : | condition |
| Valeur renvoyée : | valeur correspondante |
Ex :
const tableau = ['a', 'b', 'c']; console.log(tableau.find(v => v > 'a')); // b
includes() modifier
Méthode: includes( [ valeur ] )
| Rôle : | Renvoie vrai si la valeur se trouve dans le tableau, faux sinon. |
| Arguments : | valeur |
| Valeur renvoyée : | présence |
Ex :
const tableau = ['a', 'b', 'c'];
console.log(tableau.includes('z')); // false
join() modifier
Méthode: join( [ sep_string ] )
| Rôle : | Renvoie 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 renvoyée : | La chaîne ainsi construite |
slice() modifier
Méthode: slice( indice, nombre )
| Rôle : | Renvoie un tableau contenant un nombre d'éléments extraits à partir de l'indice. |
| Arguments : |
Indice Nombre |
| Valeur renvoyée : | Le tableau résultant |
Trier modifier
| Méthode | Description | Exemple |
|---|---|---|
| sort() | Trier le tableau | mon_tableau.sort()
|
every() modifier
tableau.every(function (ligne) {...}); : renvoie un booléen indiquant si tous les éléments du tableau vérifie une expression.
some() modifier
tableau.map(function (ligne) {...}); : renvoie un booléen indiquant si au moins un des éléments du tableau vérifie une expression.
filter() modifier
tableau.filter(function (ligne) {...}); : affiche les éléments d'un tableau qui vérifient une expression.
map() modifier
tableau.map(function (ligne) {...}); : crée un nouveau tableau contenant le résultat d'une fonction sur chaque élément.
reduce() modifier
tableau.reduce(function (accumulateur, ligne) {...}, 0); : crée un nouveau tableau contenant le résultat d'une fonction sur chaque élément avec la possibilité de récupérer des données issues des lignes itérées dans un accumulateur. Ce dernier est initialisé en second paramètre.
sort() modifier
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 |
| Valeur renvoyé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'une 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; // Égalité
}
t = new Array("petit","grand","moyen","grand","petit","moyen");
t.sort( compare_taille);
alert(t.join(",")); // // Affiche "petit,petit,moyen,moyen,grand,grand"
Méthodes héritées modifier
| Méthode | 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 formatée selon le PC (pour les formats de date) | s = mon_tableau.toLocaleString()
|
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 alphabétique
Manipulation modifier
Instanciation modifier
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.
Adressage d'un élément modifier
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"
</pre>
}}
=== Lecture de la propriété length ===
{{Cadre code|Lecture de la propriété length|
<syntaxhighlight lang="javascript">
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]);
// Affiche "null", puis "null", "null" et "Contenu de trois"