Folosind diverse sfaturi JavaScript și comenzi rapide de sintaxă, aceste funcții vă vor ajuta să rezolvați multe probleme comune.

JavaScript este limbajul de facto pentru construirea de aplicații web și mobile moderne. Acesta alimentează o gamă largă de proiecte, de la simple site-uri web la aplicații dinamice, interactive.

Pentru a crea produse pe care utilizatorii le vor iubi și aprecia, este esențial să scrieți un cod care nu este doar funcțional, ci și eficient și ușor de întreținut. Codul JavaScript curat este vital pentru succesul oricărei aplicații web sau mobile, fie că este vorba de un proiect secundar de hobby sau de o aplicație comercială complexă.

Ce este atât de bun despre funcțiile JavaScript?

O funcție este o componentă esențială pentru scrierea codului oricărei aplicații. Acesta definește o bucată de cod reutilizabil pe care o puteți invoca pentru a efectua o anumită sarcină.

Dincolo de reutilizarea lor, funcțiile sunt extrem de versatile. Pe termen lung, ele simplifică procesul de scalare și menținere a unei baze de cod. De

instagram viewer
crearea și utilizarea funcțiilor JavaScript, puteți economisi mult timp de dezvoltare.

Iată câteva funcții JavaScript utile care pot îmbunătăți semnificativ calitatea codului proiectului.

1. o singura data

Această funcție de ordin superior o dată include o altă funcție pentru a vă asigura că o puteți apela o singură dată. Ar trebui să ignore în tăcere încercările ulterioare de a apela funcția rezultată.

Luați în considerare o situație în care doriți să faceți solicitări HTTP API pentru a prelua date dintr-o bază de date. Puteți atașa o singura data funcţionează ca un apel invers pentru o funcție de ascultare a evenimentelor, astfel încât să se declanșeze o dată și nu mai mult.

Iată cum ați putea defini o astfel de funcție:

const o dată = (func) => {
lăsa rezultat;
lăsa funcCalled = fals;
întoarcere(...args) => {
dacă (!funcCalled) {
 rezultat = func(...args);
 funcCalled = Adevărat;
 }
întoarcere rezultat;
 };
};

Funcția once ia o funcție ca argument și returnează o funcție nouă pe care o puteți apela o singură dată. Când apelați noua funcție pentru prima dată, aceasta rulează funcția originală cu argumentele date și salvează rezultatul.

Orice apeluri ulterioare la noua funcție returnează rezultatul salvat fără a rula din nou funcția inițială. Aruncă o privire la implementarea de mai jos:

// Definiți o funcție pentru a prelua date din DB
funcţiegetUserData() {
// ...
}
// obține o versiune a funcției getUserData care poate rula o singură dată
const makeHTTPRequestOnlyOnce = o dată (getUserData);
const userDataBtn = document.querySelector("#btn");
userDataBtn.addEventListener("clic", makeHTTPRequestOnlyOnce);

Folosind funcția once puteți garanta că codul trimite o singură solicitare, chiar dacă utilizatorul face clic pe butonul de mai multe ori. Acest lucru evită problemele de performanță și erorile care pot rezulta din solicitările redundante.

2. teava

Această funcție de conductă vă permite să legați mai multe funcții împreună într-o secvență. Funcțiile din secvență vor lua rezultatul funcției precedente ca intrare, iar ultima funcție din secvență va calcula rezultatul final.

Iată un exemplu în cod:

// Definiți funcția pipe
const teava = (...funcții) => {
întoarcere(arg) => {
 funcs.forEach(funcţie(func) {
 arg = func (arg);
 });
întoarcere arg;
 }
}


// Definiți unele funcții
const addOne = (A) => un + 1;
const dublu = (X) => X * 2;
const pătrat = (X) => x * x;


// Creați o conductă cu funcțiile
const myPipe = conductă (addOne, double, square);
// Testează conducta cu o valoare de intrare
consolă.log (myPipe(2)); // Ieșire: 36

Funcțiile pipe pot îmbunătăți lizibilitatea și modularitatea codului, permițându-vă să scrieți logica de procesare complexă în mod concis. Acest lucru vă poate face codul mai ușor de înțeles și mai ușor de întreținut.

3. Hartă

Funcția map este o metodă a clasei încorporate JavaScript Array. Acesta creează o nouă matrice prin aplicarea unei funcții de apel invers fiecărui element din matricea originală.

