JavaScript : les collections de données

Les tableaux indicés ('arrays') sont des structures de données essentielles en JS permettant de stocker plusieurs valeurs dans une seule variable.

les 'maps' (ou 'tableeaux associatifs') : ensemble de plusieurs paires de 'clé-valeur'
les 'sets' (ou 'ensembles') : les doublons y sont interdits

Les tableaux indicés ('arrays')

En JavaScript on désigne par "array" une liste indicée de valeurs.
Un objet Array peut être à une ou plusieurs dimensions.
Dans un 'array' 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.

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 ]

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

sort() pour trier sur place le tableau
reverse() pour inverser sur place les éléments du 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 mot clé "length".
Pour afficher le contenu du tableau il suffit de taper son nom.

J'ai créé le tableau pairs non pas de façon littérale mais via la constructeur Array().
Attention, dans cette solution les crochets sont remplacés par des parenthèses.

Trier correctement des nombres

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

Pour trier correctement un 'array' de nombres il faut argumenter la méthode sort() avec une fonction de comparaison.

Tri correct 'premiers' par ordre croissant puis décroissant :

>premiers.sort((a,b)=>a-b)
Array(6) [ 1, 2, 3, 5, 7, 11 ]
>premiers.sort((a,b)=>b-a)
Array(6) [ 11, 7, 5, 3, 2, 1 ]

Accès indexé à un élément

Ci-dessous je vous propose une autre solution pour modifier une valeur, rajouter une valeur : l'accès via l'indice.

> 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é puis j'ai rajouté l'élément d'indice 4 (cinquième élément).

Programme manipulant un tableau

Je vous présente deux 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>"); 

}
...

avec la boucle for(...; ... ; ...)
avec la boucle for( ... of ... )

Le rendu du script

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

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.
Les méthodes anciennes sort() & reverse() présentaient un défaut : tri sur place des tableaux. Ce qui n'est pas le cas avec les méthodes nouvelles toSorted() & toReversed() qui ne modifient pas le tableau d'origine.

Testez 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]

Pour trier ou inverser des nombres il faudra toujours rajouter une fonction de comparaison.

La méthode includes

Testez dans la console :

liste =[1,3,5,7,11]
(5) [1, 3, 5, 7, 11]
liste.includes(11)
true
liste.include(2)
false

La méthode includes(valeur) appliqué à l'objet array retourne true ou false selon que la valeur existe ou pas dans cet array.

Tableaux en compréhension

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

> 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 indicé à deux dimensions et un 'array' dont chaque élément est lui-même un 'array'.
Dans l'exemple l'array principal comprend cinq arrays (sous-tableaux).

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 affiche 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 avec switch

...
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); 
...

Ce code est très lourd !

Solution avec un array

<button onclick ="f1()">Exécutez le script </button>
<script>
function f1()
{
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, 12 pour décembre"); 
var rang_mois = parseInt(rang_mois); 
var nom_mois = mois[rang_mois]; 
document.write("<h4>Nom du mois correspondant : " + nom_mois); 
}
</script>
</h4>

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 rendu

Tableaux avec clés

Les tableaux "clé-valeur" OU tableaux associatifs ça existe enfin dans JavaScript depuis ECMAScript6.

Un map peut remplacer avantageusement un array d'objets. En effet un map se manipule plus simplement qu'un array d'objets grâce à de nombreuses méthodes dédiées.

Rappel : un tableau indicé d'objets

Le code du document HTML

...
// Déclaration d'un tableau indicé d'objets
const monTableau = [
        {nom : 'Jean', modele :'Peugeot 208' },
		{nom : 'Paul', modele:'Renault clio V'},
		{nom :'Louise',modele : 'Citroên C3 III'},
		{nom :'Martine',modele :'Dacia sandero III'}
    ];

// Parcours de l'array d'objets
document.write("Parcours du tableau indicé d'objets :  <br>"); 
for (let element of monTableau) 
		{document.write(element.nom + " " + element.modele + "<br>"); }

// accès indicé à un objet : 
document.write("<hr><br>Accès à un objet"); 
document.write("<br>" + monTableau[1].nom  + " " + monTableau[1].modele + "<br>")
...

