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