Map kolekciju pielietojums

Pieņemsim, ka mums ir rindkopas:

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

Padarīsim tā, lai noklikšķinot uz katras rindkopas, tās beigās tiek ierakstīts tās kārtas numurs rindkopu sarakstā. Atrisināsim uzdevumu ar Map palīdzību.

Sāksim. Vispirms iegūstam savas rindkopas mainīgajā:

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

Izveidosim jaunu Map kolekciju:

let map = new Map;

Aizpildīsim savu kolekciju tā, lai atslēgas būtu mūsu rindkopas, un to vērtības - kārtas numuri:

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

Iziesim cauri rindkopām ar ciklu un uzliksim tām klikšķa apstrādātāju:

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

Tagad noklikšķinot pievienosim kārtas numuru rindkopas teksta beigās. To darot, mēs iegūsim šo numuru no mūsu kolekcijas:

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

Doti ievades lauki. Iziet cauri šiem ievades laukiem ar ciklu un izveidojiet kolekciju Map, kurā atslēgas būs ievades lauki, un to vērtības - to kārtas numuri lapā. Padariet tā, lai noklikšķinot uz jebkura ievades lauka, tam value tiktu ierakstīts tā kārtas numurs.

Doti ievades lauki. Katrā ievades laukā var ievadīt skaitli. Lai, nospiežot Enter, ievades lauks atceras ievadīto skaitli. Padariet tā, lai zaudējot fokusu ievades laukā, konsolē tiktu izvadīts visu iepriekš ievadīto ievades laukā skaitļu masīvs.