Применение коллекций Map

Пусть у нас есть абзацы:

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

Давайте сделаем так, чтобы по клику на каждый абзац ему в конец записывался его порядковый номер в списке абзацев. Решим задачу через Map.

Приступим. Для начала получим наши абзацы в переменную:

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

Создадим новую коллекцию Map:

javascriptlet map = new Map;

Заполним нашу коллекцию так, чтобы ключами были наши абзацы, а их значениями - порядковые номера:

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

Переберем абзацы циклом и повесим на них обработчик клика:

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

Давайте теперь по клику будем добавлять порядковый номер в конец текста абзаца. При этом будем получать этот номер из нашей коллекции:

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