Le rendu

Un map reprenant les mêmes informations

Quel serait le map reprenant les mêmes informations ? Je rappelle qu'on raisonne en paires de "clé-valeur". Le nom devient la clé et la modèle devient la valeur.

Le script - première partie

Dans la première partie : création et parcours du map. ... // création d'un map let voitures = new Map ([ ['Jean','Peugeot 208'], ['Paul','Renault clio V'], ['Louise', 'Citroên C3 III'], ['Martine','Dacia sandero III'] ] ); // lecture du tableau associatif : affichage des valeurs document.write("<h3>Affichage des valeurs</h3>"); for (let valeur of voitures.values()) {document.write("Modèle : " + valeur + "<br>"); } document.write('<hr>'); // lecture du map : affichage des clés document.write("<h3>Affichage des clés</h3>"); for (let cle of voitures.keys()) {document.write("Propriétaire : " + cle + "<br>"); } document.write('<hr>'); // lecture du tableau clé-valeur - affichage clés et valeurs document.write("<h3>Affichage des clés & valeurs</h3>"); for (let [cle,valeur] of voitures.entries()) {document.write(cle + " possède " + valeur + "<br>"); } document.write('<hr>');

Création d'un map : il faut utiliser obligatoirement le constructeur Map().
À l'intérieur des parenthèses on retrouve la syntaxe d'un tableau indicé à deux dimensions.

Pour parcourir un objet Map on utilise la boucle for (let ... of nomMap.méthode())

keys() affiche les clés
values() affiche les valeurs
entries() affiche pour chaque paire la clé & la valeur

Le script - deuxième partie

Dans cette deuxième partie, je modifie le contenu du map. ... // ajout d'une paire 'clé-valeur' document.write("<h3>Méthode set</h3>"); document.write("ajout d'une paire ! " + "<br>"); voitures.set('François',"Peugeot 2008 II"); document.write("Taille du tableau associatif :" + voitures.size + "<br>"); // Méthode get : récupère la valeur pour la clé saisie document.write("<h3>Méthode get</h3>"); document.write('Paul possède ' + voitures.get('Paul') + "<br>"); // Méthode has : retourne true ou false document.write("<h3>Méthode has</h3>"); document.write("Clé 'Claudine' existe ? " + voitures.has('Claudine') + "<br>"); document.write("Clé 'Louise' existe ? " + voitures.has('Louise') + "<br>"); // Méthodes delete() & clear() document.write("<h3>Méthodes delete() & clear()</h3>"); voitures.delete('Louise'); document.write("Taille du tableau associatif :" + voitures.size + "<br>"); voitures.clear(); document.write("Taille du tableau associatif :" + voitures.size + "<br>"); ...

Notez l'autre syntaxe pour afficher clés & valeurs : document.write(voiture[0] + " - " + voiture[1] ...

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(clé) : 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 map.

Le rendu

La méthode clear() vide le map de tout contenu mais le ne supprime pas !

Les "sets" ou "ensembles"

Un "set" est une collection de données à valeurs uniques (pas de doublons).
La dernière version de JavaScript propose désormais ce type de structure de données.
À la différence d'un array, un set est une collection non ordonnée ; voir explication plus loin.

Premier exemple

Le script

Déroulez ! // création d'un set let cartes = new Set(['as','roi', 'dame', 'valet',10,9,8,7]); // méthode add() document.write("<br>Taille du set : " , cartes.size); cartes.add(7); document.write("<br>Taille du set : " , cartes.size); // méthode has() document.write ("<br>Carte 5 existe ? " ,cartes.has(5)); document.write ("<br>Roi existe ? " ,cartes.has('roi')); // parcours du set document.write("<br>"); for (let item of cartes) {document.write(item, " - "); } // accès indicé à un élément document.write("<br>", cartes[0]);

Pour créer un nouvel ensemble, il faut utiliser le constructeur set().
Pour connaitre la taille d'un set il faut utiliser la propriété size.
Pour ajouter un élément dans un set il faut utiliser la méthode add()
Pour parcourir un "set" on utilise la même syntaxe que pour un "array" : for ... of ...
Notez qu'il existe aussi les méthodes has(), clear(), delete() (comme pour pour le type "map').

