„JavaScript“ rodyklių funkcijos gali tapti geresniu kūrėju

„JavaScript“ rodyklių funkcijos gali tapti geresniu kūrėju

„JavaScript ES6“ atnešė įdomių pokyčių žiniatinklio kūrimo pasaulyje. Nauji „JavaScript“ kalbos papildymai atnešė naujų galimybių.





Vienas iš populiariausių pakeitimų buvo rodyklių funkcijų pridėjimas prie „JavaScript“. Rodyklių funkcijos yra naujas būdas rašyti „JavaScript“ funkcijų išraiškas, suteikiant du skirtingus būdus, kaip programoje kurti funkcijas.



Rodyklių funkcijas reikia šiek tiek pakoreguoti, jei esate tradicinių „JavaScript“ funkcijų ekspertas. Pažiūrėkime, kas tai yra, kaip jie veikia ir kuo jie naudingi.





Kas yra „JavaScript“ rodyklių funkcijos?

Rodyklių funkcijos yra naujas būdas rašyti funkcijų išraiškas, kurios buvo įtraukta į „JavaScript ES6“ leidimą . Jos yra panašios į jūsų naudojamas „JavaScript“ funkcijos išraiškas, kai kurios taisyklės šiek tiek skiriasi.

Rodyklių funkcijos visada yra anoniminės, joms taikomos skirtingos taisyklės



this

ir turi paprastesnę sintaksę nei tradicinės funkcijos.

ar ps3 žaidimai suderinami su ps4

Šios funkcijos naudoja naują rodyklės žetoną:



=>

Jei kada nors dirbote „Python“, šios funkcijos yra labai panašios į Python Lambda išraiškos .

Šių funkcijų sintaksė yra šiek tiek švaresnė nei įprastų funkcijų. Atminkite keletą naujų taisyklių:



  • Funkcijos raktinis žodis pašalinamas
  • Grąžinimo raktinis žodis yra neprivalomas
  • Garbanotieji breketai yra neprivalomi

Yra daug smulkių pakeitimų, todėl pradėkime nuo pagrindinio funkcijų išraiškų palyginimo.

Kaip naudotis rodyklių funkcijomis

Rodyklių funkcijas lengva naudoti. Rodyklės funkcijas lengviau suprasti, lyginant jas su tradicinėmis funkcijų išraiškomis.

Čia yra funkcijos išraiška, kuri prideda du skaičius; pirmiausia naudokite tradicinį funkcijų metodą:

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

Tai gana paprasta funkcija, apimanti du argumentus ir grąžinanti sumą.

Čia išraiška pakeista į rodyklės funkciją:

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

Funkcijų sintaksė yra visiškai kitokia naudojant rodyklių funkciją. Funkcijos raktinis žodis pašalinamas; rodyklės žyma leidžia „JavaScript“ žinoti, kad rašote funkciją.

Garbanotieji skliausteliai ir grąžinimo raktinis žodis vis dar yra. Tai neprivaloma su rodyklių funkcijomis. Štai dar paprastesnis tos pačios funkcijos pavyzdys:

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

Sugrįžimo raktinis žodis ir garbanotos petnešos dingo. Liko labai švari vienos eilutės funkcija, kuri yra beveik pusė kodo, kaip ir pradinė funkcija. Jūs gausite tą patį rezultatą su daug mažiau parašytu kodu.

Yra daugiau rodyklių funkcijų. pasinerkime giliau, kad geriau suprastum, ką jie gali padaryti.

Rodyklės funkcijos ypatybės

Rodyklės funkcijos turi daug skirtingų naudojimo būdų ir funkcijų.

kaip pradėti „spotify premium“ bandomąją versiją

Įprastos funkcijos

Rodyklių funkcijos gali naudoti vieną ar daugiau argumentų. Jei naudojate du ar daugiau argumentų, turite juos įtraukti skliausteliuose. Jei turite tik vieną argumentą, skliaustelių naudoti nereikia.

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

Rodyklių funkcijas galima naudoti be argumentų. Jei savo funkcijoje nenaudojate jokių argumentų, turite naudoti tuščius skliaustus.

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

Tokios paprastos funkcijos naudoja daug mažiau kodo. Įsivaizduokite, kiek lengviau yra kompleksas projektas kaip „JavaScript“ skaidrių demonstracija tampa, kai turite paprastesnį būdą rašyti funkcijas.

Naudojant tai

Sąvoka

this

yra sudėtingiausia „JavaScript“ naudojimo dalis. Rodyklių funkcijos

this

lengviau naudoti.

Kai naudojate rodyklių funkcijas

this

bus apibrėžta atitraukimo funkcija. Tai gali sukelti problemų, kylančių kuriant įdėtas funkcijas ir poreikius

this

pritaikyti savo pagrindinei funkcijai

Štai populiarus pavyzdys, kuriame parodytas sprendimas, kurį turite naudoti su įprastomis funkcijomis.

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

Priskiriant vertę

this

į kintamąjį daro jį skaitomą, kai iškviečiate funkciją savo pagrindinėje funkcijoje. Tai netvarkinga, čia yra geresnis būdas tai padaryti naudojant rodyklių funkcijas.

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

Nors jie puikiai tinka funkcijoms, jie neturėtų būti naudojami kuriant metodus objekto viduje. Rodyklių funkcijos nenaudoja tinkamo taikymo srities

this

.

Štai paprastas objektas, sukuriantis metodą viduje, naudojant rodyklės funkciją. Metodas turėtų sumažinti užpilai kintamas po vieną, kai iškviečiamas. Vietoj to jis visai neveikia.

kaip prijungti garso juostą prie roku tv
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

Darbas su masyvais

Naudodami rodyklių funkcijas galite supaprastinti kodą, naudojamą dirbant su masyvo metodais. Masyvai ir masyvo metodai yra labai svarbi „JavaScript“ dalis todėl jūs juos naudosite daug.

Yra keletas naudingų metodų, tokių kaip žemėlapis metodas, kuris vykdo funkciją visuose masyvo elementuose ir grąžina naują masyvą.

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

Tai gana paprasta funkcija, kuri prideda vieną prie kiekvienos masyvo vertės. Naudodami rodyklės funkciją, galite parašyti tą pačią funkciją su mažesniu kodu.

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

Dabar daug lengviau skaityti.

Objektų literatūros kūrimas

Rodyklių funkcijos gali būti naudojamos kuriant objektų literatūrą „JavaScript“. Įprastos funkcijos gali jas sukurti, tačiau jos yra šiek tiek ilgesnės.

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

Tą patį objektą galite sukurti naudodami rodyklės funkciją, naudodami mažiau kodo. Naudodami rodyklės žymėjimą turėsite įvynioti funkcijos turinį skliausteliuose. Štai patobulinta sintaksė su rodyklių funkcijomis.

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

„JavaScript“ rodyklių funkcijos ir ne tik

Dabar žinote keletą skirtingų būdų, kaip „JavaScript“ rodyklės funkcijos palengvina jūsų, kaip kūrėjo, gyvenimą. Jie sutrumpina sintaksę, suteikia daugiau galimybių valdyti

this

, palengvins objektų kūrimą ir suteiks jums naują būdą dirbti su masyvo metodais.

Rodyklės funkcijų įvedimas kartu su daugeliu kitų funkcijų „JavaScript ES6“ parodo, kaip „JavaScript“ tapo svarbi kuriant žiniatinklį. Vis dėlto galite padaryti daug daugiau.

Norite sužinoti daugiau apie „JavaScript“? Sužinokite apie šias „JavaScript“ sistemas. Be to, mūsų „JavaScript“ apgaulės lapas suteikia vertingos informacijos ir sužino daugiau kaip veikia „JavaScript“ gali tapti geresniu kūrėju.

Dalintis Dalintis „Tweet“ Paštu 6 garsinės alternatyvos: geriausios nemokamos arba pigios garso knygų programos

Jei nenorite mokėti už garso knygas, čia yra keletas puikių programų, leidžiančių nemokamai ir legaliai jų klausytis.

Skaityti toliau Susijusios temos
  • Programavimas
  • „JavaScript“
Apie autorių Anthony Grantas(Paskelbti 40 straipsnių)

Anthony Grantas yra laisvai samdomas rašytojas, apimantis programavimą ir programinę įrangą. Jis yra informatikos specialistas, besisukantis programavimo, „Excel“, programinės įrangos ir technologijų srityse.

Daugiau iš Anthony Grant

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia