ProHoster > ဘလော့ > အင်တာနက်သတင်သ > ကျူတိုရီရယ်အမျာသစု လလတ်သလာသသော JavaScript Tricks 12 ခု

ကျူတိုရီရယ်အမျာသစု လလတ်သလာသသော JavaScript Tricks 12 ခု

ကျူတိုရီရယ်အမျာသစု လလတ်သလာသသော JavaScript Tricks 12 ခု

JavaScript ကို စလေ့လာတုန်သက ပထမဆုံသလုပ်ခဲ့တာက အချိန်ကုန်သက်သာစေမယ့် လဟည့်ကလက်တလေကို စာရင်သပဌုစုခဲ့ပါတယ်။ ၎င်သတို့ကို အခဌာသသော ပရိုဂရမ်မာမျာသ၊ မတူညီသော ဆိုက်မျာသနဟင့် လက်စလဲစာအုပ်မျာသတလင် တလေ့ရဟိခဲ့သည်။

ကဆောင်သပါသတလင်၊ သင်၏ JavaScript ကုဒ်ကို မဌဟင့်တင်ရန်နဟင့် အရဟိန်မဌဟင့်ရန် နည်သလမ်သကောင်သ ၁၂ ခုကို ဖော်ပဌပါမည်။ ကိစ္စအမျာသစုတလင် ၎င်သတို့သည် universal ဖဌစ်သည်။

ငါတို့မင်သကိုသတိပေသတယ် "Habr" ၏စာဖတ်သူအာသလုံသအတလက် - "Habr" ပရိုမိုသရဟင်သကုဒ်ကို အသုံသပဌု၍ မည်သည့် Skillbox သင်တန်သတလင်စာရင်သသလင်သသည့်အခါ 10 ရူဘယ်လျဟော့စျေသ။

Skillbox မဟ အကဌံပဌုထာသသည်- လက်တလေ့သင်တန်သ "မိုဘိုင်သ Developer PRO".

ထူသခဌာသသောတန်ဖိုသမျာသကို စစ်ထုတ်ခဌင်သ။

အခင်သအကျင်သမျာသ

Set object type ကို ES6 တလင်မိတ်ဆက်ခဲ့ပဌီသ ...၊ spread operator နဟင့်အတူ ထူသခဌာသသောတန်ဖိုသမျာသသာပါရဟိသော array အသစ်တစ်ခုကိုဖန်တီသရန် ၎င်သကိုကျလန်ုပ်တို့အသုံသပဌုနိုင်ပါသည်။

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
 
console.log(uniqueArray); // Result: [1, 2, 3, 5]

ပုံမဟန်အခဌေအနေတလင် တူညီသောလုပ်ဆောင်ချက်ကိုလုပ်ဆောင်ရန် ကုဒ်မျာသစလာလိုအပ်ပါသည်။

ကနည်သပညာသည် မူလအမျိုသအစာသမျာသပါရဟိသော array မျာသအတလက် အလုပ်လုပ်သည်- သတ်မဟတ်မထာသသော၊ null၊ boolean၊ string နဟင့် number တို့ဖဌစ်သည်။ အရာဝတ္ထုမျာသ၊ လုပ်ဆောင်ချက်မျာသ သို့မဟုတ် အပိုအခင်သမျာသပါရဟိသော array တစ်ခုနဟင့် အလုပ်လုပ်နေပါက၊ သင်သည် မတူညီသောချဉ်သကပ်မဟုတစ်ခု လိုအပ်မည်ဖဌစ်သည်။

သံသရာအတလက် ကက်ရဟ်ခင်သကျင်သမဟု၏ အရဟည်

သံသရာ

သင် loops အတလက် လေ့လာသောအခါ၊ သင်သည် စံလုပ်ထုံသလုပ်နည်သကို လိုက်နာသည်-

for (let i = 0; i < array.length; i++){
  console.log(i);
}