Le rendu

La tentative d'ajout d'un deuxième "7" a échoué (la taille du set est toujours 8) mais pas de plantage du script !

La dernière instruction n'est pas prise en compte ; un set est une collection non ordonnée d'éléments (pas d'indice associé à une valeur) ; donc l'accès indexé à un élément n'est pas possible.

Utilité d'un set

Dans le script ci-dessous le joueur obtient une "main" de 5 cartes toutes différentes car cette "main" est stockée dans une collection de type "set".
La simplicité du programme est dûe à l'emploi d'un objet de type "set" qui interdit les doublons.
Par ailleurs la tentative d'ajout d'un doublon ne provoque un 'plantage' du script.

Le code du document HTML

Déroulez ! ... <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 ...

let ma_main = new Set() : création d'un set vide nommé "ma_main".
for (; ;): création d'une boucle infinie qui sera exécuté au moins 5 fois parfois plus ...
Dans l'instruction ma_main = ma_main.add(carte) l'ajout à "ma_main" n'est pas automatique ; se réalise seulement s'il n'aboutit pas à un doublon.

Le rendu

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

La méthode forEach()

Cette méthode permet de parcourir une structure itérable. Elle peut donc s'appliquer à un array OU un map OU un set.

Le script de l'exemple

...
console.clear(); 
// parcours d'un array
const monArray = [1, 2, 3, 4];
monArray.forEach(function(element) {console.log(element);});

// parcours d'un set
const cartes = new Set(['as','roi', 'dame', 'valet',10,9,8,7]); 
cartes.forEach(function(element) {console.log(element);});

// parcours d'un map
const mesFruits = new Map([
  ["pommes", 500],
  ["bananes", 300],
  ["oranges", 200]
]);
mesFruits.forEach(function(cle, valeur) {console.log(cle + ' = ' + valeur);});		
...

Le rendu dans un nouvel onglet

Cliquez ici !

Attention : affichage dans la console !

Application à un array d'objets

La méthode forEach() peut s'appliquer à n'importe quel tableau indicé y compris un array d'objets.

Le script

...
const monTableau = [
        {nom : 'Jean', modele :'Peugeot 208' },
		{nom : 'Paul', modele:'Renault clio V'},
		{nom :'Louise',modele : 'Citroên C3 III'},
		{nom :'Martine',modele :'Dacia sandero III'}
    ];

console.clear(); 
// parcours d'un tableau indicé d'objets

// première solution
monTableau.forEach(function(element) {console.log(element);});

// deuxième solution 
monTableau.forEach(function(element) {console.log(element.nom + " " + element.modele);});
...

Le rendu

Cliquez ici !

La première méthode retourne "object" quatre fois sous Chrome et Edge mais fonctionne avec Firefox.
Sous Firefox :

La console a été effacée.
Object { nom: "Jean", modele: "Peugeot 208" }
Object { nom: "Paul", modele: "Renault clio V" }
Object { nom: "Louise", modele: "Citroên C3 III" }
Object { nom: "Martine", modele: "Dacia sandero III" }
Jean Peugeot
Paul Renault clioV
Louise Citroên C3 III
Martine Dacia sandero III

Traduction

Tutoriel sur Javascript

JavaScript : les bases

Framework historique : jQuery

Framework de nouvelle génération : Vue.js

Node.js : JavaScript 'côté serveur'

Recherche dans ce tuto

L'auteur : Patrick Darcheville

JavaScript : les collections de données

Les tableaux indicés ('arrays')

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

Accès indexé à un élément

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

La méthode includes

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 avec switch

Solution avec un array

Le rendu

Tableaux avec clés

Rappel : un tableau indicé d'objets

Le code du document HTML

Le rendu

Un map reprenant les mêmes informations

Le script - première partie

Le script - deuxième partie

Le rendu

Les "sets" ou "ensembles"

Premier exemple

Le script

Le rendu

Utilité d'un set

Le code du document HTML

Le rendu

La méthode forEach()

Le script de l'exemple

Le rendu dans un nouvel onglet

Application à un array d'objets

Le script

Le rendu