Pomocí různých tipů pro JavaScript a syntaktických zkratek vám tyto funkce pomohou vyřešit mnoho běžných problémů.

JavaScript je de facto jazyk pro tvorbu moderních webových a mobilních aplikací. Pohání širokou škálu projektů, od jednoduchých webových stránek až po dynamické interaktivní aplikace.

Chcete-li vytvářet produkty, které si uživatelé zamilují a ocení, je nezbytné, abyste napsali kód, který je nejen funkční, ale také účinný a snadno se udržuje. Čistý JavaScript kód je životně důležitý pro úspěch jakékoli webové nebo mobilní aplikace, ať už se jedná o hobby projekt nebo komplexní komerční aplikaci.

Co je tak dobrého na funkcích JavaScriptu?

Funkce je nezbytnou součástí pro psaní kódu jakékoli aplikace. Definuje kus znovu použitelného kódu, který můžete vyvolat k provedení konkrétního úkolu.

Kromě jejich opětovné použitelnosti jsou funkce vysoce univerzální. Z dlouhodobého hlediska zjednodušují proces škálování a udržování kódové základny. Podle vytváření a používání funkcí JavaScriptu, můžete ušetřit spoustu času na vývoj.

instagram viewer

Zde jsou některé užitečné funkce JavaScriptu, které mohou výrazně zlepšit kvalitu kódu vašeho projektu.

1. jednou

Tato funkce vyššího řádu jednou zabalí další funkci, aby bylo zajištěno, že ji můžete zavolat pouze jednou. Následné pokusy o volání výsledné funkce by měl tiše ignorovat.

Zvažte situaci, kdy chcete provádět požadavky HTTP API na načtení dat z databáze. Můžete připojit jednou fungovat jako zpětné volání pro funkce posluchače událostí, takže se spustí jednou a ne více.

Takovou funkci můžete definovat takto:

konst jednou = (func) => {
nechat výsledek;
nechat funcCalled = Nepravdivé;
vrátit se(...argumentuje) => {
-li (!funcCalled) {
 vysledek = func(...args);
 funcCalled = skutečný;
 }
vrátit se výsledek;
 };
};

Funkce Once vezme funkci jako argument a vrátí novou funkci, kterou můžete zavolat pouze jednou. Když novou funkci zavoláte poprvé, spustí původní funkci s danými argumenty a uloží výsledek.

Všechna následná volání nové funkce vrátí uložený výsledek bez opětovného spuštění původní funkce. Podívejte se na implementaci níže:

// Definujte funkci pro načítání dat z DB
funkcegetUserData() {
// ...
}
// získat verzi funkce getUserData, kterou lze spustit pouze jednou
konst makeHTTPRequestOnlyOnce = jednou (getUserData);
konst userDataBtn = dokument.querySelector("#btn");
userDataBtn.addEventListener("kliknout", makeHTTPRequestOnlyOnce);

Použitím funkce jednou můžete zaručit, že kód odešle pouze jeden požadavek, i když uživatel klikne na tlačítko několikrát. Vyhnete se tak problémům s výkonem a chybám, které mohou vyplynout z nadbytečných požadavků.

2. trubka

Tato funkce potrubí umožňuje řetězit více funkcí dohromady v sekvenci. Funkce v sekvenci vezmou jako vstup výsledek předchozí funkce a poslední funkce v sekvenci vypočítá konečný výsledek.

Zde je příklad v kódu:

// Definice funkce potrubí
konst trubka = (...funcs) => {
vrátit se(arg) => {
 funcs.forEach(funkce(func) {
 arg = func (arg);
 });
vrátit se arg;
 }
}


// Definujte některé funkce
konst addOne = (A) => a + 1;
konst dvojitý = (X) => X * 2;
konst čtverec = (X) => x * x;


// Vytvoří roura s funkcemi
konst myPipe = potrubí (addOne, double, square);
// Otestujte potrubí se vstupní hodnotou
řídicí panel.log (myPipe(2)); // Výstup: 36

Funkce potrubí mohou zlepšit čitelnost a modularitu kódu tím, že vám umožní stručně napsat složitou logiku zpracování. Díky tomu bude váš kód srozumitelnější a snáze se udržuje.

3. mapa

Funkce map je metoda vestavěné třídy JavaScript Array. Vytvoří nové pole použitím funkce zpětného volání na každý prvek původního pole.

