ES6 Arrow လုပ်ဆောင်ချက်များကို တုံ့ပြန်ပါ။
Arrow လုပ်ဆောင်ချက်များ
Arrow လုပ်ဆောင်ချက်များသည် ကျွန်ုပ်တို့အား ပိုတိုသော လုပ်ဆောင်ချက် syntax ရေးနိုင်စေသည်-
အရင်က
hello = function() {
return "Hello World!";
}
Arrow Function ဖြင့်
hello = () => {
return "Hello World!";
}
ပိုတိုလာသည်။ လုပ်ဆောင်ချက်တွင် ဖော်ပြချက်တစ်ခုသာ ရှိပြီး ထုတ်ပြန်ချက်သည် တန်ဖိုးတစ်ခု ပြန်ပေးပါက၊ သင်သည် ကွင်းစကွင်းပိတ် နှင့် သော့ချက်စာလုံး ကို
ဖယ်ရှားနိုင်သည် return-
Arrow Functions များသည် Default အားဖြင့် Return Value:
hello = () => "Hello World!";
မှတ်ချက်- လုပ်ဆောင်ချက်သည် ဖော်ပြချက်တစ်ခုသာရှိမှသာ ၎င်းသည် အလုပ်လုပ်သည်။
သင့်တွင် ဘောင်များရှိပါက၊ ၎င်းတို့ကို ကွင်းအတွင်း၌ ဖြတ်သွားသည်-
Parameters များဖြင့် Arrow Function
hello = (val) => "Hello " + val;
တကယ်တော့၊ သင့်တွင် ကန့်သတ်ချက်တစ်ခုသာ ရှိပါက၊ သင်သည် ကွင်းစဥ်များကို ကျော်သွားနိုင်သည်။
လက်မှတ်ရယူပါ။
$95 စာရင်းသွင်းပါ။
ဘာလဲ this?
ပုံမှန် လုပ်ဆောင်ချက်များ thisနှင့် နှိုင်းယှဉ်ပါက မြှားလုပ်ဆောင်ချက်များတွင်လည်း ကွဲပြားပါသည်။
အတိုချုပ်ပြောရလျှင်၊ မြှားလုပ်ဆောင်ချက်များဖြင့် စည်းနှောင်မှုမရှိပါ
this။
ပုံမှန်လုပ်ငန်းဆောင်တာများတွင် thisသော့ချက်စကားလုံးသည် ဝင်းဒိုး၊ စာရွက်စာတမ်း၊ ခလုတ် သို့မဟုတ် မည်သည့်အရာဖြစ်နိုင်သည်ဟူသော လုပ်ဆောင်ချက်ဟုခေါ်သော အရာတစ်ခုကို ကိုယ်စားပြုသည်။
မြှားလုပ်ဆောင်ချက်များဖြင့်၊ thisသော့ချက်စကားလုံး သည် မြှားလုပ်ဆောင်ချက်ကို သတ်မှတ်ပေးသည့် အရာဝတ္ထုကို အမြဲတမ်း ကိုယ်စားပြုသည်။
ခြားနားချက်ကို နားလည်ရန် ဥပမာနှစ်ခုကို ကြည့်ကြပါစို့။
နမူနာနှစ်ခုလုံးသည် နည်းလမ်းတစ်ခုအား နှစ်ကြိမ်ခေါ်ဆိုသည်၊ ပထမအကြိမ် စာမျက်နှာဖွင့်သည့်အခါ၊ အသုံးပြုသူသည် ခလုတ်တစ်ခုကို နှိပ်သည့်အခါ နောက်တစ်ကြိမ်ခေါ်သည်။
ပထမဥပမာသည် ပုံမှန်လုပ်ဆောင်ချက်ကိုအသုံးပြုပြီး ဒုတိယဥပမာသည် မြှားလုပ်ဆောင်ချက်ကိုအသုံးပြုသည်။
ရလဒ်သည် ပထမဥပမာသည် မတူညီသော အရာနှစ်ခု (window နှင့် button) ကို ပြန်ပေးကြောင်းပြသပြီး ဒုတိယဥပမာသည် Header object ကို နှစ်ကြိမ်ပြန်ပေးကြောင်းပြသသည်။
ဥပမာ
ပုံမှန်လုပ်ဆောင်ချက်ဖြင့်၊ function thisဟုခေါ်သော အရာဝတ္ထုကို ကိုယ်စားပြုသည်-
class Header {
constructor() {
this.color = "Red";
}
//Regular function:
changeColor = function() {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
ဥပမာ
မြှားလုပ်ဆောင်ချက်ဖြင့်၊ လုပ်ဆောင်ချက်ကို thisဘယ်သူက ခေါ်သည်ဖြစ်စေ Header object ကို ကိုယ်စားပြုသည်-
class Header {
constructor() {
this.color = "Red";
}
//Arrow function:
changeColor = () => {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
လုပ်ဆောင်ချက်တွေနဲ့ အလုပ်လုပ်တဲ့အခါ ဒီကွဲပြားမှုတွေကို မှတ်သားထားပါ။ တစ်ခါတစ်ရံတွင် ပုံမှန်လုပ်ဆောင်ချက်များ၏ အပြုအမူသည် သင်အလိုမရှိလျှင် မြှားလုပ်ဆောင်ချက်များကို အသုံးပြုပါ။