Ang Mga Pag-andar ng JavaScript Arrow ay Maaaring Gawing Mas Mahusay na Developer

Nagdala ang JavaScript ES6 ng mga kapanapanabik na pagbabago sa mundo ng pagbuo ng web. Ang mga bagong pagdaragdag sa wikang JavaScript ay nagdala ng mga bagong posibilidad.

Ang isa sa mga pinakatanyag na pagbabago ay ang pagdaragdag ng mga pagpapaandar ng arrow sa JavaScript. Ang mga pagpapaandar sa arrow ay isang bagong paraan upang magsulat ng mga expression ng pag-andar ng JavaScript, na magbibigay sa iyo ng dalawang magkakaibang paraan upang lumikha ng mga pag-andar sa iyong app.

---

---

Ang mga pagpapaandar sa arrow ay tumatagal ng kaunting pagsasaayos kung ikaw ay dalubhasa sa tradisyonal na mga pag-andar ng JavaScript. Tingnan natin kung ano ang mga ito, kung paano ito gumagana, at kung paano sila makikinabang sa iyo.

Ano ang Mga Pag-andar ng JavaScript Arrow?

Ang mga pagpapaandar sa arrow ay isang bagong paraan upang magsulat ng mga expression ng pag-andar na dati kasama sa paglabas ng JavaScript ES6 . Pareho sila sa mga expression ng pag-andar ng JavaScript na iyong ginagamit, na may kaunting magkaibang mga panuntunan.

Ang mga pagpapaandar sa arrow ay palaging hindi nagpapakilalang mga pagpapaandar, may iba't ibang mga patakaran para sa

this

, at magkaroon ng isang mas simpleng syntax kaysa sa tradisyunal na mga pag-andar.

kung paano i-block ang mga email sa iphone

Ang mga pagpapaandar na ito ay gumagamit ng isang bagong token ng arrow:

---

---

=>

Kung nagtrabaho ka na sa Python, magkatulad ang mga pagpapaandar na ito Mga expression ng Python Lambda .

Ang syntax para sa mga pagpapaandar na ito ay medyo malinis kaysa sa normal na pag-andar. Mayroong ilang mga bagong patakaran na dapat tandaan:

---

---

• Ang function na keyword ay tinanggal
• Ang return keyword ay opsyonal
• Ang mga kulot na brace ay opsyonal

Mayroong maraming mga maliit na pagbabago upang magawa, kaya't magsimula tayo sa isang pangunahing paghahambing ng mga expression expression.

Paano Gumamit ng Mga Pag-andar ng Arrow

Madaling gamitin ang mga pagpapaandar sa arrow. Ang pag-unawa sa mga pag-andar ng arrow ay mas madali kapag inihambing magkatabi sa mga tradisyunal na expression ng pag-andar.

Narito ang isang expression expression na nagdaragdag ng dalawang numero; unang ginagamit ang tradisyunal na pamamaraan ng pag-andar:

let addnum = function(num1,num2){
return num1 + num2;
};
addnum(1,2);
>>3

Ito ay isang medyo simpleng pag-andar na tumatagal ng dalawang mga argumento at ibabalik ang kabuuan.

Narito ang expression na binago sa isang arrow function:

let addnum = (num1,num2) => { return num1 + num2;};
addnum(1,2);
>>3

Ang syntax ng pag-andar ay ibang-iba gamit ang isang arrow function. Ang function na keyword ay tinanggal; ipaalam sa token ng arrow ang JavaScript na nagsusulat ka ng isang pagpapaandar.

Ang mga kulot na tirante at ang bumalik na keyword ay naroon pa rin. Opsyonal ito sa mga pag-andar ng arrow. Narito ang isang mas simpleng halimbawa ng parehong pag-andar:

let addnum = (num1,num2) => num1 + num2;

Ang bumalik na keyword at ang mga kulot na tirante ay nawala na ngayon. Ang natitira ay isang napakalinis na pagpapaandar na isang linya na halos kalahati ng code bilang orihinal na pag-andar. Makakakuha ka ng parehong resulta sa mas kaunting nakasulat na code.

Mayroong higit pa sa mga pagpapaandar sa arrow. sumisid tayo nang mas malalim upang mas magkaroon ka ng pakiramdam para sa magagawa nila.

Mga Tampok ng Pag-andar ng Arrow

Ang mga pagpapaandar sa arrow ay may maraming iba't ibang mga gamit at tampok na kasama.

nasaan ang flashlight sa teleponong ito

Mga Regular na Pag-andar

Ang mga pagpapaandar sa arrow ay maaaring gumamit ng isa o higit pang mga argumento. Kung gumagamit ka ng dalawa o higit pang mga argumento dapat mong isama ang mga ito sa panaklong. Kung mayroon ka lamang isang pagtatalo, hindi mo kailangang gumamit ng panaklong.

let square = x => x * x
square(2);
>>4

Maaaring magamit ang mga pagpapaandar sa arrow nang walang mga argumento. Kung hindi ka gumagamit ng anumang mga argumento sa iyong pagpapaandar, dapat kang gumamit ng walang laman na panaklong.

let helloFunction = () => Console.log('Hello reader!');
helloFunction();
>>Hello reader!

Ang mga simpleng pag-andar tulad ng mga ito ay gumagamit ng mas kaunting code. Isipin kung gaano kadali ang isang kumplikado proyekto tulad ng isang JavaScript slideshow nagiging kapag mayroon kang isang mas simpleng paraan upang magsulat ng mga pag-andar.

Gamit Ito

Ang konsepto ng

this

may kaugaliang maging pinakahirapang bahagi ng paggamit ng JavaScript. Ginagawa ang mga pagpapaandar ng arrow

