Koristeći razne JavaScript savjete i sintaktičke prečace, ove funkcije će vam pomoći u rješavanju mnogih uobičajenih problema.
JavaScript je de facto jezik za izradu modernih web i mobilnih aplikacija. Pokreće širok raspon projekata, od jednostavnih web stranica do dinamičnih, interaktivnih aplikacija.
Za stvaranje proizvoda koje će korisnici voljeti i cijeniti, bitno je da napišete kod koji nije samo funkcionalan, već i učinkovit i jednostavan za održavanje. Čisti JavaScript kôd ključan je za uspjeh bilo koje web ili mobilne aplikacije, bilo da se radi o projektu s hobija ili složenoj komercijalnoj aplikaciji.
Što je tako dobro u JavaScript funkcijama?
Funkcija je bitna komponenta za pisanje koda bilo koje aplikacije. Definira dio koda za višekratnu upotrebu koji možete pozvati za izvođenje određenog zadatka.
Osim mogućnosti ponovne upotrebe, funkcije su vrlo svestrane. Dugoročno gledano, oni pojednostavljuju proces skaliranja i održavanja baze koda. Po stvaranje i korištenje JavaScript funkcija, možete uštedjeti puno vremena za razvoj.
Evo nekoliko korisnih JavaScript funkcija koje mogu značajno poboljšati kvalitetu koda vašeg projekta.
1. jednom
Ova funkcija jednom višeg reda obavija drugu funkciju kako bi se osiguralo da je možete pozvati samo jednom. Trebao bi tiho ignorirati naknadne pokušaje poziva rezultirajuće funkcije.
Razmotrite situaciju u kojoj želite uputiti HTTP API zahtjeve za dohvaćanje podataka iz baze podataka. Možete priložiti jednom funkcionirati kao povratni poziv za funkcija slušatelja događaja, tako da se aktivira jednom i ne više.
Evo kako biste mogli definirati takvu funkciju:
konst jednom = (funk) => {
neka proizlaziti;
neka funcCalled = lažno;povratak(... args) => {
ako (!funcCalled) {
rezultat = func(...args);
funcCalled = pravi;
}
povratak proizlaziti;
};
};
Once funkcija uzima funkciju kao argument i vraća novu funkciju koju možete pozvati samo jednom. Kada pozovete novu funkciju prvi put, ona pokreće izvornu funkciju sa zadanim argumentima i sprema rezultat.
Svi sljedeći pozivi nove funkcije vraćaju spremljeni rezultat bez ponovnog pokretanja izvorne funkcije. U nastavku pogledajte implementaciju:
// Definirajte funkciju za dohvaćanje podataka iz baze podataka
funkcijagetUserData() {
// ...
}
// dobivanje verzije funkcije getUserData koja se može pokrenuti samo jednom
konst makeHTTPRequestOnlyOnce = jednom (getUserData);
konst userDataBtn = dokument.querySelector("#btn");
userDataBtn.addEventListener("klik", makeHTTPRequestOnlyOnce);
Korištenjem funkcije jednom možete jamčiti da kod šalje samo jedan zahtjev, čak i ako korisnik klikne gumb nekoliko puta. Time se izbjegavaju problemi s performansama i greške koje mogu proizaći iz suvišnih zahtjeva.
2. cijev
Ova funkcija cijevi omogućuje vam da povežete više funkcija zajedno u nizu. Funkcije u nizu će uzeti rezultat prethodne funkcije kao ulaz, a zadnja funkcija u nizu će izračunati konačni rezultat.
Evo primjera u kodu:
// Definirajte funkciju cijevi
konst cijev = (...funkcije) => {
povratak(arg) => {
funcs.forEach(funkcija(funk) {
arg = func (arg);
});povratak arg;
}
}// Definirajte neke funkcije
konst addOne = (a) => a + 1;
konst dvostruko = (x) => x * 2;
konst kvadrat = (x) => x * x;// Stvorite cijev s funkcijama
konst myPipe = cijev (addOne, double, square);
// Testirajte cijev s ulaznom vrijednošću
konzola.log (mojaCjev(2)); // Izlaz: 36
Funkcije cijevi mogu poboljšati čitljivost i modularnost koda dopuštajući vam da sažeto napišete složenu logiku obrade. To može učiniti vaš kôd razumljivijim i lakšim za održavanje.
3. karta
Funkcija karte je metoda ugrađene klase JavaScript Array. Stvara novo polje primjenom funkcije povratnog poziva na svaki element izvornog polja.
Prolazi kroz svaki element u ulaznom nizu, prosljeđuje ga kao ulaz u funkciju povratnog poziva i umeće svaki rezultat u novi niz.
Ono što je važno napomenuti jest da se izvorni niz ni na koji način ne mijenja tijekom ovog procesa.
Evo primjera kako koristiti karta:
konst brojevi = [1, 2, 3, 4, 5];konst udvostručeniBrojevi = brojevi.map(funkcija(broj) {
povratak broj * 2;
});
konzola.log (udvostručeni brojevi);
// Izlaz: [2, 4, 6, 8, 10]
U ovom primjeru funkcija karte ponavlja svaki element u nizu brojeva. Množi svaki element s 2 i vraća rezultate u novom nizu.
Općenito, funkcije karte eliminiraju potrebu za koristeći petlje u JavaScriptu, osobito one beskonačne—beskonačne petlje mogu uzrokovati značajne računske troškove, što dovodi do problema s performansama u aplikaciji. To čini bazu koda sažetijom i manje sklonom pogreškama.
4. odabrati
Ova funkcija odabira omogućuje vam selektivno izdvajanje specifičnih svojstava iz postojećeg objekta i generiranje novog objekta s tim svojstvima kao rezultatom izračuna.
Na primjer, razmislite o značajci izvješća u aplikaciji, korištenjem funkcije odabira koju možete bez napora prilagoditi različita izvješća na temelju željenih korisničkih podataka izričitim navođenjem svojstava koja želite uključiti u različite izvještaji.
Evo primjera u kodu:
konst izabrati = (predmet, ...ključevi) => {
povratak tipke.reduce((rezultat, ključ) => {
ako (object.hasOwnProperty (ključ)) {
rezultat[ključ] = objekt[ključ];
}
povratak proizlaziti;
}, {});
};
Funkcija pick uzima objekt i bilo koji broj ključeva kao argumente. Ključevi predstavljaju svojstva koja želite odabrati. Zatim vraća novi objekt koji sadrži samo svojstva izvornog objekta s odgovarajućim ključevima.
konst korisnik = {
Ime: 'Martin',
dob: 30,
email: '[email protected]',
};
konzola.log (odaberi (korisnik, 'Ime', 'dob'));
// Izlaz: { ime: 'Martin', dob: 30 }
U osnovi, funkcija odabira može sažeti složenu logiku filtriranja u jednu funkciju, čineći kod lakšim za razumijevanje i otklanjanje pogrešaka.
Također može promicati ponovnu upotrebu koda, budući da možete ponovno koristiti funkciju odabira u cijeloj bazi koda, smanjujući dupliciranje koda.
5. zip
Ova zip funkcija kombinira nizove u jedno polje torki, podudarajući odgovarajuće elemente iz svakog ulaznog polja.
Evo primjera implementacije funkcije zip:
funkcijazip(...nizovi) {
konst najveća duljina = matematika.min(...nizovi.map(niz => niz.duljina));povratakNiz.iz(
{ duljina: maksimalna dužina },
(_, indeks) => arrays.map(niz => niz[indeks])
);
};konst a = [1, 2, 3];
konst b = ['a', 'b', 'c'];
konst c = [pravi, lažno, pravi];
konzola.log (zip (a, b, c));
// Izlaz: [[1, 'a', točno], [2, 'b', netočno], [3, 'c', točno]]
Funkcija zip prihvaća ulazne nizove i izračunava njihovu najveću duljinu. Zatim stvara i vraća jedno polje pomoću metode Array.from JavaScript. Ovo novo polje sadrži elemente iz svakog ulaznog polja.
Ovo je posebno korisno ako trebate trenutno kombinirati podatke iz više izvora, uklanjajući potrebu za pisanjem suvišnog koda koji bi inače zatrpao vašu bazu koda.
Rad s JavaScript funkcijama u vašem kodu
Funkcije JavaScripta uvelike poboljšavaju kvalitetu vašeg koda pružajući pojednostavljen i kompaktan način za rukovanje velikim dijelom programske logike za male i velike baze koda. Razumijevanjem i korištenjem ovih funkcija možete pisati učinkovitije, čitljivije i održivije aplikacije.
Pisanje dobrog koda omogućuje izradu proizvoda koji ne samo da rješavaju određeni problem za krajnje korisnike, već to čine na način koji je lako modificirati.