Acesta parcurge fiecare element din matricea de intrare, îl transmite ca intrare la funcția de apel invers și inserează fiecare rezultat într-o matrice nouă.

Ceea ce este important de reținut este că matricea originală nu este modificată în niciun fel pe parcursul acestui proces.

Iată un exemplu de utilizare Hartă:

const numere = [1, 2, 3, 4, 5];
const doubledNumbers = numere.hartă(funcţie(număr) {
întoarcere număr * 2;
});
consolă.log (dublatNumbers);
// Ieșire: [2, 4, 6, 8, 10]

În acest exemplu, funcția map iterează peste fiecare element din matricea numere. Înmulțește fiecare element cu 2 și returnează rezultatele într-o nouă matrice.

În general, funcțiile hărților elimină nevoia de folosind bucle în JavaScript, în special cele infinite — buclele infinite pot cauza o suprasarcină de calcul semnificativă, ceea ce duce la probleme de performanță într-o aplicație. Acest lucru face baza de cod mai concisă și mai puțin predispusă la erori.

4. alege

Această funcție de alegere vă permite să extrageți selectiv proprietăți specifice dintr-un obiect existent și să generați un obiect nou cu acele proprietăți ca rezultat al calculului.

De exemplu, luați în considerare o funcție de rapoarte într-o aplicație, folosind funcția de alegere, puteți personaliza fără efort rapoarte diferite bazate pe informațiile de utilizator dorite, specificând în mod explicit proprietățile pe care doriți să le includeți în diverse rapoarte.

Iată un exemplu în cod:

const alege = (obiect,... chei) => {
întoarcere keys.reduce((rezultat, cheie) => {
dacă (object.hasOwnProperty (cheie)) {
 rezultat[cheie] = obiect[cheie];
 }
întoarcere rezultat;
 }, {});
};

Funcția pick ia ca argumente un obiect și orice număr de chei. Tastele reprezintă proprietățile pe care doriți să le selectați. Apoi returnează un nou obiect care conține numai proprietățile obiectului original cu chei potrivite.

const utilizator = {
 Nume: "Martin",
 vârstă: 30,
 e-mail: „[email protected]”,
};
consolă.log (alegeți (utilizator, 'Nume', 'vârstă'));
// Ieșire: { nume: „Martin”, vârsta: 30 }

În esență, o funcție de selectare poate încapsula logica complexă de filtrare într-o singură funcție, făcând codul mai ușor de înțeles și de depanat.

De asemenea, poate promova reutilizarea codului, deoarece puteți reutiliza funcția de alegere în întreaga bază de cod, reducând duplicarea codului.

5. fermoar

Această funcție zip combină matrice într-o singură matrice de tupluri, potrivind elementele corespunzătoare din fiecare matrice de intrare.

Iată un exemplu de implementare a unei funcții zip:

funcţiefermoar(...matrice) {
const maxLength = Matematică.min(...matrice.hartă(matrice => matrice.lungime));
întoarcereMatrice.din(
 { lungime: lungime maxima },
 (_, index) => arrays.map(matrice => matrice[index])
 );
};


const a = [1, 2, 3];
const b = ['A', 'b', 'c'];
const c = [Adevărat, fals, Adevărat];
consolă.log (zip (a, b, c));
// Ieșire: [[1, 'a', adevărat], [2, 'b', fals], [3, 'c', adevărat]]

Funcția zip acceptă matrice de intrare și calculează lungimea lor cea mai mare. Apoi creează și returnează o singură matrice folosind metoda JavaScript Array.from. Această nouă matrice conține elemente din fiecare matrice de intrare.

Acest lucru este util mai ales dacă trebuie să combinați instantaneu date din mai multe surse, eliminând nevoia de a scrie cod redundant care altfel ar aglomera baza de cod.

Lucrul cu funcțiile JavaScript în codul dvs

Funcțiile JavaScript îmbunătățesc foarte mult calitatea codului dvs., oferind o modalitate simplificată și compactă de a gestiona o mare parte a logicii de programare atât pentru bazele de cod mici, cât și pentru cele mari. Prin înțelegerea și utilizarea acestor funcții, puteți scrie aplicații mai eficiente, mai lizibile și mai ușor de întreținut.

Scrierea unui cod bun face posibilă construirea de produse care nu numai că rezolvă o anumită problemă pentru utilizatorii finali, dar fac acest lucru într-un mod ușor de modificat.