5 naprednih funkcij JavaScript, s katerimi lahko izboljšate kakovost svoje kode

JavaScript je de facto jezik za izdelavo sodobnih spletnih in mobilnih aplikacij. Poganja široko paleto projektov, od preprostih spletnih mest do dinamičnih, interaktivnih aplikacij.

Če želite ustvariti izdelke, ki jih bodo uporabniki vzljubili in cenili, je bistveno, da napišete kodo, ki ni le funkcionalna, temveč tudi učinkovita in enostavna za vzdrževanje. Čista koda JavaScript je bistvenega pomena za uspeh katere koli spletne ali mobilne aplikacije, ne glede na to, ali gre za hobi stranski projekt ali kompleksno komercialno aplikacijo.

Kaj je tako dobrega pri funkcijah JavaScript?

Funkcija je bistvena komponenta za pisanje kode katere koli aplikacije. Določa del kode za večkratno uporabo, ki jo lahko pokličete za izvedbo določene naloge.

Poleg možnosti ponovne uporabe so funkcije zelo vsestranske. Dolgoročno poenostavijo postopek skaliranja in vzdrževanja kodne baze. Avtor: ustvarjanje in uporaba funkcij JavaScripta, lahko prihranite veliko časa za razvoj.

Tukaj je nekaj uporabnih funkcij JavaScript, ki lahko znatno izboljšajo kakovost kode vašega projekta.

1. enkrat

Ta enkratna funkcija višjega reda ovije drugo funkcijo, da zagotovi, da jo lahko pokličete samo enkrat. Moral bi tiho ignorirati nadaljnje poskuse klica nastale funkcije.

Razmislite o situaciji, ko želite narediti zahteve HTTP API za pridobivanje podatkov iz baze podatkov. Lahko priložite enkrat deluje kot povratni klic za funkcija poslušalca dogodkov, tako da se sproži enkrat in nič več.

Tukaj je opisano, kako lahko definirate takšno funkcijo:

konst enkrat = (funk) => {
pustiti rezultat;
pustiti funcCalled = lažno;
vrnitev(... args) => {
če (!funcCalled) {
 rezultat = func(...args);
 funcCalled = prav;
 }
vrnitev rezultat;
 };
};

Funkcija once sprejme funkcijo kot argument in vrne novo funkcijo, ki jo lahko pokličete samo enkrat. Ko prvič pokličete novo funkcijo, zažene izvirno funkcijo z danimi argumenti in shrani rezultat.

Vsi nadaljnji klici nove funkcije vrnejo shranjeni rezultat brez ponovnega zagona prvotne funkcije. Spodaj si oglejte izvedbo:

// Definirajte funkcijo za pridobivanje podatkov iz baze podatkov
funkcijogetUserData() {
// ...
}
// pridobite različico funkcije getUserData, ki se lahko zažene samo enkrat
konst makeHTTPRequestOnlyOnce = enkrat (getUserData);
konst userDataBtn = dokument.querySelector("#btn");
userDataBtn.addEventListener("klik", makeHTTPRequestOnlyOnce);

Z uporabo enkratne funkcije lahko zagotovite, da koda pošlje samo eno zahtevo, tudi če uporabnik večkrat klikne gumb. S tem se izognete težavam z zmogljivostjo in napakam, ki so lahko posledica odvečnih zahtev.

2. cev

Ta cevna funkcija vam omogoča povezovanje več funkcij v zaporedju. Funkcije v zaporedju bodo kot vhod vzele rezultat prejšnje funkcije, zadnja funkcija v zaporedju pa bo izračunala končni rezultat.

Tukaj je primer v kodi:

// Definirajte funkcijo cevi
konst cev = (...funkcije) => {
vrnitev(arg) => {
 funcs.forEach(funkcijo(funk) {
 arg = func (arg);
 });
vrnitev arg;
 }
}
// Definirajte nekaj funkcij
konst addOne = (a) => a + 1;
konst dvojno = (x) => x * 2;
konst kvadrat = (x) => x * x;
// Ustvari cev s funkcijami
konst myPipe = cev (addOne, double, square);
// Preizkusite cev z vhodno vrednostjo
konzola.log (myPipe(2)); // Izhod: 36

Funkcije cevi lahko izboljšajo berljivost in modularnost kode, tako da vam omogočajo jedrnato pisanje kompleksne procesne logike. Tako bo vaša koda bolj razumljiva in lažja za vzdrževanje.

3. zemljevid