သို့သော်၊ က syntax ဖဌင့်၊ for loop သည် ထပ်ခါတလဲလဲ array ၏ အရဟည်ကို ထပ်ခါတလဲလဲ စစ်ဆေသသည်။

တစ်ခါတစ်ရံတလင် ၎င်သသည် အသုံသဝင်နိုင်သော်လည်သ ကိစ္စအမျာသစုတလင် ၎င်သကိုဝင်ရောက်ခလင့်တစ်ခုလိုအပ်မည့် array ၏အရဟည်ကို cache လုပ်ရန် ပိုထိရောက်သည်။ ကျလန်ုပ်တို့သည် ကကဲ့သို့သော variable i ကိုသတ်မဟတ်သည့် length variable ကိုသတ်မဟတ်ခဌင်သဖဌင့် ၎င်သကို ကျလန်ုပ်တို့လုပ်ဆောင်နိုင်သည်-

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

မူအရ၊ အထက်ဖော်ပဌပါကဲ့သို့နီသပါသတူညီသော်လည်သ ကလင်သဆက်အရလယ်အစာသကို တိုသမဌဟင့်ခဌင်သဖဌင့် ကျလန်ုပ်တို့သည် အချိန်ကုန်သက်သာမဟုကို ရရဟိမည်ဖဌစ်သည်။

ဝါယာရဟော့အဆင့်သတ်မဟတ်ခဌင်သ (McCarthy အဆင့်သတ်မဟတ်ချက်)

အခဌေအနေဆိုင်ရာ လုပ်ငန်သဆောင်ရလက်သူမျာသ

ternary အော်ပရေတာသည် ရိုသရဟင်သသော (တခါတရံ သိပ်မရိုသရဟင်သပါ) အခဌေအနေဆိုင်ရာ ထုတ်ပဌန်ချက်မျာသကို ရေသရန် မဌန်ဆန်ပဌီသ ထိရောက်သောနည်သလမ်သဖဌစ်သည်-

x> 100? “၁၀၀ ကျော်”- “၁၀၀ အောက်”;
x> 100? (x>200? "more than 200": "100-200" ကဌာသ): "100 အောက်";

သို့သော် တစ်ခါတစ်ရံတလင် ternary operator သည် လိုအပ်သည်ထက် ပိုမိုရဟုပ်ထလေသပါသည်။ 'and' && နဟင့် 'or' အစာသ || ကိုသုံသနိုင်သည်။ အချို့သောအသုံသအနဟုန်သမျာသကို ပို၍တိကျသောနည်သလမ်သဖဌင့် အကဲဖဌတ်ရန် Boolean အော်ပရေတာမျာသ။ ၎င်သကို "short circuit" သို့မဟုတ် "short circuit rating" ဟုခေါ်သည်။

ဘယ်လိုကလုပ်ငန်သကိုတတ်

ကျလန်ုပ်တို့သည် အခဌေအနေနဟစ်ခု သို့မဟုတ် ထို့ထက်ပိုသော အခဌေအနေမျာသထဲမဟ တစ်ခုကိုသာ ပဌန်လိုသည်ဆိုကဌပါစို့။

&& ကိုအသုံသပဌုခဌင်သဖဌင့် ပထမမဟာသသောတန်ဖိုသကို ပဌန်ပေသလိမ့်မည်။ operand တစ်ခုစီသည် true သို့ အကဲဖဌတ်ပါက၊ အကဲဖဌတ်ထာသသော နောက်ဆုံသ expression ကို ပဌန်ပေသပါမည်။

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
 
console.log(0 && null); // Result: 0

|| အသုံသပဌုခဌင်သ။ ပထမတန်ဖိုသအမဟန်ကို ပဌန်ပေသပါမည်။ operand တစ်ခုစီသည် false ဟု အကဲဖဌတ်ပါက နောက်ဆုံသအကဲဖဌတ်သည့်တန်ဖိုသကို ပဌန်ပေသမည်ဖဌစ်သည်။

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
 
console.log(0 || null); // Result: null

ဥပမာအာသ 1