this

mas madaling gamitin.

Kapag gumamit ka ng mga pagpapaandar ng arrow

this

ay tukuyin ng enclosing function. Maaari itong lumikha ng mga problemang darating kapag lumikha ka ng mga pugad na function at pangangailangan

this

upang mag-apply sa iyong pangunahing pagpapaandar

Narito ang isang tanyag na halimbawa na nagpapakita ng workaround na kailangan mong gamitin sa mga regular na pag-andar.

function Person() {
var that = this; //You have to assign 'this' to a new variable
that.age = 0;
setInterval(function growUp() {
that.age++;
}, 1000);
}

Pagtatalaga ng halaga ng

this

sa isang variable ginagawang mabasa ito kapag tumawag ka sa isang pagpapaandar sa loob ng iyong pangunahing tungkulin. Magulo ito, narito ang isang mas mahusay na paraan upang magawa ito gamit ang mga arrow function.

function Person(){
this.age = 0;
setInterval(() => {
this.age++; // Now you can use 'this' without a new variable declared
}, 1000);
}

Habang ang mga ito ay mahusay para sa mga pagpapaandar, hindi sila dapat gamitin upang lumikha ng mga pamamaraan sa loob ng isang bagay. Ang mga pagpapaandar sa arrow ay hindi gumagamit ng tamang scoping para sa

this

.

Narito ang isang simpleng bagay na lumilikha ng isang pamamaraan sa loob gamit ang isang arrow function. Dapat mabawasan ng pamamaraan ang toppings variable ng isa kapag tinawag. Sa halip, hindi ito gumagana sa lahat.

kung paano palamigin ang iyong pc

let pizza = {
toppings: 5,
removeToppings: () => {
this.toppings--;
}
}
//A pizza object with 5 toppings
>pizza
>>{toppings: 5, removeToppings: f}
pizza.removeToppings(); //The method will not do anything to the object
>pizza
>>{toppings: 5, removeToppings: f} //Still has 5 toppings


Paggawa Gamit ang Mga Array

Gamit ang mga pag-andar ng arrow maaari mong gawing simple ang code na ginamit upang gumana sa mga pamamaraan ng pag-array. Mga array at Napakahalagang bahagi ng JavaScript ang mga pamamaraan ng pag-array kaya gagamitin mo sila ng marami.

Mayroong ilang mga kapaki-pakinabang na pamamaraan tulad ng mapa paraan na kung saan ay nagpapatakbo ng isang pag-andar sa lahat ng mga elemento ng isang array at ibabalik ang bagong array.

let myArray = [1,2,3,4];
myArray.map(function(element){
return element + 1;
});
>> [2,3,4,5]

Ito ay isang medyo simpleng pag-andar na nagdaragdag ng isa sa bawat halaga sa array. Maaari mong isulat ang parehong pag-andar na may mas kaunting code sa pamamagitan ng paggamit ng isang arrow function.

let myArray = [1,2,3,4];
myArray.map(element => {
return element + 1;
});
>> [2,3,4,5]

Mas madaling basahin ngayon.

Paglikha ng Mga Literal na Bagay

Ang mga pagpapaandar sa arrow ay maaaring magamit upang lumikha ng mga object literal sa JavaScript. Ang mga regular na pag-andar ay maaaring lumikha ng mga ito, ngunit medyo mas mahaba ang mga ito.

let createObject = function createName(first,last) {
return {
first: first,
last: last
};
};

Maaari mong gawin ang parehong bagay sa isang pag-andar ng arrow na gumagamit ng mas kaunting code. Gamit ang notasyong arrow kailangan mong balutin ang function body sa panaklong. Narito ang pinabuting syntax na may mga pag-andar ng arrow.

let createArrowObject = (first,last) => ({first:first, last:last});

Mga Pag-andar ng JavaScript Arrow at Higit pa

Alam mo ngayon ang ilang iba't ibang mga paraan ng pag-andar ng JavaScript arrow na gawing mas madali ang iyong buhay bilang isang developer. Paikliin nila ang syntax, bibigyan ka ng higit na kontrol sa paggamit

this

, gawing mas madali ang mga bagay upang likhain at bigyan ka ng isang bagong paraan upang gumana sa mga pamamaraan ng pag-array.

Ang pagpapakilala ng mga pagpapaandar ng arrow, kasama ang maraming iba pang mga tampok, sa JavaScript ES6 ay nagpapakita kung gaano kahalaga ang JavaScript sa pag-unlad ng web. Marami pang iba ang maaari mong gawin.

Nais bang malaman ang tungkol sa JavaScript? Alamin ang mga balangkas na ito ng JavaScript. Dagdag pa, ang aming JavaScript cheat sheet nagbibigay ng mahalagang impormasyon at karagdagang kaalaman tungkol sa kung paano gumagana ang JavaScript maaaring gumawa ka ng isang mas mahusay na developer.

Magbahagi Magbahagi Mag-tweet Email 6 Mga kahaliling Napapakinggan: Ang Pinakamahusay na Libre o Murang Audiobook Apps

Kung hindi mo pinangarap na magbayad para sa mga audiobook, narito ang ilang magagaling na apps na hinahayaan kang makinig sa kanila nang libre at ligal.

Basahin Susunod Mga Kaugnay na Paksa

• Programming
• JavaScript

Tungkol sa May-akda Anthony Grant(40 na Artikulo Nai-publish)

Si Anthony Grant ay isang freelance na manunulat na sumasaklaw sa Programming at Software. Isa siyang pangunahing agham sa Computer Science sa pag-program, Excel, software, at teknolohiya.

Higit pa Mula kay Anthony Grant

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe