การใช้งานคอลเลกชัน Map

สมมติว่าเรามีย่อหน้า:

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

มาทำให้เมื่อคลิกที่แต่ละย่อหน้า ตัวเลขลำดับของมันในรายการย่อหน้าถูกเขียนต่อท้าย ลองแก้ปัญหาด้วย Map

เริ่มกันเลย ขั้นแรกให้ได้ย่อหน้าของเรา มาไว้ในตัวแปร:

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

สร้างคอลเลกชัน Map ใหม่:

let map = new Map;

เติมคอลเลกชันของเรา โดยให้คีย์ เป็นย่อหน้าของเรา และค่าเป็นตัวเลขลำดับ:

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

วนย่อหน้าด้วยลูปและติดตั้ง ตัวจัดการการคลิกให้กับพวกมัน:

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

ตอนนี้เมื่อคลิก เราจะเพิ่มตัวเลขลำดับ ต่อท้ายข้อความของย่อหน้า โดยจะ รับตัวเลขลำดับนี้จากคอลเลกชันของเรา:

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

มีอินพุต ให้วนอินพุตเหล่านี้ด้วยลูป และสร้างคอลเลกชัน Map ซึ่งคีย์ ในนั้นจะเป็นอินพุต และค่าเป็น ตัวเลขลำดับบนหน้า ทำให้ เมื่อคลิกที่อินพุตใดๆ ก็ตาม ค่า value ของมันจะถูกบันทึกด้วยตัวเลขลำดับของมัน

มีอินพุต ในแต่ละอินพุตสามารถป้อน ตัวเลขได้ ให้เมื่อกด Enter อินพุต จำตัวเลขที่ป้อนไว้ ทำให้เมื่ออินพุตเสียโฟกัส ในคอนโซลจะแสดงอาร์เรย์ของตัวเลขทั้งหมดที่เคยป้อนในอินพุตนั้นมาก่อน