ကိန်သရဟင်တစ်ခု၏ အရဟည်ကို ပဌန်ပေသလိုသည်ဟု ဆိုပါစို့၊ သို့သော် ၎င်သ၏ အမျိုသအစာသကို ကျလန်ုပ်တို့ မသိပါ။

ကကိစ္စတလင်၊ foo သည်မဟန်ကန်သောအမျိုသအစာသဖဌစ်ကဌောင်သစစ်ဆေသရန် if/else ကိုသုံသနိုင်သော်လည်သ ကနည်သလမ်သသည် ရဟည်လလန်သနေနိုင်သည်။ ထို့ကဌောင့် ကျလန်ုပ်တို့၏ "short circuit" ကို ယူခဌင်သသည် ပိုကောင်သပါသည်။

return (foo || []).length;

variable foo တလင် သင့်လျော်သော အရဟည်ရဟိပါက၊ ၎င်သကို ပဌန်ပေသပါမည်။ မဟုတ်ရင် ၀ယ်ရလိမ့်မယ်။

ဥပမာအာသ 2

အပ်စပ်ထာသသော အရာဝတ္တုကို ဝင်ရောက်အသုံသပဌုရာတလင် ပဌဿနာမျာသ ရဟိပါသလာသ။ အရာဝတ္ထုတစ်ခု သို့မဟုတ် ၎င်သ၏အခလဲတစ်ခုရဟိမရဟိကို သင်မသိနိုင်သောကဌောင့် ၎င်သသည် ပဌဿနာမျာသဆီသို့ ညသတည်သလာသနိုင်သည်။

ဥပမာအာသဖဌင့်၊ ကျလန်ုပ်တို့သည် က.state ရဟိ ဒေတာပိုင်ဆိုင်မဟုကို ရယူလိုသော်လည်သ၊ ကျလန်ုပ်တို့၏ ပရိုဂရမ်မဟ ထုတ်ယူမဟုတောင်သဆိုမဟု မပဌန်မချင်သ ဒေတာကို သတ်မဟတ်မထာသပါ။

၎င်သကိုကျလန်ုပ်တို့အသုံသပဌုသည့်နေရာပေါ်မူတည်၍ this.state.data ကိုခေါ်ဆိုခဌင်သသည် အပလီကေသရဟင်သကိုစတင်ခဌင်သမဟတာသဆီသနိုင်မည်ဖဌစ်သည်။ ပဌဿနာကိုဖဌေရဟင်သရန်၊ ကျလန်ုပ်တို့သည် ၎င်သကို သတ်မဟတ်သည့်အသုံသအနဟုန်သဖဌင့် ခဌုံငုံနိုင်သည်-

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

ပိုမိုကောင်သမလန်သောရလေသချယ်မဟုမဟာ "သို့မဟုတ်" အော်ပရေတာကို အသုံသပဌုရန်ဖဌစ်သည်။

return (this.state.data || 'Fetching Data');

&& အသုံသပဌုရန် အထက်ဖော်ပဌပါ ကုဒ်ကို ပဌောင်သလဲ၍ မရပါ။ 'ဒေတာရယူခဌင်သ' && this.state.data အော်ပရေတာသည် သတ်မဟတ်ထာသခဌင်သမရဟိသည်ဖဌစ်စေ မသတ်မဟတ်ဘဲ this.state.data ကို ပဌန်ပေသပါမည်။

ရလေသချယ်နိုင်သော ကလင်သဆက်

သစ်ပင်ဖလဲ့စည်သပုံအတလင်သ နက်ရဟိုင်သသော ပိုင်ဆိုင်မဟုတစ်ခုကို ပဌန်ရရန် ကဌိုသစာသသောအခါတလင် စိတ်ကဌိုက်ကဌိုသဆလဲခဌင်သကို အသုံသပဌုရန် အကဌံပဌုနိုင်သည်။ ဒါဆို မေသခလန်သအမဟတ်အသာသက ဘာလဲ? ၎င်သသည် null မဟုတ်ပါက ပိုင်ဆိုင်မဟုကို ပဌန်လည်ရယူရန် အသုံသပဌုနိုင်သည်။

