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 (objets "Array") mais aussi de nouvelles structures : les dictionnaires (Maps) et les ensembles (Sets).
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 objet Array peut être à une ou plusieurs dimensions.
Dans un tableau indicé 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.
Un tableau indicé est l'équivalent d'un objet "List" en Python.

Tableau indicé : création et modification de son contenu

Familiarisons nous avec la syntaxe, en produisant des commandes qui suivent dans la console du navigateur.
Saisir les lignes précédées du chevron !
La ligne qui suit est la réponse à la commande.

> 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
> pairs = new Array(2,4,6,8)
Array(4) [ 2, 4, 6, 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.

.sort() pour trier par ordre croissant le tableau
.reverse() pour inverser les éléments d'un tableau
.unshift() pour ajouter des éléments en début de tableau
.shift() pour supprimer le premier élément
.pop pour supprimer le dernier item
.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.
J'ai dit "propriété (et non pas méthode) d'où l'absence de parenthèse après le "length".
Pour afficher le contenu du tableau il suffit de taper son nom.
On peut créer un objet Array avec un constructeur ; la syntaxe est alors : nomArray = new Array(...)

Notez que le tri des entiers du tableau nommé "premiers" donnne des résultats bizarres : 1, 11, 2, 3, 5, 7.
Par défaut, le tri s'effectue sur les éléments du tableau convertis en chaînes de caractères et triées selon les valeurs UTF-16 de ces caractères.

Autre solution pour ajouter /modifier des éléments à un Array

J'avoue que j'ai du mal à retenir les méthodes pour modifier un objet Array.
Ci-dessous je vous montre via l'accès indexé comment modifier un élément et rajouter un élément.

> score = [5,6,9,12]
(4) [5, 6, 9, 12]
> score[0] = 7
7
> score[4] = 11
11
> score
(5) [7, 6, 9, 12, 11]

L'élément d'indice zéro a été modifié.
L'objet Array avait initialement 4 éléments (donc indice du dernier = à 3) ; je rajoute un cinquième élément (indice 4).

Programme manipulant un tableau

Nous allons voir les différentes techniques pour parcourir un objet Array qui contient les nombres premiers jusqu'à 100.

Le code de la page

	
...
<body>
<button onclick ="f1()">Parcourir le tableau des nombres premiers jusqu'à 100</button>
<script>
function f1()
{
	var premiers = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89,97] ;

	// parcours de l'objet array : solution traditionnelle
	document.write("Indice et valeur de chaque élément <br>"); 
	for (let indice = 0 ; indice < premiers.length; indice++) 	{document.write(indice + " " + premiers[indice] + "<br>") ; }
	document.write("<hr>"); 

	// parcours de l'objet array : solution avec for ... of ...
	document.write("Valeur de chaque élément <br>"); 
	for (let nombre of premiers) {document.write(nombre + "<br>"); }
	document.write("<hr>"); 

	// parcours de l'objet array : solution avec for ... in ...
	document.write("Indice de chaque élément <br>"); 
	for (let indice in premiers) {document.write(indice + "<br>"); }
	document.write("<hr>"); 
}
...

solution traditionnelle avec for(... ; ... ; ...)
solution avec for( ... of ... )
solution avec for(... in ...)

Le rendu du script

La solution traditionnelle a une syntaxe complexe mais permet d'afficher pour chaque élément son rang (ou indice) et sa valeur alors qu'avec for(... of ...) on n'affiche que les valeurs et avec for(... in ...) on n'affiche que les indices.

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

Tri et inversion

ES2023 (version 2023 de JavaScript) ajoute les méthodes .toReversed() & .toSorted() aux objets de type Array.
La différence entre .toReversed() & .reverse() est que la première méthode crée un nouveau tableau, en gardant le tableau d'origine inchangé, tandis que la dernière méthode modifie le tableau d'origine.
La différence entre .toSorted() & .sort() est que la première méthode crée un nouveau tableau, en gardant le tableau d'origine inchangé tandis que la dernière méthode modifie le tableau d'origine.
Dans la console :

