JavaScript : les tableaux

Dans ce chapitre je vais traiter des tableaux dans JS au sens large c'est à dire non seulement les tableaux indicés (Array) mais aussi les nouvelles structures : dictionnaires (Map) et ensembles (Set).
Dans les trois cas il s'agit de variables contenant plusieurs valeurs élémentaires ou plusieurs couples clé:valeur.

Les objets "array" ou tableaux indicés

En JavaScript on désigne par "array" une liste indicée de valeurs. Un Array peut être à une ou plusieurs dimensions.

Dans un tableau indicé (ou liste indicée) chaque valeur est repérée par son rang (ou indice).
Attention le premier terme a l'indice zéro !
L'indice d'un élément découle de l'ordre de saisie ; il n'est jamais saisi !.

Liste indicée : premier exemple

Nous allons nous familiariser avec la syntaxe en produisant des commandes dans la console.
Consigne : saisir les lignes précédées de ">".
Les autres lignes sont les réponses de la console. > premiers = [1,2,3,5,7,11] (6) [1, 2, 3, 5, 7, 11] > premiers.reverse() (6) [11, 7, 5, 3, 2, 1] > premiers.sort() (6) [1, 11, 2, 3, 5, 7] > premiers.shift() 1 > premiers.pop() 7 > premiers (4) [11, 2, 3, 5] > premiers.push(1) 5 > premiers.push(7) 6 > premiers (6) [11, 2, 3, 5, 1, 7] > premiers.unshift(13,17) 8 > premiers (8) [13, 17, 11, 2, 3, 5, 1, 7] > premiers.length 8

Pour créer un tableau il faut que les différents éléments soient séparés par des virgules et le tout encadré par des parenthèses.

Après avoir créé un tableau indicé, j'ai appliqué différentes méthodes qui modifient le tableau.

nomTableau.sort() pour trier par ordre croissant le tableau
nomTableau.reverse() pour inverser les éléments d'un tableau
nomTableau.unshift() pour ajouter des éléments en début de tableau
nomTableau.shift() pour supprimer le premier élément
nomTableau.pop pour supprimer le dernier item
nomTableau.push() pour ajouter des éléments en fin de tableau

Pour connaitre le nombre d'éléments d'un tableau il faut utiliser la propriété length
Pour afficher le contenu du tableau il suffit de saisir son nom.

Il existe d'autres méthodes que l'on peut appliquer à un tableau.

Programme manipulant une liste indicée

Nous allons voir les différentes techniques pour parcourir un tableau.

Le script

	
<button onclick ="tableau_trait()">Création d'un tableau avec notation JSON</button>
<script>
function tableau_trait() 
{
		var villes = ['Boulogne', 'Calais', 'Dunkerque', 'Saint Omer'] ; 
		// création d'un tableau avec 4 éléments
		document.write(villes[0]) ; // affiche Boulogne
		document.write("<br>" + villes[3]) ; // affiche Saint Omer
		document.write("<hr>"); 
		
		// Affichage tableau : solution basique 
		document.write(villes); 
		document.write("<hr>"); 
		
		// Ajout d'un item avec indice 6 
		document.write("ajout d'un item d'indice 6" +"<br>"); 
		villes[6] = "Wimereux"; 
		document.write("<hr>"); 
		
		// réaffichage tableau : boucle for traditionnelle				
		for (var i = 0 ; i < villes.length; i++) 
			// parcours du tableau 
			{document.write(i + " " + villes[i]+"<br>") ; }
		document.write("<hr>"); 	
								
		// 'Réaffichage tableau : boucle for ... of
		for (var ville of villes) 	document.write("<br>" + ville);
	
} // fin fonction

Ce tableau a initialement 4 items ayant respectivement les rangs 0 à 3.
Puis j'ajoute un élément en précisant son indice ... 6 ! Il s'agit alors d'un tableau avec 7 éléments dont deux non définis. Oui c'est possible, mais ce n'est pas conseillé.

une solution basique : document.write(nomTableau). Inconvénients : pas de sauts de ligne, l'indice (ou rang) n'apparait pas.
une boucle FOR traditionnelle permet de parcourir tout le tableau ; le test doit reposer sur la propriété length.
une boucle avec la structure for ... of donc un code très succinct mais ne permet pas d'afficher l'indice de l'élément.

Vous verrez plus loin qu'il y a une astuce pour afficher le contenu d'un tableau sans recourir à une boucle.
Il suffit de convertir le tableau en String et d'afficher cette chaine.

