Pomocou rôznych tipov JavaScript a skratiek syntaxe vám tieto funkcie pomôžu vyriešiť mnoho bežných problémov.

JavaScript je de facto jazykom na vytváranie moderných webových a mobilných aplikácií. Poháňa širokú škálu projektov, od jednoduchých webových stránok až po dynamické interaktívne aplikácie.

Ak chcete vytvoriť produkty, ktoré budú používatelia milovať a oceniť, je nevyhnutné, aby ste napísali kód, ktorý je nielen funkčný, ale aj efektívny a ľahko sa udržiava. Čistý kód JavaScript je životne dôležitý pre úspech akejkoľvek webovej alebo mobilnej aplikácie, či už ide o hobby projekt alebo komplexnú komerčnú aplikáciu.

Čo je také dobré na funkciách JavaScriptu?

Funkcia je základným komponentom pre písanie kódu akejkoľvek aplikácie. Definuje časť opätovne použiteľného kódu, ktorý môžete vyvolať na vykonanie konkrétnej úlohy.

Okrem ich opätovnej použiteľnosti sú funkcie veľmi všestranné. Z dlhodobého hľadiska zjednodušujú proces škálovania a udržiavania kódovej základne. Autor: vytváranie a používanie funkcií JavaScriptu, môžete ušetriť veľa času na vývoj.

instagram viewer

Tu je niekoľko užitočných funkcií JavaScript, ktoré môžu výrazne zlepšiť kvalitu kódu vášho projektu.

1. raz

Táto jednorazová funkcia vyššieho rádu zabalí ďalšiu funkciu, aby ste sa uistili, že ju môžete zavolať iba raz. Následné pokusy o volanie výslednej funkcie by mal ticho ignorovať.

Zvážte situáciu, keď chcete vytvoriť požiadavky HTTP API na načítanie údajov z databázy. Môžete pripojiť raz fungovať ako spätné volanie pre funkcia poslucháča udalostí, takže sa spustí raz a nie viac.

Takúto funkciu môžete definovať takto:

konšt raz = (func) => {
nech výsledok;
nech funcCalled = falošný;
vrátiť(...argumentuje) => {
ak (!funcCalled) {
 vysledok = func(...args);
 funcCalled = pravda;
 }
vrátiť výsledok;
 };
};

Funkcia raz berie funkciu ako argument a vracia novú funkciu, ktorú môžete zavolať iba raz. Keď novú funkciu zavoláte prvýkrát, spustí pôvodnú funkciu s danými argumentmi a uloží výsledok.

Akékoľvek následné volania novej funkcie vrátia uložený výsledok bez opätovného spustenia pôvodnej funkcie. Pozrite sa na implementáciu nižšie:

// Definujte funkciu na načítanie údajov z DB
funkciugetUserData() {
// ...
}
// získať verziu funkcie getUserData, ktorá sa môže spustiť iba raz
konšt makeHTTPRequestOnlyOnce = raz (getUserData);
konšt userDataBtn = dokument.querySelector("#btn");
userDataBtn.addEventListener("klik", makeHTTPRequestOnlyOnce);

Použitím funkcie raz môžete zaručiť, že kód odošle iba jednu požiadavku, aj keď používateľ klikne na tlačidlo niekoľkokrát. Vyhnete sa tak problémom s výkonom a chybám, ktoré môžu vyplynúť z nadbytočných požiadaviek.

2. rúra

Táto funkcia potrubia vám umožňuje reťaziť viacero funkcií dohromady v sekvencii. Funkcie v sekvencii prevezmú výsledok predchádzajúcej funkcie ako vstup a posledná funkcia v sekvencii vypočíta konečný výsledok.

Tu je príklad v kóde:

// Definujte funkciu potrubia
konšt potrubie = (...funguje) => {
vrátiť(arg) => {
 funcs.forEach(funkciu(func) {
 arg = func (arg);
 });
vrátiť arg;
 }
}


// Definujte niektoré funkcie
konšt addOne = (a) => a + 1;
konšt dvojitý = (X) => X * 2;
konšt štvorec = (X) => x * x;


// Vytvorenie potrubia s funkciami
konšt myPipe = potrubie (addOne, double, square);
// Otestujte potrubie so vstupnou hodnotou
konzoly.log (myPipe(2)); // Výstup: 36

Funkcie potrubia môžu zlepšiť čitateľnosť a modularitu kódu tým, že vám umožnia stručne písať komplexnú logiku spracovania. Vďaka tomu bude váš kód zrozumiteľnejší a ľahšie sa udržiava.

3. mapa

Funkcia mapy je metóda vstavanej triedy JavaScript Array. Vytvára nové pole aplikovaním funkcie spätného volania na každý prvok pôvodného poľa.