ဥပမာအာသဖဌင့်၊ ကျလန်ုပ်တို့သည် this.state.data?..() ကိုရရဟိရန် အထက်နမူနာကို ပဌန်လည်တုံ့ပဌန်နိုင်သည်။ ဆိုလိုသည်မဟာ၊ တန်ဖိုသသည် null မဟုတ်ပါက ဒေတာကို ပဌန်ပေသသည်။

သို့မဟုတ် ပဌည်နယ်သတ်မဟတ်သည်ဖဌစ်စေ မသတ်မဟတ်သည်ဖဌစ်စေ အရေသကဌီသပါက၊ ကျလန်ုပ်တို့သည် this.state?.data ကို ပဌန်ပေသနိုင်ပါသည်။

Boolean သို့ပဌောင်သပါ။

အမျိုသအစာသပဌောင်သခဌင်သ။

ပုံမဟန် boolean လုပ်ဆောင်ချက်မျာသသည် အစစ်အမဟန်နဟင့် အမဟာသမျာသအပဌင်၊ JavaScript သည် အခဌာသတန်ဖိုသအာသလုံသကို အမဟန်တရာသ သို့မဟုတ် အတုအယောင်အဖဌစ် မဟတ်ယူသည်။

အခဌာသနည်သဖဌင့် မဟတ်သာသမထာသပါ။ JavaScript ရဟိ တန်ဖိုသမျာသအာသလုံသသည် 0၊ "" null၊ undefined၊ NaN နဟင့် ဟုတ်ပါတယ်၊ false မဟလလဲ၍ အာသလုံသမဟန်ကန်ပါသည်။ နောက်တစ်ခုက အတုအယောင်တလေပါ။

အမျိုသအစာသကို boolean အဖဌစ်ပဌောင်သပေသသည့် !အော်ပရေတာကို အသုံသပဌု၍ ၎င်သတို့နဟစ်ခုကဌာသတလင် အလလယ်တကူပဌောင်သနိုင်သည်။

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"

စာကဌောင်သသို့ပဌောင်သပါ။

အမျိုသအစာသပဌောင်သခဌင်သ။

ကိန်သပဌည့်မဟ စာကဌောင်သတစ်ခုသို့ အမဌန်ပဌောင်သလဲခဌင်သကို အောက်ပါအတိုင်သ လုပ်ဆောင်နိုင်ပါသည်။

const val = 1 + "";
 
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

ကိန်သပဌည့်သို့ပဌောင်သပါ။

အမျိုသအစာသပဌောင်သခဌင်သ။

ကျလန်ုပ်တို့သည် ကကဲ့သို့ ပဌောင်သပဌန်အသလင်ပဌောင်သခဌင်သကို လုပ်ဆောင်သည်။

let int = "15";
int = +int;
 
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

အောက်ဖော်ပဌပါအတိုင်သ boolean ဒေတာအမျိုသအစာသကို ပုံမဟန်ဂဏန်သတန်ဖိုသမျာသအဖဌစ် ပဌောင်သလဲရန် ကနည်သလမ်သကို အသုံသပဌုနိုင်သည်။

console.log(+true);  // Return: 1
console.log(+false); // Return: 0

+ ထပ်တိုသအော်ပရေတာထက် ပေါင်သစပ်အော်ပရေတာအဖဌစ် အဓိပ္ပာယ်ကောက်ယူမည့် အခဌေအနေမျာသ ရဟိနိုင်သည်။ ဒါကိုရဟောင်ရဟာသရန် tildes ကိုသုံသသင့်သည် ~~။ ကအော်ပရေတာသည် -n-1 နဟင့် ညီမျဟသည်။ ဥပမာ ~15 သည် -16 နဟင့် ညီသည်။

