Naudojant įvairius „JavaScript“ patarimus ir sintaksės nuorodas, šios funkcijos padės išspręsti daugelį įprastų problemų.

„JavaScript“ yra de facto kalba, skirta kurti šiuolaikines žiniatinklio ir mobiliąsias programas. Tai suteikia galimybę įgyvendinti įvairius projektus – nuo ​​paprastų svetainių iki dinamiškų, interaktyvių programų.

Norint sukurti produktus, kuriuos mylės ir vertins vartotojai, būtina parašyti kodą, kuris būtų ne tik funkcionalus, bet ir efektyvus bei lengvai prižiūrimas. Švarus JavaScript kodas yra gyvybiškai svarbus bet kurios žiniatinklio ar mobiliosios programos sėkmei, nesvarbu, ar tai būtų hobio projektas, ar sudėtinga komercinė programa.

Kuo geros JavaScript funkcijos?

Funkcija yra esminis komponentas rašant bet kurios programos kodą. Tai apibrėžia daugkartinio kodo, kurį galite iškviesti, kad atliktumėte konkrečią užduotį, dalį.

Be daugkartinio naudojimo, funkcijos yra labai universalios. Ilgainiui jie supaprastina kodų bazės mastelio keitimo ir priežiūros procesą. Autorius kuriant ir naudojant JavaScript funkcijas, galite sutaupyti daug kūrimo laiko.

instagram viewer

Štai keletas naudingų „JavaScript“ funkcijų, kurios gali žymiai pagerinti jūsų projekto kodo kokybę.

1. kartą

Ši aukštesnės eilės vienkartinė funkcija apima kitą funkciją, kad būtų užtikrinta, jog ją galite iškviesti tik vieną kartą. Ji turėtų tyliai ignoruoti vėlesnius bandymus iškviesti gautą funkciją.

Apsvarstykite situaciją, kai norite pateikti HTTP API užklausas duomenims iš duomenų bazės gauti. Galite pritvirtinti kartą veikia kaip atgalinis skambutis įvykių klausytojo funkcija, kad suaktyvintų vieną kartą ir ne daugiau.

Štai kaip galite apibrėžti tokią funkciją:

konst vieną kartą = (func) => {
leisti rezultatas;
leisti funcCalled = klaidinga;
grąžinti(...args) => {
jeigu (!funcCalled) {
 rezultatas = func(...args);
 funcCalled = tiesa;
 }
grąžinti rezultatas;
 };
};

Vieno karto funkcija naudoja funkciją kaip argumentą ir grąžina naują funkciją, kurią galite iškviesti tik vieną kartą. Kai iškviečiate naują funkciją pirmą kartą, ji paleidžia pradinę funkciją su nurodytais argumentais ir išsaugo rezultatą.

Bet kokie vėlesni naujos funkcijos iškvietimai grąžina išsaugotą rezultatą, nepaleidžiant pradinės funkcijos. Pažvelkite į įgyvendinimą žemiau:

// Apibrėžkite funkciją duomenims iš DB gauti
funkcijagetUserData() {
// ...
}
// gauti funkcijos getUserData versiją, kuri gali būti paleista tik vieną kartą
konst makeHTTPRequestOnlyOnce = vieną kartą (getUserData);
konst userDataBtn = dokumentas.querySelector("#btn");
userDataBtn.addEventListener("spausti", makeHTTPRequestOnlyOnce);

Naudodami vienkartinę funkciją galite garantuoti, kad kodas išsiųs tik vieną užklausą, net jei vartotojas spustelėja mygtuką kelis kartus. Taip išvengiama našumo problemų ir klaidų, kurios gali atsirasti dėl perteklinių užklausų.

2. vamzdis

Ši vamzdžio funkcija leidžia sujungti kelias funkcijas iš eilės. Sekos funkcijos kaip įvestį naudos ankstesnės funkcijos rezultatą, o paskutinė sekos funkcija apskaičiuos galutinį rezultatą.

Štai pavyzdys kode:

// Apibrėžkite vamzdžio funkciją
konst vamzdis = (...funkc) => {
grąžinti(arg) => {
 funcs.forEach(funkcija(func) {
 arg = func (arg);
 });
grąžinti arg;
 }
}


// Apibrėžkite kai kurias funkcijas
konst addOne = (a) => + 1;
konst dvigubas = (x) => x * 2;
konst kvadratas = (x) => x * x;


// Sukurkite vamzdį su funkcijomis
konst myPipe = vamzdis (addOne, double, square);
// Išbandykite vamzdį naudodami įvesties vertę
konsolė.log (myPipe(2)); // Išvestis: 36

Vamzdžių funkcijos gali pagerinti kodo skaitomumą ir moduliškumą, nes leidžia glaustai rašyti sudėtingą apdorojimo logiką. Tai gali padaryti jūsų kodą suprantamesnį ir lengviau prižiūrimą.

3. žemėlapis

Žemėlapio funkcija yra integruotos JavaScript Array klasės metodas. Tai sukuria naują masyvą, kiekvienam pradinio masyvo elementui taikydama atgalinio ryšio funkciją.