>liste = [9,5,3,7,1]
(5) [9, 5, 3, 7, 1]
>liste2 = liste.toSorted()
(5) [1, 3, 5, 7, 9]
>liste3 = liste.toReversed()
(5) [1, 7, 3, 5, 9]
>liste
(5) [9, 5, 3, 7, 1]
>liste.sort()
(5) [1, 3, 5, 7, 9]
>liste.reverse()
(5) [9, 7, 5, 3, 1]

Vous constatez que les méthodes .toSorted() & .toReversed() ne modifient pas l'ordre dans le tableau "liste" ce qui n'est pas le cas des méthodes .sort() & .reverse().

Tableaux en compréhension

Les méthodes map() & filter() appliquées à un objet Array permettent de créer des listes en compréhension.
Dans la console du navigateur tapez :

> let premiers = [1,3,5,7,11]

> let carres = premiers.map(x=>x*x)

> carres
(5) [1, 9, 25, 49, 121]

> let chiffres = [1, 2, 3, 4,5,6,7,8,9]

> let pairs = chiffres.filter(x => x % 2 === 0)

> pairs
(4) [2, 4, 6, 8]

> let chiffres = [1, 2, 3, 4,5,6,7,8,9]

> double = chiffres.filter(x => x % 2 === 0).map(x => x * 2);
(4) [4, 8, 12, 16]

À partir du tableau "premiers" j'ai créé le tableau "carres" grâce à la méthode map().
À partir du tableau "chiffres" j'ai créé le tableau "pairs" grâce à la méthode filter().
Vous pouvez enchaîner les méthodes map()& filter() pour d'abord filtrer puis appliquer une fonction aux résultats filtrés.

Un objet 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 d'objets Array 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); 
...

Un code très 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 !

Manipuler le DOM

Les méthodes getElementsByTagName(), getElementsByClassName() et querySelectorAll() de l'objet document retournent un objet Array.
Donc avec ces méthodes il est facile d'appliquer un nouveau contenu / nouvelle valeur d'attribut / de propriété CSS à un groupe de noeuds du DOM (même balise OU même classe).
Manipuler le DOM avec JS

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.

Pour créer un tableau associatif il faut utiliser le constructeur Map().

Ne confondez pas le constructeur Map() avec la méthode de .map() de l'objet array.

Exemple de tableau "clé/valeur"

Le 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 clé-valeur - affichage clés et valeurs
for (let [cle,valeur] of voitures.entries()) 
	{document.write(cle + " possède "  + valeur ); }
// ajout d'une paire 'clé-valeur'
document.write("ajout d'une paire ! ");
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>"); 

// parcours  tableau et affichage clé:valeur									  
for (let voiture of voitures.entries()) 
	{document.write(voiture[0] + " - " + voiture[1]  + "<br>"); }

// 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>"); }
...

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 le map de son contenu

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 pas y avoir de doublons : valeurs uniques.
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 eu plantage de la commande.

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();  // création d'un set vide
	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
...

Création d'un set vide nommé "ma_main".

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".

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 Javascript, Vue.js, jQuery.js & Node.js

JavaScript natif

Framework jQuery.js

Framework Vue.js

Node.js

Recherche dans ce tuto

L'auteur : Patrick Darcheville

JavaScript : les tableaux

Les objets "array" ou tableaux indicés

Tableau indicé : création et modification de son contenu

Autre solution pour ajouter /modifier des éléments à un Array

Programme manipulant un tableau

Le code de la page

Le rendu du script

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

Tri et inversion

Tableaux en compréhension

Un objet 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)

Manipuler le DOM

Tableaux avec clés (dictionnaires)

Exemple de tableau "clé/valeur"

Le script

Le rendu

Les ensembles ou "set"

Script à produire

Commentaire

Utilité de la structure set

Le code la page

Le rendu