Le rendu du script

Programme de création et manipulation d'un tableau indicé - autre exemple

Un tableau indicé est un objet de type ARRAY. Donc pour créer un tableau je peux utiliser la syntaxe POO : var nomTableau = new Array()
Ce script a aussi pour objet de vous familiariser avec d'autres méthodes d'un objet array qui n'ont pas encore été abordées.

Le script

<button onclick ="tableau_trait()">Création d'un tableau avec le constructeur Array()</button>
<script>
function tableau_trait() 
{
	// tableau indicé déclaré tel un nouvel objet de type Array
	var prenoms = new Array('Camille', 'Debora', 'Edith', 'Françoise', 'Christine');

	// parcours du tableau
	for (var prenom of prenoms) document.write(prenom + '<br>'); 
	document.write("<hr>") ;
		
	//ajout d'un élément conaissant l'indice du nouvel élément
	prenoms[5] = 'Louise'; 
	//remplacer un élément
	prenoms[0] ="Colette"; 
	//ajout en début de tableau
	prenoms.unshift('Aphrodite','Béatrice');
	// ajouts en fin de tableau 
	prenoms.push('Ignes', 'Valérie'); 
	
	
	// des méthodes applicables à un array : indexOf(), includes(), join()
	
	document.write ("Rang de Camille : " + prenoms.indexOf("Camille") + "<br>"); 
	document.write ("Rang de Colette : " + prenoms.indexOf("Colette") + "<br>"); 
	document.write ("Camille  existe? " + prenoms.includes('Camille') + "<br>");
	document.write ("Colette existe ?" + prenoms.includes('Colette') + "<br>");
	
	var liste = prenoms.join(' ; '); // production d'une chaine à partir du tableau 
	document.write('liste est de type : ' + typeof(liste)+ "<br>") ; 
	document.write("Tableau sous forme d'une chaine : " + liste + "<br>" );
	document.write('Camille existe ? ' + liste.includes('Camille') + "<br>"); 
	document.write('Colette existe? ' + liste.includes('Colette') + "<br>"); 
} // fin fonction

Dans ce script : un petit rappel sur des méthodes déjà présentées : push(), unshift(), sort(), reverse(). Mais il y a aussi des nouveautés ...

méthode join() pour créer une chaine à partir d'un tableau. Il existe aussi la méthode toString()
méthode indexOf(élément) pour connaitre le rang (indice) d'un élément du tableau ; Cette méthode retourne -1 en cas d'échec.
méthode includes(élément) retourne true ou false selon l'existence ou pas de l'élément dans le tableau

Je vous montre aussi dans ce script que la méthode includes() peut s'appliquer non seulement à objet de type Array mais aussi à un objet de type String.

Le rendu de ce script

De nouvelles méthodes que l'on peut appliquer à un objet Array

Chaque version de ECMAScript apporte de nouvelles méthodes pour les tableaux.
Il est vrai qu'il y avait un manque par rapport à d'autres langages (Python par exemple).

Le script

let nombres =[1,2,3,4,5,6,7,8,9,10]; 
// afficher tableau sous forme d'une chaine de caractères 
document.write("contenu de nombres : " + nombres.toString()); 
document.write("<br>"); 

// extraire les nombres pairs de la liste nombres 
let pairs = nombres.filter(function(valeur){return (valeur %2 ==0)});
document.write("pairs de nombres : " + pairs.toString()); 
document.write("<br>");

//extraire les nombres impaires de la liste nombres
let impairs = nombres.filter(function(valeur){return (valeur %2 !=0)});
document.write("impairs de nombres : " + impairs.toString()); 
document.write("<br>");

let mois =['janvier','février','mars', 'avril'];
document.write ("contenu de mois : " + mois.toString()); 
document.write("<br>");

//nouveau tableau en appliquant une fonction aux éléments du tableau initial
let maj_mois = mois.map(function(valeur) {return (valeur.toUpperCase())});
document.write("contenu de maj_mois : " + maj_mois.toString());

La méthode toString() appliquée à un tableau convertit cet objet en chaine de caractères.
Donc pour afficher un tableau il suffit d'afficher la chaine découlant de la conversion.
La méthode toString() est donc quasi équivalente à la méthode join() déjà citée.

De nombreuses méthodes applicables à un Array attendent en paramètre une fonction destinée à réaliser un traitement à chaque item de la liste.
Cette fonction de callback est en général une fonction anonyme.

