မင်္ဂလာပါခင်ဗျ။
ကျွန်တော်ကတော့ SpiceworksMyanmar Co.,Ltd တွင် Web Developer အဖြစ် ဝင်ရောက်လုပ်ကိုင်လျက်ရှိသော မောင်ဌေးမင်းခေါင် ဖြစ်ပါသည်။ ယနေ့ ကျွန်တော်တင်ပြပေးချင်တဲ့ အကြောင်းအရာကတော့ Web Developer များ အသုံးပြုနေသည့် JavaScript မှ Array နဲ့ For Loop အကြောင်းပဲ ဖြစ်ပါတယ်။

အကြောင်းအရာများကတော့
1. Array Map
2. Array Fill
3. Array Some
4. Array Every
5. Array Find
6. Array Filter
7. Array FindIndex
8. For Each
9. For Of
10. For In
11. Async in For Loop တို့ ဖြစ်ပါတယ်။

ကဲ ဒါဆို ကျွန်တော်တို့ စတင် လုပ်ကြည့်ကြရအောင်ပါ။ အရင်ဦးဆုံး Desktop မှာ folder အသစ်တစ်ခု တည်ဆောက်ပါမယ်။ နာမည်ကို JS လို့ပဲ ပေးလိုက်ပါမယ်။ ပြီးလျှင် folder အောက်မှာ index.html ဆိုတဲ့ဖိုင် တစ်ဖိုင်ဆောက်ပါမယ်။ ဖိုင်ထဲမှာ အောက်ပါ ကုဒ်များ ထည့်ပါမယ်။

ထည့်ပြီးပြီဆိုလျှင် folder ထဲမှာပဲ index.js ကို ဆောက်လိုက်ပါမယ်။ ပြီးလျှင် အောက်ပါအတိုင်း Person Object Array တွေ ထည့်လိုက်ပါမယ်။

let x = [{
    name: 'Phyo Thu',
    gender: 'female'
}, {
    name: 'Aung Hla',
    gender: 'male'
}, {
    name: 'Mg Aung',
    gender: 'male'
}];

1. Array Map
Array Map function ကို သုံးပြီး မိမိလိုချင်တဲ့ result ကို return ပြန်ပေးလိုက်မယ်ဆို convert လုပ်ပြီးသား array တစ်ခုကို ရပါမယ်။ အောက်မှာဆိုလျှင် gender female ဆိုတဲ့ နာမည်အရှေ့မှာ Ms. ထည့်ပြီး မဟုတ်လျှင် Mr. ထည့်ပါမယ်။ result အနေနဲ့ browser က console log ကြည့်မယ်ဆိုလျှင် array value သုံးခုကို တွေ့ရမှာ ဖြစ်ပြီး နာမည်ရှေ့မှာ Mr. Ms. တွေ ထည့်ပြီးသားဖြစ်နေမှာ ဖြစ်ပါတယ်။

const convert = x.map(function (v) {
    v.name = (v.gender == 'female' ? 'Ms.' : 'Mr.') + v.name;
    return v
})

2. Array Fill
Array Fill ကတော့ မူလရှိ array values တွေကို သတ်မှတ်ထားတဲ့ index ကနေ မိမိ ထည့်ချင်တဲ့ index အထိ သတ်မှတ်ထားသော value ကို ထည့်တာ ဖြစ်ပါတယ်။ အောက်ပါ ကုဒ်မှာဆိုလျှင် Mya Mya ဆိုတဲ့ gender female ကို 1 နေရာကနေ 3 နေရာထိ လဲမှာ ဖြစ်ပါတယ်။ Result အနေနဲ့ console log မှာ ကြည့်မယ်ဆို နဂို array value နောက်က နှစ်ယောက်သည် Mya Mya ဖြစ်သွားမှာ ဖြစ်ပါတယ်။

console.log(x.fill({
    name: 'Mya Mya',
    gender: 'female'
}, 1, 3));

3. Array Some
Array Some ကတော့ array values တွေထဲက condition နဲ့ ကိုက်ညီတာ တစ်ခုခု ရှိတာနဲ့ true ကို ပြန်ပေးမှာ ဖြစ်ပါတယ်။ အောက်က ကုဒ်မှာဆိုလျှင်တော့ array values တွေထဲမှာ gender male တစ်ယောက်ရှိတာနဲ့ true ပြန်ပေးမှာ ဖြစ်ပါတယ်။

console.log(x.some(v => {
    return v.gender == 'male'
}))

4. Array Every
Array Every ကတော့ array values တွေအားလုံးသည် condition နဲ့ ကိုက်ညီနေမှ true ကို ပြန်ပေးမှာ ဖြစ်ပါတယ်။ အောက်က ကုဒ်မှာဆိုလျှင်တော့ array values အားလုံး male ဖြစ်မှ true ပြန်ပေးမှာ ဖြစ်ပါတယ်။

console.log(x.every(v => {
    return v.gender == 'male'
}))

