Ved at bruge forskellige JavaScript-tip og syntaksgenveje vil disse funktioner hjælpe dig med at løse mange almindelige problemer.

JavaScript er de facto-sproget til at bygge moderne web- og mobilapplikationer. Det driver en bred vifte af projekter, fra simple websteder til dynamiske, interaktive apps.

For at skabe produkter, som brugerne vil elske og værdsætte, er det vigtigt, at du skriver kode, der ikke kun er funktionel, men også effektiv og nem at vedligeholde. Ren JavaScript-kode er afgørende for succesen af ​​enhver web- eller mobilapp, uanset om det er et hobbyprojekt eller en kompleks kommerciel applikation.

Hvad er så godt ved JavaScript-funktioner?

En funktion er en vigtig komponent til at skrive kode til enhver applikation. Den definerer en del genanvendelig kode, som du kan kalde for at udføre en bestemt opgave.

Ud over deres genanvendelighed er funktioner meget alsidige. I det lange løb forenkler de processen med at skalere og vedligeholde en kodebase. Ved oprettelse og brug af JavaScripts funktioner, kan du spare meget udviklingstid.

instagram viewer

Her er nogle nyttige JavaScript-funktioner, der kan forbedre kvaliteten af ​​dit projekts kode markant.

1. enkelt gang

Denne engangsfunktion af højere orden omslutter en anden funktion for at sikre, at du kun kan kalde den en enkelt gang. Den bør stille ignorere efterfølgende forsøg på at kalde den resulterende funktion.

Overvej en situation, hvor du vil lave HTTP API-anmodninger for at hente data fra en database. Du kan vedhæfte enkelt gang fungere som tilbagekald til en begivenhedslytterfunktion, så den udløses én gang, og ikke mere.

Sådan kan du definere en sådan funktion:

konst en gang = (func) => {
lade resultat;
lade funcCalled = falsk;
Vend tilbage(...args) => {
hvis (!funcCalled) {
 resultat = func(...args);
 funcCalled = rigtigt;
 }
Vend tilbage resultat;
 };
};

Engangsfunktionen tager en funktion som et argument og returnerer en ny funktion, som du kun kan kalde én gang. Når du kalder den nye funktion for første gang, kører den den oprindelige funktion med de givne argumenter og gemmer resultatet.

Eventuelle efterfølgende kald til den nye funktion returnerer det gemte resultat uden at køre den oprindelige funktion igen. Tag et kig på implementeringen nedenfor:

// Definer en funktion til at hente data fra DB
fungeregetUserData() {
// ...
}
// få en version af getUserData-funktionen, der kun kan køre én gang
konst makeHTTPRequestOnlyOnce = én gang (getUserData);
konst userDataBtn = dokument.querySelector("#btn");
userDataBtn.addEventListener("klik", makeHTTPRequestOnlyOnce);

Ved at bruge én gang-funktionen kan du garantere, at koden kun sender én anmodning, selvom brugeren klikker på knappen flere gange. Dette undgår ydeevneproblemer og fejl, der kan skyldes overflødige anmodninger.

2. rør

Denne rørfunktion lader dig kæde flere funktioner sammen i en sekvens. Funktionerne i sekvensen vil tage resultatet af den foregående funktion som input, og den sidste funktion i sekvensen vil beregne det endelige resultat.

Her er et eksempel i kode:

// Definer rørfunktionen
konst rør = (...funktioner) => {
Vend tilbage(arg) => {
 funcs.forEach(fungere(func) {
 arg = func (arg);
 });
Vend tilbage arg;
 }
}


// Definer nogle funktioner
konst addOne = (-en) => et + 1;
konst dobbelt = (x) => x * 2;
konst kvadrat = (x) => x * x;


// Lav et rør med funktionerne
konst myPipe = rør (tilføjEt, dobbelt, firkantet);
// Test røret med en inputværdi
konsol.log (myPipe(2)); // Output: 36

Rørfunktioner kan forbedre læsbarheden og modulariteten af ​​kode ved at give dig mulighed for at skrive kompleks behandlingslogik kortfattet. Dette kan gøre din kode mere forståelig og nemmere at vedligeholde.

3. kort

Kortfunktionen er en metode i den indbyggede JavaScript Array-klasse. Det opretter et nyt array ved at anvende en tilbagekaldsfunktion til hvert element i det originale array.