Prochází každý prvek ve vstupním poli, předává jej jako vstup do funkce zpětného volání a vkládá každý výsledek do nového pole.

Důležité je poznamenat, že původní pole není během tohoto procesu žádným způsobem upravováno.

Zde je příklad použití mapa:

konst čísla = [1, 2, 3, 4, 5];
konst doubledNumbers = čísla.mapa(funkce(číslo) {
vrátit se číslo * 2;
});
řídicí panel.log (doubledNumbers);
// Výstup: [2, 4, 6, 8, 10]

V tomto příkladu funkce map iteruje každý prvek v poli čísel. Vynásobí každý prvek 2 a vrátí výsledky v novém poli.

Obecně platí, že mapové funkce eliminují potřebu pomocí smyček v JavaScriptu, zejména nekonečné – nekonečné smyčky mohou způsobit značnou výpočetní režii, což vede k problémům s výkonem v aplikaci. Díky tomu je kódová základna stručnější a méně náchylná k chybám.

4. výběr

Tato funkce výběru vám umožňuje selektivně extrahovat specifické vlastnosti z existujícího objektu a vygenerovat nový objekt s těmito vlastnostmi jako výsledek výpočtu.

Zvažte například funkci sestav v aplikaci, kterou můžete pomocí funkce výběru snadno přizpůsobit různé sestavy založené na požadovaných uživatelských informacích explicitním určením vlastností, které chcete zahrnout do různých zprávy.

Zde je příklad v kódu:

konst vybrat = (předmět, ...klíče) => {
vrátit se keys.reduce((výsledek, klíč) => {
-li (object.hasOwnProperty (klíč)) {
 vysledek[klíč] = objekt[klíč];
 }
vrátit se výsledek;
 }, {});
};

Funkce pick bere jako argumenty objekt a libovolný počet klíčů. Klávesy představují vlastnosti, které chcete vybrat. Poté vrátí nový objekt, který obsahuje pouze vlastnosti původního objektu s odpovídajícími klíči.

konst uživatel = {
 název: 'Martin',
 stáří: 30,
 e-mailem: '[email protected]',
};
řídicí panel.log (vybrat (uživatel, 'název', 'stáří'));
// Výstup: { jméno: 'Martin', věk: 30 }

Funkce výběru může v podstatě zapouzdřit složitou logiku filtrování do jediné funkce, což usnadňuje pochopení a ladění kódu.

Může také podpořit opětovnou použitelnost kódu, protože můžete znovu použít funkci výběru v celé své kódové základně, čímž se sníží duplicita kódu.

5. zip

Tato funkce zip spojuje pole do jednoho pole n-tic, které odpovídají odpovídajícím prvkům z každého vstupního pole.

Zde je příklad implementace funkce zip:

funkcezip(...pole) {
konst maxLength = Matematika.min(...pole.mapa(pole => pole.délka));
vrátit sePole.z(
 { délka: maximální délka },
 (_, index) => arrays.map(pole => pole[index])
 );
};


konst a = [1, 2, 3];
konst b = ['A', 'b', 'C'];
konst c = [skutečný, Nepravdivé, skutečný];
řídicí panel.log (zip (a, b, c));
// Výstup: [[1, 'a', true], [2, 'b', false], [3, 'c', true]]

Funkce zip přijímá vstupní pole a vypočítává jejich nejdelší délku. Poté vytvoří a vrátí jediné pole pomocí metody JavaScript Array.from. Toto nové pole obsahuje prvky z každého vstupního pole.

To je zvláště užitečné, pokud potřebujete okamžitě zkombinovat data z více zdrojů, čímž se odstraní nutnost psát redundantní kód, který by jinak zahltil vaši kódovou základnu.

Práce s funkcemi JavaScriptu ve vašem kódu

Funkce JavaScriptu výrazně zlepšují kvalitu vašeho kódu tím, že poskytují zjednodušený a kompaktní způsob, jak zvládnout velkou část programovací logiky pro malé i velké kódové báze. Pochopením a používáním těchto funkcí můžete psát efektivnější, čitelnější a udržovatelnější aplikace.

Psaní dobrého kódu umožňuje vytvářet produkty, které nejen řeší konkrétní problém pro koncové uživatele, ale dělají to způsobem, který lze snadno upravit.