Dans le script ci-dessus j'utilise deux méthodes qui utilisent une fonction de callback : filter() & map()
La méthode filter() retourne un nouveau tableau avec moins d'items que l'initial. Cette méthode réclame une fonction basée sur un test.
La méthode map() retourne un nouvelle liste avec autant d'items que l'initiale. La fonction de callback réalise en général une conversion.

Ne confondez pas la méthode map() applicable à un Array avec le constructeur Map() qui crée un dictionnaire. Voir plus loin dans ce chapitre.

Le rendu

Un tableau indicé construit à partir de variables

Il est possible de construire un tableau indicé à partir de variables simples.

Exemple

var a = 3; 
var b = 9; 
var c = 27; 
var d = 81; 
	
var liste_var = new Array(a,b,c,d); 

// parcours du tableau
for (variable of liste_var) document.write(variable + "<br>"); 

// conversion du tableau en chaine et affichage chaine 
document.write(liste_var.toString()); 
document.write("<br>"); 
a= 5;
document.write(liste_var.toString());

Il faut d'abord définir les variables élémentaires puis définir le tableau de variables.

Le rendu de ce script

Attention le tableau a été construit avec les valeurs initiales des variables. Le changement de valeurs dans ces variables n'est pas repercuté dans le tableau.

Tableau d'objets

Jusqu'à présent chaque élément du tableau indicé est une donnée élémentaire.
Mais rien n'interdit de produire un tableau qui contient des références à des objets.

Je n'en dit pas plus pour l'instant puisqu'il y a tout un chapitre sur la POO.
C'est donc dans ce chapitre que les tableaux d'objets sont traités.
Je vous communique le lien : Créer & manipuler ses propres objets

Un "array" à deux dimensions

Rien n'interdit de créer des tableaux indicés à deux dimensions.

Théme: l'ULCO (Université de La Côte d'Opale) est une université multipolaire : quatre sites. Des personnels doivent faire des déplacements entre ces différents pôles. Afin de les indemniser, il est important de connaitre les distance entre les pôles.

Tableau des distances

****	calais	boulogne	dunkerque	saint omer
calais	0	34	46	44
boulogne	34	0	76	54
dunkerque	46	76	0	47
saint omer	44	54	47	0

Il s'agit d'un tableau à double entrée (plusieurs colonnes et plusieurs lignes).

Le script correspondant

Le script pour créer ce tableau indicé à deux dimensions et le manipuler est le suivant. var distances = [ ['', 'calais','boulogne','dunkerque','st omer'], ['calais',0,34,46,44], ['boulogne',34,0,76,54], ['dunkerque',46,76,0,47], ['st omer',44,54,47,0] ] document.write ('<h3>Affichage des distances entres pôles</h3>'); document.write ('calais-boulogne : ' + distances [1][2]) ; document.write ('<br>' + 'boulogne-dunkerque : ' + distances [2][3]) ; document.write ('<br>'+ 'dunkerque-calais : ' + distances [3][1] ) ; document.write ('<br>'+'st omer-calais : ' + distances [4][1] ) ; // affichage du tableau à deux dimensions document.write ('<h3>Affichage du tableau à deux dimensions</h3>'); for (var i = 0 ; i < distances.length; i++) // parcours de chaque ligne { for (var j = 0 ; j < 5; j++) // parcours de chaque élément de la ligne {document.write(distances[i][j]+ " - ") ; } document.write("<br>");

En fait un tableau à deux dimensions et un tableau indicé dont chaque élément est lui-même un tableau indicé.
Dans l'exemple le tableau principal comprend cinq sous-tableaux. Chaque sous-tableau comprend 5 éléments.

Des instructions méritent une explication :
...distance[1][2] : pour récupérer un élément il faut préciser ses deux indices : rang colonne, rang ligne.

une boucle externe pour parcourir chaque sous-tableau
une boucle interne pour parcourir chaque item de chaque sous-tableau

Le rendu du script (qui s'exécute automatiquement)

Pourquoi les tableaux ?

L'utilisation de tableaux peut simplifier considérablement la programmation.

Thématique : En fonction du rang du mois (entier compris entre 1 et 12) le programme doit afficher le nom du mois correspondant.
Ainsi si vous saisissez l'entier 5, le programme doit retourner "mai", si vous saisissez 11, il affiche "novembre".

Solution sans tableau

...
var rang_mois = prompt("Tapez le rang du mois - 1 pour janvier"); 
var rang_mois = parseInt(rang_mois); 
switch(rang_mois)
{
	case 1 : nom_mois ="janvier"; break ; 
	case 2 : nom_mois ="février"; break ;
		...
	case 11 : nom_mois ="novembre"; break ;
	case 12 : nom_mois ='décembre'; break ; 
} // fin switch 
document.write("Nom du mois correspondant : " + nom_mois); 
...

Donc un code relativement lourd.

Solution avec un tableau

var mois = new Array(" ", "janvier", "février", "mars", "avril","mai", "juin", "juillet", "aout","septembre", "octobre", "novembre", "décembre"); 
var rang_mois = prompt("Tapez le rang du mois - 1 pour janvier"); 
var rang_mois = parseInt(rang_mois); 
var nom_mois = mois[rang_mois]; 
document.write("Nom du mois correspondant : " + nom_mois);

Astuce : le premier élément d'un tableau a l'indice 0 (et non pas 1) donc le tableau comprend 13 items et le premier item est une chaine vide.
Le script est beaucoup plus succinct grâce à l'emploi d'un tableau.

Le rendu (dans un nouvel onglet, pensez à le fermer ensuite)

Testez le code !

Tableaux avec clés (dictionnaires)

Les tableaux avec clés OU tableaux "clé:valeur" OU tableaux associatifs OU dictionnaires ça existe enfin dans JavaScript depuis : ECMAScript6.
Auparavant on pouvait simuler un tableau associatif en produisant un tableau d'objets.
Dans le jargon JS on parle de "map" pour désigner un tableau associatif. Dans un "map" on associe à chaque valeur non pas un indice mais une clé (une chaine).
A la différence de l'indice, la clé doit toujours être saisie !

Exemple de tableau "clé/valeur"

Pour créer un tableau associatif il faut utiliser le constructeur Map().
Exemple de script : () ... let voitures = new Map ([ ['Jean','Peugeot 208'], ['Paul','Renault clio V'], ['Louise', 'Citroên C3 III'], ['Martine','Dacia sandero III'] ] ); // un map avec 4 paires de clé-valeur ; le premier item a pour clé "jean". // parcours du tableau associatif : affichage des valeurs for (let valeur of voitures.values()) {document.write("Type de voiture : " + valeur + "<br>"); } document.write('<hr>'); // parcours du map : affichage des clés for (let cle of voitures.keys()) {document.write("Propriétaire : " + cle + "<br>"); } document.write('<hr>'); // parcours du tableau clé-valeur - affichage clés et valeurs for (let [cle,valeur] of voitures.entries()) {document.write(cle + " possède " + valeur + "<br>"); } document.write('<hr>'); // ajout d'une paire 'clé-valeur' document.write("ajout d'une paire ! " + "<hr>"); voitures.set('François',"Peugeot 2008 II"); // Méthode get : récupère la valeur pour la clé saisie document.write('Paul possède ' + voitures.get('Paul') + "<br>"); // propriété size : taille du map document.write("Taille du tableau associatif :" + voitures.size + "<br>"); // Méthode has : retourne true ou false document.write("Clé 'Claudine' existe ? " + voitures.has('Claudine') + "<br>"); document.write("Clé 'Louise' existe ? " + voitures.has('Louise') + "<br>"); document.write('<hr>'); // parcours tableau et affichage clé:valeur - deuxième solution for (let voiture of voitures.entries()) {document.write(voiture[0] + " - " + voiture[1] + "<br>"); } document.write('<hr>'); // Méthode clear : vide le tableau sans le supprimer voitures.clear(); document.write ("Map vidé !" + "<br>"); document.write("Taille du tableau associatif :" + voitures.size + "<br>"); // ajout au tableau vide voitures.set("pépé", "Citroên 2 CV"); // affichage clé & valeur for (let voiture of voitures.entries()) {document.write(voiture[0] + " - " + voiture[1] + "<br>"); } document.write('<hr>'); ..

Commentaires

Pour créer un tableau "clé:valeur" il faut utiliser le constructeur Map().

set() : pour ajouter une paire au map
get() : pour récupérer la valeur pour une clé donnée
has() : tester l'existence ou pas d'une clé
delete() : pour supprimer une paire
clear() : pour vider un map (mais sans supprimer le map)

La propriété size (et non pas length) indique le nombre de paires "clé-valeur" dans le tableau.

Pour parcourir un objet Map il faut utiliser la structure for (let ... of nomMap.méthode())

keys() affiche les clés
values() affiche les valeurs
entries() affiche clés et valeurs

Le rendu

Les ensembles ou "set"

Si vous connaissez le langage Python, vous savez qu'il existe une structure de données qui s'appelle "set" ("ensemble" en français).
Dans une séquence de type "set" il ne peut y avoir de doublons.
La dernière version de JavaScript propose désormais ce type de données.

Script à produire

...
let cartes = new Set(['as','roi', 'dame', 'valet',10,9,8,7]); 
cartes.add(7);
console.log (cartes.size);  
console.log (cartes.has(5));
console.log (cartes.has('roi')); 

for (let item of cartes) 
	{console.log(item); }

cartes.add(6).add(5).add(4).add(3).add(2).add(8); 
console.log(cartes.size); 

for (let item of cartes) 
	{console.log(item); }
...

Commentaire

Pour créer un nouvel ensemble, il faut utiliser le constructeur Set().
La taille de l'ensemble est de 8 (l'ajout de 7 n'ayant pas été pris en compte) ; cependant il n'y a pas plantage du programme.

Pour parcourir un "set" on utilise la même syntaxe que pour un "map".
Notez qu'il existe aussi les méthodes has(),clear(), delete() (comme pour pour le type "map'). Par contre l'ajout d'un item se fait avec la méthode add() (et non pas set()) et on comprend pourquoi ...