Den går gennem hvert element i input-arrayet, sender det som input til tilbagekaldsfunktionen og indsætter hvert resultat i et nyt array.

Det, der er vigtigt at bemærke, er, at det originale array ikke ændres på nogen måde under hele denne proces.

Her er et eksempel på, hvordan du bruger kort:

konst tal = [1, 2, 3, 4, 5];
konst doubledNumbers = tal.kort(fungere(nummer) {
Vend tilbage nummer * 2;
});
konsol.log (dobbeltnumre);
// Output: [2, 4, 6, 8, 10]

I dette eksempel itererer kortfunktionen over hvert element i tal-arrayet. Den multiplicerer hvert element med 2 og returnerer resultaterne i en ny matrix.

Generelt eliminerer kortfunktioner behovet for ved hjælp af loops i JavaScript, især uendelige - uendelige sløjfer kan forårsage betydelige beregningsmæssige overhead, hvilket fører til ydeevneproblemer i en applikation. Dette gør kodebasen mere kortfattet og mindre udsat for fejl.

4. plukke

Denne valgfunktion lader dig selektivt udtrække specifikke egenskaber fra et eksisterende objekt og generere et nyt objekt med disse egenskaber som et resultat af beregningen.

Overvej for eksempel en rapportfunktion i en applikation, ved at bruge pick-funktionen kan du nemt tilpasse forskellige rapporter baseret på de ønskede brugeroplysninger ved eksplicit at angive de egenskaber, som du ønsker at inkludere i diverse rapporter.

Her er et eksempel i kode:

konst vælge = (objekt, ...nøgler) => {
Vend tilbage keys.reduce((resultat, nøgle) => {
hvis (object.hasOwnProperty (nøgle)) {
 resultat[nøgle] = objekt[nøgle];
 }
Vend tilbage resultat;
 }, {});
};

Pick-funktionen tager et objekt og et vilkårligt antal nøgler som argumenter. Tasterne repræsenterer de egenskaber, du vil vælge. Det returnerer derefter et nyt objekt, der kun indeholder egenskaberne for det originale objekt med matchende nøgler.

konst bruger = {
 navn: 'Martin',
 alder: 30,
 e-mail: '[email protected]',
};
konsol.log (vælg (bruger, 'navn', 'alder'));
// Output: { navn: 'Martin', alder: 30 }

Grundlæggende kan en pick-funktion indkapsle kompleks filtreringslogik i en enkelt funktion, hvilket gør koden lettere at forstå og fejlfinde.

Det kan også fremme kodegenanvendelighed, da du kan genbruge pick-funktionen i hele din kodebase, hvilket reducerer kodeduplikering.

5. lynlås

Denne zip-funktion kombinerer arrays til et enkelt array af tuples, der matcher tilsvarende elementer fra hvert input-array.

Her er et eksempel på implementering af en zip-funktion:

fungerelynlås(...arrays) {
konst maxLængde = Matematik.min(...arrays.map(array => array.length));
Vend tilbageArray.fra(
 { længde: maxLength },
 (_, indeks) => arrays.map(array => array[indeks])
 );
};


konst a = [1, 2, 3];
konst b = ['en', 'b', 'c'];
konst c = [rigtigt, falsk, rigtigt];
konsol.log (zip (a, b, c));
// Output: [[1, 'a', sand], [2, 'b', falsk], [3, 'c', sand]]

Zip-funktionen accepterer input-arrays og beregner deres længste længde. Det opretter og returnerer derefter et enkelt array ved hjælp af Array.from JavaScript-metoden. Dette nye array indeholder elementer fra hvert input-array.

Dette er især nyttigt, hvis du har brug for at kombinere data fra flere kilder med det samme, hvilket fjerner behovet for at skrive overflødig kode, som ellers ville rode i din kodebase.

Arbejde med JavaScript-funktioner i din kode

JavaScript-funktioner forbedrer i høj grad kvaliteten af ​​din kode ved at give en forenklet og kompakt måde at håndtere meget af programmeringslogikken for både små og store kodebaser. Ved at forstå og bruge disse funktioner kan du skrive mere effektive, læsbare og vedligeholdelige applikationer.

At skrive god kode gør det muligt at bygge produkter, der ikke kun løser et bestemt problem for slutbrugere, men gør det på en måde, der er nem at ændre.