Jis pereina per kiekvieną įvesties masyvo elementą, perduoda jį kaip įvestį atgalinio skambinimo funkcijai ir įterpia kiekvieną rezultatą į naują masyvą.

Svarbu pažymėti, kad pradinis masyvas šio proceso metu jokiu būdu nepakeičiamas.

Štai pavyzdys, kaip naudoti žemėlapis:

konst skaičiai = [1, 2, 3, 4, 5];
konst doubledNumbers = skaičiai.map(funkcija(numerį) {
grąžinti numeris * 2;
});
konsolė.log (doubleSkaičiai);
// Išvestis: [2, 4, 6, 8, 10]

Šiame pavyzdyje žemėlapio funkcija kartojasi per kiekvieną skaičių masyvo elementą. Jis padaugina kiekvieną elementą iš 2 ir pateikia rezultatus naujame masyve.

Paprastai žemėlapio funkcijos pašalina poreikį naudojant „JavaScript“ kilpas, ypač begalinės – begalinės kilpos gali sukelti didelių skaičiavimo išlaidų, o tai gali sukelti programos veikimo problemų. Dėl to kodų bazė yra glaustesnė ir mažiau klaidų.

4. rinkti

Ši pasirinkimo funkcija leidžia pasirinktinai išskirti konkrečias ypatybes iš esamo objekto ir sugeneruoti naują objektą su tomis savybėmis kaip skaičiavimo rezultatą.

Pavyzdžiui, apsvarstykite ataskaitų funkciją programoje, naudodamiesi pasirinkimo funkcija, galite lengvai tinkinti skirtingos ataskaitos, pagrįstos norima vartotojo informacija, aiškiai nurodydami ypatybes, kurias norite įtraukti į įvairias pranešimus.

Štai pavyzdys kode:

konst pasirinkti = (objektas, ...raktai) => {
grąžinti keys.reduce((rezultatas, raktas) => {
jeigu (object.hasOwnProperty (raktas)) {
 rezultatas[raktas] = objektas[raktas];
 }
grąžinti rezultatas;
 }, {});
};

Parinkimo funkcija kaip argumentus paima objektą ir bet kokį raktų skaičių. Klavišai žymi ypatybes, kurias norite pasirinkti. Tada jis grąžina naują objektą, kuriame yra tik pradinio objekto savybės su atitinkamais raktais.

konst vartotojas = {
 vardas: "Martinas",
 amžius: 30,
 paštas: „[email protected]“,
};
konsolė.log (pasirinkti (vartotojas, 'vardas', "amžius"));
// Išvestis: { vardas: 'Martynas', amžius: 30 }

Iš esmės pasirinkimo funkcija gali sudėti sudėtingą filtravimo logiką į vieną funkciją, todėl kodą lengviau suprasti ir derinti.

Tai taip pat gali skatinti kodo pakartotinį naudojimą, nes galite pakartotinai naudoti pasirinkimo funkciją visoje kodų bazėje, sumažindami kodo dubliavimą.

5. užtrauktukas

Ši ZIP funkcija sujungia masyvus į vieną kortelių masyvą, suderindama atitinkamus kiekvieno įvesties masyvo elementus.

Štai zip funkcijos įgyvendinimo pavyzdys:

funkcijaužtrauktukas(...masyvai) {
konst maksimalus ilgis = Matematika.min(...masyvai.map(masyvas => masyvas.ilgis));
grąžintiMasyvas.from (
 { ilgio: Didžiausias ilgis },
 (_, indeksas) => arrays.map(masyvas => masyvas[indeksas])
 );
};


konst a = [1, 2, 3];
konst b = ['a', "b", 'c'];
konst c = [tiesa, klaidinga, tiesa];
konsolė.log (zip (a, b, c));
// Išvestis: [[1, 'a', true], [2, 'b', false], [3, 'c', true]]

Zip funkcija priima įvesties matricas ir apskaičiuoja ilgiausią jų ilgį. Tada jis sukuria ir grąžina vieną masyvą naudodamas Array.from JavaScript metodą. Šiame naujame masyve yra elementų iš kiekvieno įvesties masyvo.

Tai ypač naudinga, jei reikia akimirksniu sujungti duomenis iš kelių šaltinių, todėl nereikia rašyti perteklinio kodo, kuris kitu atveju užgriozdytų jūsų kodų bazę.

Darbas su „JavaScript“ funkcijomis jūsų kode

„JavaScript“ funkcijos labai pagerina kodo kokybę, nes supaprastinta ir kompaktiška galimybė valdyti daug programavimo logikos tiek mažoms, tiek didelėms kodų bazėms. Suprasdami ir naudodamiesi šiomis funkcijomis, galite rašyti efektyvesnes, skaitomas ir prižiūrimas programas.

Rašant gerą kodą galima sukurti produktus, kurie ne tik išspręstų konkrečią galutinių vartotojų problemą, bet tai padarytų taip, kad būtų lengva modifikuoti.