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

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

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

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

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

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

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

let map = new Map;

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

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

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

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

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

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

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

Input များကို ပေးထားသည်။ input တစ်ခုစီတွင် နံပါတ်တစ်ခုကို ရိုက်ထည့်နိုင်သည်။ Enter ကိုနှိပ်လိုက်သည်နှင့် input သည် ရိုက်ထည့်လိုက်သောနံပါတ်ကို မှတ်မိစေပါစေ။ input သည် focus ဆုံးရှုံးသွားသည်နှင့် input ထဲသို့ ယခင်က ရိုက်ထည့်ခဲ့သော နံပါတ်အားလုံး၏ array ကို console တွင် ပြသစေရန် လုပ်ဆောင်ပါ။