Prechádza cez každý prvok vo vstupnom poli, odovzdáva ho ako vstup do funkcie spätného volania a vkladá každý výsledok do nového poľa.

Dôležité je poznamenať, že pôvodné pole sa počas tohto procesu žiadnym spôsobom nemodifikuje.

Tu je príklad použitia mapa:

konšt čísla = [1, 2, 3, 4, 5];
konšt doubledNumbers = cisla.map(funkciu(číslo) {
vrátiť číslo * 2;
});
konzoly.log (doubledNumbers);
// Výstup: [2, 4, 6, 8, 10]

V tomto príklade funkcia mapy iteruje každý prvok v poli čísel. Každý prvok vynásobí 2 a vráti výsledky v novom poli.

Vo všeobecnosti mapové funkcie eliminujú potrebu pomocou slučiek v JavaScripte, najmä nekonečné – nekonečné cykly môžu spôsobiť značnú výpočtovú réžiu, čo vedie k problémom s výkonom v aplikácii. Vďaka tomu je kódová základňa stručnejšia a menej náchylná na chyby.

4. vyzdvihnúť

Táto funkcia výberu vám umožňuje selektívne extrahovať špecifické vlastnosti z existujúceho objektu a vygenerovať nový objekt s týmito vlastnosťami ako výsledok výpočtu.

Zvážte napríklad funkciu správ v aplikácii, pomocou funkcie výberu si ju môžete bez námahy prispôsobiť rôzne zostavy založené na požadovaných používateľských informáciách explicitným špecifikovaním vlastností, ktoré chcete zahrnúť do rôznych správy.

Tu je príklad v kóde:

konšt vybrať = (objekt, ...kľúče) => {
vrátiť keys.reduce((výsledok, kľúč) => {
ak (object.hasOwnProperty (kľúč)) {
 výsledok[kľúč] = objekt[kľúč];
 }
vrátiť výsledok;
 }, {});
};

Funkcia pick berie ako argument objekt a ľubovoľný počet kláves. Klávesy predstavujú vlastnosti, ktoré chcete vybrať. Potom vráti nový objekt, ktorý obsahuje iba vlastnosti pôvodného objektu so zodpovedajúcimi kľúčmi.

konšt používateľ = {
 názov: 'Martin',
 Vek: 30,
 email: '[email protected]',
};
konzoly.log (vybrať (používateľa, 'názov', 'Vek'));
// Výstup: { meno: 'Martin', vek: 30 }

Funkcia výberu môže v podstate zapuzdrovať komplexnú logiku filtrovania do jedinej funkcie, vďaka čomu je kód ľahšie pochopiteľný a laditeľný.

Môže tiež podporiť opätovnú použiteľnosť kódu, pretože funkciu výberu môžete opätovne použiť v celej kódovej základni, čím sa zníži duplicita kódu.

5. PSČ

Táto funkcia zip kombinuje polia do jedného poľa n-tic, ktoré zodpovedajú zodpovedajúcim prvkom z každého vstupného poľa.

Tu je príklad implementácie funkcie zip:

funkciuPSČ(...pole) {
konšt maximálna dĺžka = Matematika.min(...pole.mapa(pole => pole.dĺžka));
vrátiťPole.od(
 { dĺžka: maximálna dĺžka },
 (_, index) => arrays.map(pole => pole[index])
 );
};


konšt a = [1, 2, 3];
konšt b = ['a', 'b', 'c'];
konšt c = [pravda, falošný, pravda];
konzoly.log (zip (a, b, c));
// Výstup: [[1, 'a', true], [2, 'b', false], [3, 'c', true]]

Funkcia zip akceptuje vstupné polia a vypočíta ich najdlhšiu dĺžku. Potom vytvorí a vráti jedno pole pomocou metódy Array.from JavaScript. Toto nové pole obsahuje prvky z každého vstupného poľa.

To je obzvlášť užitočné, ak potrebujete okamžite skombinovať údaje z viacerých zdrojov, čím sa odstráni potreba písať nadbytočný kód, ktorý by inak zahltil vašu kódovú základňu.

Práca s funkciami JavaScriptu vo vašom kóde

Funkcie JavaScript výrazne zlepšujú kvalitu vášho kódu tým, že poskytujú zjednodušený a kompaktný spôsob, ako zvládnuť množstvo programovacej logiky pre malé aj veľké databázy kódov. Pochopením a používaním týchto funkcií môžete písať efektívnejšie, čitateľnejšie a udržiavateľné aplikácie.

Napísanie dobrého kódu umožňuje vytvárať produkty, ktoré nielenže riešia konkrétny problém pre koncových používateľov, ale robia to spôsobom, ktorý sa dá ľahko upraviť.