Map စုစည်းမှုများ၏ အသုံးပြုခြင်း

ကျွန်ုပ်တို့တွင် အောက်ပါစာပိုဒ်များ ရှိသည်ဆိုပါစို့။

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

စာပိုဒ်တစ်ခုစီကို နှိပ်လိုက်သည့်အခါ ၎င်း၏အဆက်အစပ်အတွင်းရှိ စာပိုဒ်များ၏စာရင်းတွင် ၎င်း၏အစဉ်လိုက် နံပါတ်ကို နောက်ဆုံးတွင် ရေးသားထည့်သွင်းရန် လုပ်ဆောင်ကြပါစို့။ ဤပြဿနာကို Map မှတစ်ဆင့် ဖြေရှင်းပါမည်။

စတင်လိုက်ကြပါစို့။ ပထမဦးစွာ ကျွန်ုပ်တို့၏စာပိုဒ်များအား variable တစ်ခုအတွင်းသို့ ရယူပါမည်။

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

Map စုစည်းမှုအသစ်တစ်ခု ဖန်တီးပါမည်။

javascriptlet map = new Map;

�ျွန်ုပ်တို့၏စာပိုဒ်များသည် ၎င်းတို့၏ key များဖြစ်ပြီး ၎င်းတို့၏တန်ဖိုးများမှာ အစဉ်လိုက်နံပါတ်များဖြစ်စေရန် ကျွန်ုပ်တို့၏စုစည်းမှုကို ဖြည့်စွက်ပါမည်။

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

Loop တစ်ခုဖြင့် စာပိုဒ်များအား ထပ်ခါထပ်ခါလုပ်ဆောင်ပြီး ၎င်းတို့ပေါ်တွင် click event handler တစ်ခုကို တပ်ဆင်ပါမည်။

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

ယခုအခါ click တစ်ချက်နှိပ်လိုက်သည်နှင့် စာပိုဒ်၏စာသား အဆုံးတွင် အစဉ်လိုက်နံပါတ်ကို ထည့်သွင်းပါမည်။ ဤသို့လုပ်ဆောင်ရာတွင် ဤနံပါတ်ကို ကျွန်ုပ်တို့၏စုစည်းမှုမှ ရယူပါမည်။

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