5. Array Find
Array Find ကတော့ array values တွေထဲက condition နဲ့ ကိုက်ညီတဲ့ array value တစ်ခုကို ဆွဲထုတ်ပေးမှာ ဖြစ်ပါတယ်။ အောက်က ကုဒ်မှာဆိုလျှင်တော့ gender female နဲ့ ကိုက်ညီတဲ့ value ကို ထုတ်ပေးမှာ ဖြစ်ပါတယ်။

console.log(x.find(v => {
    return v.gender == 'female'
}))

6. Array Filter
Array Filter ကတော့ array values တွေထဲက condition နဲ့ ကိုက်ညီတဲ့ array values အားလုံးကို ထုတ်ပေးမှာ ဖြစ်ပါတယ်။ အောက်က ကုဒ်မှာဆိုလျှင် gender male ဖြစ်တာ အားလုံးကို ထုတ်ပေးမှာ ဖြစ်ပါတယ်။

console.log(x.filter(v => {
    return v.gender == 'male'
}))

7. Array FindIndex
သူကတော့ find လို ပုံစံတူပြီး value ထုတ်ပေးမှာ မဟုတ်ဘဲ index ကို ထုတ်ပေးမှာ ဖြစ်ပါတယ်။ အောက်က ကုဒ်မှာဆိုလျှင်တော့ name Mg Aung နဲ့ ကိုက်ညီတဲ့ value ၏ index ကို ထုတ်ပေးမှာ ဖြစ်ပါတယ်။

console.log(x.findIndex(function (e, i) {
    return e.name == 'Mg Aung'
}));

8. For Each
For Each loop ကတော့ developer တွေ အများစု အသုံးပြုကြတာ ဖြစ်ပါတယ်။ အောက်ပါ ကုဒ်မှာဆိုလျှင် 1, 2, 3 array values တွေကို တစ်ခုချင်းစီကို ထုတ်ပေးမှာ ဖြစ်ပါတယ်။

[1, 2, 3].forEach(async element => {
        console.log(element);
    });

9. For Of
For Of သည်လည်း loop ပတ်ပြီး array values တွေကို value တစ်ခုချင်းစီ ထုတ်တာ ဖြစ်ပါတယ်။ သို့သော် For of သည် array ၏ value ကို ထုတ်ပေးမှာ ဖြစ်ပါတယ်။ အောက်ပါကုဒ်မှာဆိုလျှင် result မှာ a, b, c ဆိုပြီး တွေ့ရမှာ ဖြစ်ပါတယ်။

for (const v of ['a', 'b', 'c']) {
    console.log(v);
}

10. For In
For In ကလည်း loop ပတ်တာပဲဖြစ်ပြီး သူကတော့ index ကို ထုတ်ပေးမှာ ဖြစ်ပါတယ်။ အောက်က ကုဒ်မှာဆိုလျှင် 0, 1, 2 ဆိုပြီး result တွေ့ရမှာ ဖြစ်ပါတယ်။

for (const v in ['a', 'b', 'c']) {
    console.log(v);
}

11. Async in For Loop
For loop အတွင်းမှာ async ကို အသုံးပြုပြီး လုပ်ဆောင်တာလေးကို တင်ပြပေးချင်ပါတယ်။ array values တွေကို တစ်စက္ကန့် (၁) ခု console log ထုတ်သွားပါမယ်။ အဲ့ဒီအတွက် အရင်ဦးဆုံး wait function ကို ထည့်ပါမယ်။ ပြီးလျှင် function loopForIn ကို တည်ဆောက်ပါမယ်။ အဲ့နောက် ထို function ကို ပြန်ခေါ်ပါမယ်။ ကုဒ်က အောက်ပါအတိုင်း ဖြစ်ပါတယ်။ ကုဒ်ထည့်ပြီးပြီဆိုလျှင် browser တွင် run ကြည့်လိုက်ပါက 0, 1, 2 ကို (၁) စက္ကန့် value (၁) ခု ထုတ်ပေးပါလိမ့်မယ်။ ဤသို့ loop ထဲ await ထည့်သုံးတာကို for each မှာဆိုလျှင်တော့ အလုပ်လုပ်မှာ မဟုတ်ပါဘူး။ ကျန် for loop များမှာတော့ အလုပ်လုပ်ပါမယ်။

function wait() {
    return new Promise((r) => setTimeout(r, 1000))
}

async function loopForIn() {
    for (const v in ['a', 'b', 'c']) {
        await wait();
        console.log(v);
    }
}

loopForIn();

အခုလို အချိန်ပေး ဖတ်ရှုပေးတဲ့အတွက် ကျေးဇူးအများကြီးတင်ပါတယ်။ နောက်နောင်များမှာလည်း web development နဲ့ ပတ်သက်သော ဗဟုသုတရဖွယ် အကြောင်းအရာများကို ပြန်လည်မျှဝေပေးသွားမှာဖြစ်တဲ့အတွက် ဆက်လက် စောင့်မျှော်ဖတ်ရှုပေးဖို့ တိုက်တွန်းလိုက်ရင်း နိဂုံးချုပ်ပါရစေ။ သာယာပျော်ရွှင်သော နေ့ရက်များ ပိုင်ဆိုင်နိုင်ကြပါစေ။