Utilisation des collections Map

Supposons que nous ayons des paragraphes :

html<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>

Faisons en sorte qu'en cliquant sur chaque paragraphe, son numéro d'ordre dans la liste des paragraphes soit écrit à la fin. Résolvons la tâche via Map.

Commençons. Pour commencer, mettons nos paragraphes dans une variable :

javascriptlet elems = document.querySelectorAll('p');

Créons une nouvelle collection Map :

javascriptlet map = new Map;

Remplissons notre collection de sorte que les clés soient nos paragraphes, et leurs valeurs - les numéros d'ordre :

javascriptlet i = 1;
for (let elem of elems) {
  map.set(elem, i++);
}

Parcourons les paragraphes avec une boucle et attachons-leur un gestionnaire de clic :

javascriptfor (let elem of elems) {
  elem.addEventListener('click', function() {
    
  });
}

Maintenant, au clic, ajoutons le numéro d'ordre à la fin du texte du paragraphe. Ce faisant, nous obtiendrons ce numéro à partir de notre collection :

javascriptfor (let elem of elems) {
  elem.addEventListener('click', function() {
    this.textContent += map.get(this);
  });
}