La tentative d'ajout d'un 8 échoue puisque cette valeur existe déjà. La taille de l'ensemble fait désormais 13. Il ne peut jamais y avoir de doublons dans un ensemble.

Utilité de la structure set

Dans le script ci-dessous le joueur obtient une "main" de 5 cartes toutes différentes car cette "main" est stockée dans un tableau de type "set".
La simplicité du programme est dûe à l'emploi d'un objet de type "set" qui interdit les doublons.

Le code la page

...
<button onclick ="tirer5()">Tirez 5 cartes</button>
<script>
let couleurs = ["pique", "trèfle", "coeur", "carreau"]; 
let valeurs = ["As", "Roi", "Dame", "Valet", "10", "9" , "8", "7"]; 

function tirer5()
{
	let  ma_main = new Set();
	for (; ; )
	{
	couleur = Math.floor(Math.random() * 4); // génération entier compris entre 0 et 3
	valeur = Math.floor(Math.random() * 8); // génération entier compris entre 0 et 7
	carte = valeurs[valeur] + " de " + couleurs[couleur]; // carte tirée
	ma_main = ma_main.add(carte);  // ajout éventuel carte tirée à la main
	nbre_cartes  = ma_main.size; // nombre de cartes de la main
	if (nbre_cartes ==5) break; 
	} // fin boucle infinie

for (let item of ma_main) 
	{document.write(item + "<br>"); }
} // fin fonction
...

La boucle FOR infinie va être exécutée au moins 5 fois.
Dans l'instruction ma_main = ma_main.add(carte) l'ajout à "ma_main" n'est pas automatique ; il se fait seulement si la valeur de "carte" n'existe pas encore dans "ma_main".
Si "ma_main" était un Array (et non pas un Set) le code serait beaucoup plus complexe ; vous devriez alors programmer des tests pour éviter les doublons dans la liste.

Le rendu

Actualisez la page pour afficher de nouveau le bouton de commande.

Pour vérifier si vous avez compris le code, créez une nouvelle version : tirage dans un jeu de 52 cartes et la "main" doit être une combinaison de 7 cartes toutes différentes.

Traduction

Tutoriel sur JS natif & Vue.js & jQuery.js & Node.js

JavaScript natif

Framework Vue.js

Framework jQuery.js

Node.js

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

JavaScript : les tableaux

Les objets "array" ou tableaux indicés

Liste indicée : premier exemple

Programme manipulant une liste indicée

Le script

Le rendu du script

Programme de création et manipulation d'un tableau indicé - autre exemple

Le script

Le rendu de ce script

De nouvelles méthodes que l'on peut appliquer à un objet Array

Le script

Le rendu

Un tableau indicé construit à partir de variables

Exemple

Le rendu de ce script

Tableau d'objets

Un "array" à deux dimensions

Tableau des distances

Le script correspondant

Le rendu du script (qui s'exécute automatiquement)

Pourquoi les tableaux ?

Solution sans tableau

Solution avec un tableau

Le rendu (dans un nouvel onglet, pensez à le fermer ensuite)

Tableaux avec clés (dictionnaires)

Exemple de tableau "clé/valeur"

Commentaires

Le rendu

Les ensembles ou "set"

Script à produire

Commentaire

Utilité de la structure set

Le code la page

Le rendu