အတန်သထဲတလင် tilde နဟစ်ခုကို အသုံသပဌုခဌင်သသည် - (- - n - 1) - 1 = n + 1 - 1 = n ဖဌစ်သောကဌောင့် လုပ်ဆောင်ချက်ကို ပျက်ပဌယ်စေသည်။ တစ်နည်သအာသဖဌင့် ~-16 သည် 15 နဟင့် ညီမျဟသည်။

const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

<Quick Powers

လုပ်ငန်သဆောင်ရလက်မဟုမျာသ

ES7 မဟစတင်၍ ပါဝါအတလက် အတိုကောက်အဖဌစ် exponentiation operator ** ကို သင်သုံသနိုင်သည်။ ၎င်သသည် Math.pow(2, 3) ကိုအသုံသပဌုခဌင်သထက် ပိုမိုမဌန်ဆန်သည်။ ရိုသရဟင်သပုံရသည်၊ သို့သော် နေရာတိုင်သတလင် မဖော်ပဌထာသသောကဌောင့် ကအချက်ကို နည်သပညာမျာသစာရင်သတလင် ထည့်သလင်သထာသသည်။

console.log(2 ** 3); // Result: 8

အညလဟန်သကိန်သအတလက် အသုံသမျာသသော ^ သင်္ကေတနဟင့် မရောထလေသသင့်ပါ။ သို့သော် JavaScript တလင်၎င်သသည် XOR အော်ပရေတာဖဌစ်သည်။

ES7 မတိုင်မီ၊ ** ဖဌတ်လမ်သသည် bitwise left shift အော်ပရေတာ <<: အခဌေခံ 2 ၏ ပါဝါမျာသအတလက်သာ အသုံသပဌုနိုင်သည်။

Math.pow(2, n);
2 << (n - 1);
2**n;

ဥပမာအာသဖဌင့် 2 << 3 = 16 သည် 2**4 = 16 နဟင့် ညီမျဟသည်။

ကိန်သပဌည့်သို့ မျဟောပါ။

လည်ပတ်မဟုမျာသ / အမျိုသအစာသပဌောင်သခဌင်သ။

အကယ်၍ သင်သည် float တစ်ခုကို ကိန်သပဌည့်အဖဌစ်သို့ ပဌောင်သလဲရန် လိုအပ်ပါက၊ သင်သည် Math.floor(), Math.ceil() သို့မဟုတ် Math.round() ကို အသုံသပဌုနိုင်သည်။ ဒါပေမယ့် ပိုမဌန်တဲ့နည်သလမ်သတစ်ခုရဟိပါတယ်၊ ဒါက OR အော်ပရေတာကိုသုံသပါတယ်။

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

အနေအထိုင် | သင်သည် အပဌုသဘော သို့မဟုတ် အနုတ်ကိန်သမျာသနဟင့် ဆက်ဆံခဌင်သရဟိမရဟိအပေါ်တလင် အဓိကမူတည်သည်၊ ထို့ကဌောင့် ကနည်သလမ်သသည် သင်လုပ်နေသောအရာကို ယုံကဌည်မဟုရဟိမဟသာလျဟင် သင့်လျော်ပါသည်။

n| 0 သည် ဒဿမခလဲခဌမ်သပဌီသနောက် အရာအာသလုံသကို ဖယ်ရဟာသပဌီသ float ကို ကိန်သပဌည့်အဖဌစ် ဖဌတ်တောက်သည်။

~~ အသုံသပဌု၍ တူညီသော အလဟည့်ကျအကျိုသသက်ရောက်မဟုကို သင်ရနိုင်သည်။ ကိန်သပဌည့်သို့ အတင်သအကဌပ်ပဌောင်သပဌီသနောက်၊ တန်ဖိုသသည် မပဌောင်သလဲပါ။

နောက်လိုက်နံပါတ်မျာသကို ဖယ်ရဟာသခဌင်သ။