Funkcija zemljevida je metoda vgrajenega razreda JavaScript Array. Ustvari novo matriko z uporabo funkcije povratnega klica za vsak element prvotne matrike.

Preleti vsak element v vhodni matriki, jo posreduje kot vhod v funkcijo povratnega klica in vsak rezultat vstavi v novo matriko.

Pomembno je omeniti, da se izvirna matrika med tem postopkom na noben način ne spremeni.

Tukaj je primer uporabe zemljevid:

konst številke = [1, 2, 3, 4, 5];
konst doubledNumbers = numbers.map(funkcijo(število) {
vrnitev številka * 2;
});
konzola.log (podvojena števila);
// Izhod: [2, 4, 6, 8, 10]

V tem primeru funkcija zemljevida ponovi vsak element v nizu številk. Vsak element pomnoži z 2 in vrne rezultate v novi matriki.

Na splošno funkcije zemljevida odpravljajo potrebo po z uporabo zank v JavaScriptu, zlasti neskončne – neskončne zanke lahko povzročijo precejšnje računske stroške, kar povzroči težave z zmogljivostjo v aplikaciji. To naredi kodno zbirko bolj jedrnato in manj nagnjeno k napakam.

4. izbrati

Ta funkcija izbire vam omogoča selektivno ekstrahiranje določenih lastnosti iz obstoječega predmeta in ustvarjanje novega predmeta s temi lastnostmi kot rezultatom izračuna.

Na primer, razmislite o funkciji poročil v aplikaciji, ki jo lahko preprosto prilagodite z uporabo funkcije izbire različna poročila na podlagi želenih informacij o uporabniku, tako da izrecno navedete lastnosti, ki jih želite vključiti v različne poročila.

Tukaj je primer v kodi:

konst izbrati = (predmet, ...ključi) => {
vrnitev keys.reduce((rezultat, ključ) => {
če (object.hasOwnProperty (ključ)) {
 rezultat [ključ] = predmet [ključ];
 }
vrnitev rezultat;
 }, {});
};

Funkcija pick sprejme predmet in poljubno število ključev kot argumente. Ključi predstavljajo lastnosti, ki jih želite izbrati. Nato vrne nov objekt, ki vsebuje samo lastnosti izvirnega predmeta z ujemajočimi se ključi.

konst uporabnik = {
 ime: 'Martin',
 starost: 30,
 E-naslov: '[email protected]',
};
konzola.log (izberi (uporabnik, 'ime', 'starost'));
// Izhod: { ime: 'Martin', starost: 30 }

V bistvu lahko funkcija izbire združi kompleksno logiko filtriranja v eno samo funkcijo, zaradi česar je koda lažja za razumevanje in odpravljanje napak.

Prav tako lahko spodbuja ponovno uporabnost kode, saj lahko znova uporabite funkcijo izbire v vsej svoji kodni bazi, kar zmanjša podvajanje kode.

5. zip

Ta funkcija zip združuje matrike v eno samo matriko tork, pri čemer se ujema z ustreznimi elementi iz vsake vhodne matrike.

Tukaj je primer izvedbe funkcije zip:

funkcijozip(... nizov) {
konst maxLength = matematika.min(...matri.map(niz => array.length));
vrnitevArray.od(
 { dolžina: maxLength},
 (_, indeks) => arrays.map(niz => niz[indeks])
 );
};
konst a = [1, 2, 3];
konst b = ['a', 'b', 'c'];
konst c = [prav, lažno, prav];
konzola.log (zip (a, b, c));
// Izhod: [[1, 'a', true], [2, 'b', false], [3, 'c', true]]

Funkcija zip sprejme vhodne nize in izračuna njihovo najdaljšo dolžino. Nato ustvari in vrne eno samo matriko z uporabo metode Array.from JavaScript. Ta nova matrika vsebuje elemente iz vsake vhodne matrike.

To je še posebej uporabno, če morate takoj združiti podatke iz več virov, s čimer odstranite potrebo po pisanju odvečne kode, ki bi sicer obremenila vašo kodno zbirko.

Delo s funkcijami JavaScript v vaši kodi

Funkcije JavaScript močno izboljšajo kakovost vaše kode, saj zagotavljajo poenostavljen in kompakten način za obravnavo velikega dela programske logike za majhne in velike kodne baze. Z razumevanjem in uporabo teh funkcij lahko pišete bolj učinkovite, berljive in vzdržljive aplikacije.

Pisanje dobre kode omogoča ustvarjanje izdelkov, ki ne le rešujejo določeno težavo za končne uporabnike, ampak to storijo na način, ki ga je enostavno spremeniti.