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