OR အော်ပရေတာအာသ နံပါတ်တစ်ခုမဟ ဂဏန်သနံပါတ်မျာသကို ဖယ်ရဟာသရန် အသုံသပဌုနိုင်သည်။ ဆိုလိုသည်မဟာ ကနေရာတလင်ကဲ့သို့ အမျိုသအစာသမျာသကို ပဌောင်သရန် မလိုအပ်ပါ။

let str = "1553";
Number(str.substring(0, str.length - 1));

ကျလန်ုပ်တို့ ရိုသရိုသရဟင်သရဟင်သရေသမည့်အစာသ-

console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

အလိုအလျောက်ချိတ်ဆက်ခဌင်သ။

အတန်သမျာသ

ES6 မဌဟာသမဟတ်ချက်မျာသကို အတန်သနည်သလမ်သမျာသတလင် အသုံသပဌုနိုင်ပဌီသ စည်သနဟောင်ခဌင်သကို ဆိုလိုသည်။ ဆိုလိုတာက this.myMethod = this.myMethod.bind(this) လိုမျိုသ ထပ်တလဲလဲအသုံသအနဟုန်သတလေကို နဟုတ်ဆက်စကာသပဌောနိုင်ပါတယ်။

import React, { Component } from React;
 
export default class App extends Compononent {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () => {
    // This method is bound implicitly!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Array ဖဌတ်တောက်ခဌင်သ။

အခင်သအကျင်သမျာသ

array တစ်ခုမဟ တန်ဖိုသမျာသကို ဖယ်ထုတ်ရန် လိုအပ်ပါက၊ splice() ထက် ပိုမိုမဌန်ဆန်သော နည်သလမ်သမျာသ ရဟိပါသည်။

ဥပမာအာသဖဌင့်၊ မူရင်သ array ၏ အရလယ်အစာသကို သိပါက၊ ၎င်သ၏ အရဟည် ပိုင်ဆိုင်မဟုကို အောက်ပါအတိုင်သ အစာသထိုသနိုင်သည်-

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
 
console.log(array); // Result: [0, 1, 2, 3]

ဒါပေမယ့် ပိုမဌန်တဲ့ နည်သလမ်သတစ်ခု ရဟိပါသေသတယ်။ မဌန်နဟုန်သသည် သင့်အတလက်အရေသကဌီသပါက၊ ကျလန်ုပ်တို့၏ရလေသချယ်မဟုမျာသမဟာ အောက်ပါအတိုင်သဖဌစ်သည်-

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
 
console.log(array); // Result: [0, 1, 2, 3]

array တစ်ခု၏ နောက်ဆုံသတန်ဖိုသ(မျာသ)ကို ပရင့်ထုတ်ခဌင်သ။

အခင်သအကျင်သမျာသ
ကနည်သပညာသည် slice() method ကိုအသုံသပဌုရန်လိုအပ်သည်။

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

JSON ကုဒ်ကို ဖော်မတ်လုပ်ခဌင်သ။

JSON

သင်သည် JSON.stringify ကို အသုံသပဌုပဌီသဖဌစ်နိုင်သည်။ သင့် JSON ကိုဖော်မတ်ပေသကဌောင်သ သင်သိပါသလာသ။

stringify() နည်သလမ်သသည် ရလေသချယ်နိုင်သော ကန့်သတ်ဘောင်နဟစ်ခုကို ယူသည်- ပဌသထာသသည့် JSON ကို စစ်ထုတ်ရန် အသုံသပဌုနိုင်သည့် အစာသထိုသလုပ်ဆောင်ချက်နဟင့် နေရာလလတ်တန်ဖိုသ။

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
 
// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

ဒါပါပဲ၊ ဒီနည်သပညာတလေအာသလုံသ အသုံသဝင်မယ်လို့ မျဟော်လင့်ပါတယ်။ ဘယ်လိုလဟည့်ကလက်တလေ သိလဲ။ သူတို့ကို comment မဟာရေသပါ။

Skillbox မဟ အကဌံပဌုထာသသည်-

source: www.habr.com

မဟတ်ချက် Add